CSS Responsive Design mit Bootstrap

smej

Ensign
Dabei seit
Dez. 2006
Beiträge
161
Hey Leute,

ich bau gerade an meiner Webseite für Hardware Reviews und will diese natürlich auch responsive gestalten für mobile Entgeräte. Bräuchte da mal ein bisschen Hilfe via Skype oder so wenn möglich :) Wenn jemand lust hat mir bei ein zwei Fragen zu helfen kann gerne hier seinen Nick von Skype posten dann adde ich euch/dich :D

1. Alles über die Standard "col" Werte anpassen?
2. Oder für alles eine Extra "@media (max/min-width: )" CSS Klasse?

Gruß
ro0ki
 
Zuletzt bearbeitet:

SomeDifferent

Ensign
Dabei seit
März 2014
Beiträge
197
Frag lieber direkt hier im Forum. So hast du eine breitere Masse an Leuten, die dir helfen können. Zusätzlich schaffst du einen Mehrwert für andere Einsteiger, die vor den selben Problemen stehen :)
 

0w1p

Commander
Dabei seit
Juli 2009
Beiträge
2.585
einfach alles über col-Werte anpassen.

ein "col-xs-*" ist für ganz kleine Geräte über "col-sm-*" zu "col-md-*" bis zu "col-lg-*" für große Geräte. Dadurch ändert sich Hauptsächlich das Verhalten wann es nicht mehr in einer Zeile ist, sondern umbricht. So kannst du auch unterschiedliche Layouts auf unterschiedlichen Geräten erreichen. Mit "row" kannst du auf jeder Größe eine neue Zeile erzwingen, auch sehr praktisch.

Das ganze kann man gut in der Kombination mit "hidden-xs", "hidden-sm", "hidden-md" und "hidden-lg" verwenden, um Sachen bei bestimmten Größen gar nicht zu zeigen.

@media brachst du nie verwenden.

Hier auch noch ein praktischer Link zur Dokumentation: https://getbootstrap.com/examples/grid/
 
Zuletzt bearbeitet:

blöderidiot

Captain
Dabei seit
Juni 2004
Beiträge
3.293
1. Alles über die Standard "col" Werte anpassen?
2. Oder für alles eine Extra "@media (max/min-width: )" CSS Klasse?
Theoretisch ist es schon so, wie 0w1p sagt und damit wirst Du erstmal anfangen. Enden wirst Du aber voraussichtlich mit der Definition von x @media-Klassen für alle möglichen verschiedene Auflösungen ;)
 
Top