Bootstrap Grid Beispiel: Medium Devices
Im vorigen Kapitel präsentierten wir ein Raster Beispiel mit Klassen für kleine Geräte. Wir haben zwei divs (Spalten) und wir gaben ihnen eine 25%/75% Aufteilung:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>Aber auf Medium - Geräten kann das Design besser als 50%/50% gespalten.
Tipp: Medium Geräte sind definiert als eine Bildschirmbreite von 992 Pixel bis 1199 Pixel.
Für mittlere Geräte werden wir die Verwendung .col-md-* Klassen.
Jetzt werden wir die Spaltenbreiten für mittlere Geräte hinzufügen:
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>
Jetzt Bootstrap ist zu sagen , gehen "in der kleinen Größe, schauen Sie sich Klassen mit -sm- in ihnen und nutzen diese. Bei der mittleren Größe, schauen Sie sich Klassen mit -md- in ihnen und nutzen diese".
Im folgenden Beispiel wird in einer Folge von 25%/75% Aufteilung auf kleine Geräte und eine 50%/50% Split auf Medium (und große) Geräte. Auf extra kleine Geräte, wird es automatisch (100%) stapeln:
Beispiel
<div class="container-fluid">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-sm-3
col-md-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> Versuch es selber " Hinweis: Achten Sie darauf , dass die Summe immer bis zu 12 hinzufügt.
Mit nur Medium
Im Beispiel unten, geben wir nur die .col-md-6 - Klasse (ohne .col-sm-* ). Das bedeutet , dass mittlere und große Geräte aufgeteilt werden 50%/50% - weil die Klasse skaliert. Doch für kleine Geräte, wird es stapeln sich vertikal (100% Breite):
Beispiel
<div
class="row">
<div class="col-md-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-md-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
Versuch es selber " Das nächste Kapitel zeigt, wie eine andere Aufteilung Prozent für große Geräte hinzuzufügen.