Bootstrap 3: Rastersystem und Media Queries
Bootstrap bietet viele Vorteile für Webdesigner. Insbesondere macht das Framework die Erstellung von responsive Websites möglich. In diesem Beitrag wird ausführlich erklärt, wie man Layouts für verschiedene Endgeräte erstellen kann.
2011 haben Mark Otto und Jacob Thorton es geschafft, das leistungsfähigste CSS-Framework zu entwickeln. Bootstrap ist heute unter Webentwicklern gut bekannt und gehört zu populärsten Open-Source-Frameworks weltweit. Als Bootstrap 3 veröffentlicht wurde, gab es wesentliche Änderungen gegenüber der letzten Version. Der Hauptunterschied lag in den Rastersystemen. Wenn sich Bootstrap 2 auf zwei Bildschirmgrößen (Desktop und Mobil) orientierte, verfügt Bootstrap 3 über ein Mobile-First-basiertes Rastersystem, das Spalten über verschiedene Endgeräte - Smartphones, Tablets, Desktops und große Desktops - skaliert. Dieser Trend verstärkt sich in der 4. Version des Frameworks.
Bootstrap 2 |
Bootstrap 3 |
Bootstrap 4 |
| Das erstellte Raster funktioniert auf Desktops und stapelt, wenn die Browsergröße unter 767px liegt. Diese Einschränkung ergibt sich dadurch, dass Ihr nur 1 Raster in Desktop-Browsern definieren könnt. Auf mobilen Geräten erstellt Ihr ein Raster, dessen Spalten übereinander angeordnet werden. | Das neue Bootsrap Rastersystem richtet sich auf Mobil-First aus. Wenn Ihr eine bestimmte Rastergröße festlegt, ist das ein Raster für dieses und größeres Darstellungsfeld. | Die neue Bootstrap-Version bietet ein verbessertes Rastersystem mit einer neuen Stufe, mit der sich mobile Nutzer besser als je zuvor ansprechen lassen. Zusätzlich haben semantische Mixins das große Update erfahren. Jetzt könnt Ihr von überall aus auf benötigte Mixins zugreifen |
Bootstrap 3 Beispiele von Spalten
Es mag auf den ersten Blick ein wenig kompliziert erscheinen, daher kommen wir ohne Beispiele nicht aus. Stellen wir uns vor, Ihr wollt eine Website erstellen, die folgenderweise dargestellt wird:
- 1 Spalte auf extra kleinen Geräten
- 2 Spalten auf kleinen und mittleren Geräten
- 4 Spalten auf großen Geräten
Da das Rastersystem jetzt auf mobilen Geräten kaskadiert, wird der Code so aussehen.
<div class="row">
<div class="col-sm-6 col-lg-3">
Das ist ein Teil Eures Rasters
</div>
<div class="col-sm-6 col-lg-3">
Das ist ein Teil Eures Rasters.
</div>
<div class="col-sm-6 col-lg-3">
Das ist ein Teil Eures Rasters.
</div>
<div class="col-sm-6 col-lg-3">
Das ist ein Teil Eures Rasters.
</div>
</div>Wir brauchen für extra kleine Geräte keine Spaltenanzahl zu definieren, weil eine Spalte standardmäßig ist. Die Rastergröße muss für kleine Geräte bestimmt werden. Für mittlere Geräte sollte man diese Einstellungen nicht vornehmen. Das liegt an der Kaskadierung des Rasters. Wenn Ihr also die Größe für sm definiert, wird diese Rastergröße für sm, md und lg angewendet. Weiter behandeln wir verschiedene Rastergrößen und erklären an Beispielen, wie Ihr darauf Layouts aufbauen.
Rastergrößen
Das ist der beste Teil des neuen Rastersystems. Ihr könnt damit eine Website erstellen, die in 4 verschiedenen Browsern angezeigt wird. Unten seht Ihr Klassen-Präfix für das Bootstrap-
.col-xs-$ extra kleine Smartphones bis 768px |
.col-sm-$ kleine Geräte Tablets 768px und größer .col-md-$ mittelere Geräte Desktops 992px und größer
.col-lg-$ große Geräte große Desktops 1200px und größer |
Die offizielle Dokumentation zu Bootstrap gibt einen viel umfassenderen Einblick darüber, wie das Raster funktioniert. Macht Euch damit vertraut, um eine bessere Übersicht über Größen von Spalten, Lücken, maximalen Spaltengrößen, Seitenbreiten zu bekommen.
Standardmäßige Größen fürs Bootstrap-Raster
Manchmal müsst Ihr Media Queries einsetzen, damit Eure Website so funktioniert, wie Ihr es wollt. Es ist wichtig standardmäßige Größen zu kennen, um das Raster erweitern zu können.
Bootstrap 3 Media Queries und Breakpoints
Bootstrap 3 ist ein auf dem Mobile First-Prinzip basierendes Frontend-Framework. Wir haben die richtige Reihenfolge für Media Queries angegeben. Für den Fall, wenn einige Menschen die Mobil First-Methode nicht einsetzen, folgen nicht-mobile erste Breakpoints weiter. Beide Varianten werden technisch funktionieren. Min-width: Bezieht sich auf alles, was größer als angegebene Bildschirmbreite oder der gleich ist. Max-width: Bezieht sich auf alles, was kleiner als angegebene Bildschirmbreite oder der gleich ist.
/*==================================================
= Bootstrap 3 Media Queries =
==================================================*/
/*========== Mobile-First-Methode ==========*/
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px){
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px){
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px){
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px){
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px){
}
/*========== nicht-mobile Methode ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px){
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px){
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px){
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px){
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px){
}
|
Bootstrap 2.3.2 Media Queries Breakpoints
/*=====================================================
= Bootstrap 2.3.2 Media Queries =
=====================================================*/
@media only screen and (max-width : 1200px){
}
@media only screen and (max-width : 979px){
}
@media only screen and (max-width : 767px){
}
@media only screen and (max-width : 480px){
}
@media only screen and (max-width : 320px){
}
|
Responsive Dienstprogramme
Genau wie Bootstrap 2 bietet Bootstrap 3 responsive Dienstprogramme zum Ausblenden und Anzeigen von Elementen basierend auf der Browsergröße. Das soll uns auch helfen, das Rastersystem zu definieren.
.visible-xs .visible-sm .visible-md .visible-lg .hidden-xs .hidden-sm .hidden-md .hidden-lg |
Das funktioniert, denn wir können bestimmte Elemente je nach Größe anzeigen lassen. In unseren Beispielen zeigen wir eine zusätzliche Sidebar auf großen Desktops.
Beispiele
Hier sind einige Beispiele für Raster, die Ihr erstellen könnt. Wir werden auf Basis-Websites eingehen, die viele Leute gern haben, und zeigen, wie es einfach ist, diese mit dem Raster von Bootstrap 3 zu erstellen.
Einfach: Große Bildschirme vs. Mobilgeräte
Man nehme beispielsweise an, Ihr braucht eine Website mit einer Spalte auf extra kleinen (Smartphones) und kleinen (Tablets) Endgeräten, mit einem zweispaltigen Layout auf mittleren Endgeräten (mittleren Desktops) und mit vier Spalten auf großen Endgeräten (Desktops).
Hier ist der Code für diese Beispiele:
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="visible-lg text-success">Large Devices!</div>
<div class="visible-md text-warning">Medium Devices!</div>
<div class="visible-sm text-primary">Small Devices!</div>
<div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="visible-lg text-success">Large Devices!</div>
<div class="visible-md text-warning">Medium Devices!</div>
<div class="visible-sm text-primary">Small Devices!</div>
<div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="visible-lg text-success">Large Devices!</div>
<div class="visible-md text-warning">Medium Devices!</div>
<div class="visible-sm text-primary">Small Devices!</div>
<div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="visible-lg text-success">Large Devices!</div>
<div class="visible-md text-warning">Medium Devices!</div>
<div class="visible-sm text-primary">Small Devices!</div>
<div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
</div>
</div>
Mittel: Zusätzliche Spalte auf großen Desktops anzeigen lassen
Da ist ein interessantes Moment, das Möglichkeiten des neuen Rastersystems gut veranschaulicht. Beispielsweise braucht Ihr eine Website mit einer Sidebar und einem Hauptinhalt. Das sollte als eine Spalte auf extra kleinen Endgeräten angezeigt werden - der Hauptcontent und eine Sidebar darüber. Auf kleinen und mittleren Endgeräten sollten die Sidebar und der Hauptcontent nebeneinander untergebracht werden. Und auf großen Endgeräten möchten wir den freien Platz verwenden - eine zusätzliche Sidebar einfügen, um mehr Inhalte zu platzieren.
Wir erstellen das Hauptlayout mit 6 Spalten auf großen Geräten, um Platz für unsere zweite Sidebar zu schaffen. Dies ist eine großartige Möglichkeit, den Platz auf größeren Desktops zu nutzen. Und hier ist der Code für dieses Beispiel.
<div class="row">
<div class="col-sm-9 col-lg-6 text-danger">
I am the main content.
</div>
<div class="col-sm-3 text-warning">
I am the main sidebar.
</div>
<div class="col-lg-3 visible-lg text-success">
I am the secondary sidebar that only shows up on LARGE devices.
</div>
</div>
Fortgeschritten: Verschiedene Raster für jede Bildschirmgröße
Das ist ein etwas komplizierteres Beispiel. Angenommen, wir möchten, dass alle unserer Spalten stapeln. Für extra kleine Endgeräte lassen wir 2 Spalten festlegen, für kleine Geräte - 3 Spalten, für mittlere - 4 Spalten und für große - 6 Spalten (die werden nur auf großen Bildschirmen angezeigt)
I am the secondary sidebar that only shows up on LARGE devices.
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
I'm content!
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
I'm content!
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
I'm content!
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
I'm content!
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
I'm content!
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 visible-lg">
I'm content only visible on large devices!
</div>
</div>
Jetzt kommen wir zu Übungen. Lasst uns mit Beispielen und Code-Schnipseln auseinandersetzen. Wie Ihr sehen könnt, wenn die Größe des Browsers kleiner wird, lassen sich die Spalten formatieren. Der Inhalt in jeder Spalte beginnt ebenfalls zu stapeln.
Das ist eine Rastertaktik!
Wie Ihr seht, ist es einfach, komplexe und dynamische Sites mit dem Bootstrap 3-Raster zu erstellen - von mobilen 2-Spalten-Websites bis hin zum komplexen Ein- und Ausblenden von Elementen auf großen Desktops.
Hoffentlich, aufgrund dieser Beispiele bekommt Ihr Vorstellungen von der Flexibilität des neuen Rastersystems.
Glückliche Kodierung!
Wenn Ihr bereits eine HTML-basierte Website mit einem Admin-Panel habt, dann sollten für Euch Admin-Designs interessant sein, die mit Bootstrap erstellt wurden. Diese Bootstrap-Templates zeigen Euch die volle Power von Bootstrap 3!
Dieser Artikel wurde von Ahmed Faisal verfasst. Hier geht es zur Originalversion auf Englisch.
Olga Kulmann ist Mitglied des deutschen Marketer-Teams von TemplateMonster. Ihr Interessenkreis umfasst von Online-Marketing über E-Commerce bis hin zum Webdesign. Olgas Anliegen ist es, die Blogleser mit besten Erfahrungen und geprüftem Expertenwissen in diesen Bereichen vertraut zu machen. Olga auf Facebook.