Bedeutung der Zahlen in "col-md-4", "col-xs-1", "col-lg-2" in Bootstrap

Ich bin verwirrt mit dem Grid-System im neuen Bootstrap, insbesondere diesen Klassen:

col-lg-*
col-md-*
col-xs-*

(wobei * eine Zahl darstellt).

Kann jemand bitte folgendes erklären:

1. Wie richtet diese Zahl die Gitter aus?
2. Wie benutzt man diese Nummern?
3. Was repräsentieren sie eigentlich?

Gilt nur für Bootstrap 3.

Das Ignorieren der Buchstaben (x s , sm , md , lg ) für jetzt , werde ich nur mit den Zahlen beginnen ...

• Die Zahlen (1-12) repräsentieren einen Teil der Gesamtbreite eines Div
• Alle Divs sind in 12 Spalten unterteilt
• so, col-*-6Spannweiten 6 von 12 Spalten ( die Hälfte der Breite), col-*-12Spannweiten 12 der 12 Spalten (die gesamte Breite), usw.

Wenn Sie also möchten, dass zwei gleiche Spalten ein Div umfassen, schreiben Sie

<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>

Wenn Sie möchten, dass drei ungleiche Spalten dieselbe Breite haben, können Sie Folgendes schreiben:

<div class="col-xs-2">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-4">Column 3</div>

Sie werden feststellen, dass sich die Anzahl der Spalten immer zu 12 summiert. Sie kann weniger als zwölf betragen. Achten Sie jedoch darauf, wenn mehr als 12 vorhanden sind, da Ihre beleidigenden Divs in die nächste Zeile gelangen (nicht .row, was insgesamt eine andere Geschichte ist).

Sie können Spalten auch in Spalten verschachteln (am besten mit einem .rowWrapper):

<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-4">Column 1-a</div>
    <div class="col-xs-8">Column 1-b</div>
  </div>
</div>
<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-2">Column 2-a</div>
    <div class="col-xs-10">Column 2-b</div>
  </div>
</div>

Jeder Satz verschachtelter Divs umfasst auch bis zu 12 Spalten des übergeordneten Divs. HINWEIS: Da jede .colKlasse auf beiden Seiten einen 15-Pixel- Abstand hat, sollten Sie verschachtelte Spalten normalerweise in einen .rowmit -15-Pixel-Rand einschließen. Dies vermeidet das Duplizieren des Auffüllens und hält den Inhalt zwischen verschachtelten und nicht verschachtelten Spaltenklassen aufgereiht.

- Sie haben nicht speziell nach der xs, sm, md, lgVerwendung gefragt , aber sie gehen Hand in Hand, sodass ich nicht anders kann, als sie zu berühren ...

Kurz gesagt, sie werden verwendet, um zu definieren, bei welcher Bildschirmgröße diese Klasse angewendet werden soll:

• xs = extra kleine Bildschirme (Handys)
• sm = kleine Bildschirme (Tabletten)
• md = mittlere Bildschirme (einige Desktops)
• lg = große Bildschirme (verbleibende Desktops)

Weitere Informationen finden Sie im Kapitel " Rasteroptionen " in der offiziellen Bootstrap-Dokumentation.

Normalerweise sollten Sie ein div anhand mehrerer Spaltenklassen klassifizieren, damit es sich je nach Bildschirmgröße unterschiedlich verhält (dies ist das Herzstück dessen, was Bootstrap reaktionsfähig macht). zB: ein div mit Klassen col-xs-6und col-sm-4wird auf dem Mobiltelefon (xs) und 1/3 des Bildschirms auf Tabletten (sm) die Hälfte des Bildschirms erstrecken.

<div class="col-xs-6 col-sm-4">Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) -->
<div class="col-xs-6 col-sm-8">Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet -->

HINWEIS: Gemäß dem folgenden Kommentar gelten Rasterklassen für eine bestimmte Bildschirmgröße für diese Bildschirmgröße und größer, es sei denn, eine andere Deklaration überschreibt sie (dh col-xs-6 col-md-4umfasst 6 Spalten auf xs undsm und 4 Spalten auf md undlg , obwohl smund lgwurde nie explizit deklariert).

HINWEIS: wenn Sie nicht definieren xs, wird es auf die Standard col-xs-12(dh col-sm-6die Hälfte der Breite auf sm, mdund lgBildschirmen, aber voller Breite auf xsBildschirmen).

HINWEIS: Es ist eigentlich völlig in Ordnung, wenn Sie .rowmehr als 12 Spalten enthalten, solange Sie wissen, wie diese reagieren werden. - Dies ist ein umstrittenes Thema, und nicht jeder stimmt zu.

Das Bootstrap-Grid-System verfügt über vier Klassen:
xs (für Telefone)
sm (für Tablets)
md (für Desktops)
lg (für größere Desktops)

Die oben genannten Klassen können kombiniert werden, um dynamischere und flexiblere Layouts zu erstellen.

Tipp: Jede Klasse wird vergrößert. Wenn Sie also die gleichen Breiten für xs und sm festlegen möchten, müssen Sie nur xs angeben.

OK, die Antwort ist einfach, aber lesen Sie weiter:

col-lg- steht für Spalte groß ≥ 1200px
col-md- steht für Spaltenmedium≥ 992px
col-xs- steht für Spalte extra klein≥ 768px

Die Pixelzahlen sind beispielsweise die Haltepunkte col-xs zielen auf das Element ab, wenn das Fenster kleiner als 768 Pixel ist (wahrscheinlich mobile Geräte) ...

Ich habe auch das folgende Bild erstellt, um zu zeigen, wie das Rastersystem funktioniert. In diesen Beispielen verwende ich sie mit 3, col-lg-6um Ihnen zu zeigen, wie das Rastersystem auf der Seite funktioniert lg, wie mdund xsauf die Fenstergröße reagiert:

Der Hauptpunkt ist folgender:

col-lg-* col-md-* col-xs-* col-sm Definieren Sie, wie viele Spalten in diesen verschiedenen Bildschirmgrößen vorhanden sein sollen.

Beispiel: Wenn auf Desktop-Bildschirmen und auf Telefonbildschirmen zwei Spalten vorhanden sein sollen, fügen Sie zwei col-md-6und zwei col-xs-6Klassen in Ihre Spalten ein.

Wenn Sie möchten, dass zwei Spalten in Desktop-Bildschirmen und nur eine Spalte in Telefonbildschirmen (dh zwei übereinander gestapelte Zeilen) two col-md-6und zwei col-xs-12in Ihre Spalten eingefügt werden und die Summe 24 beträgt, werden sie automatisch übereinander gestapelt andere, oder einfach xsStil weglassen.

Aus der Twitter Bootstrap-Dokumentation :

• kleines Gitter (≥ 768px) = .col-sm-*,
• mittleres Gitter (≥ 992px) = .col-md-* ,
• großes Gitter (≥ 1200px) = .col-lg-*.

um mehr zu lesen ...

Bitte schön

col-lg-2: Wenn der Bildschirm groß ist ( lg ), nimmt diese Komponente Platz von 2 ein Elemente ein, da die gesamte Zeile 12 Elemente aufnehmen kann (Sie werden also sehen, dass diese Komponente auf einem großen Bildschirm 16% Platz für eine Zeile einnimmt).

col-lg-6: Wenn der Bildschirm groß ist ( lg ), nimmt diese Komponente Platz von 6 ein Elemente ein, da die gesamte Zeile 12 Elemente aufnehmen kann. Wenn sie angewendet wird, sehen Sie, dass die Komponente die Hälfte des verfügbaren Platzes in der Zeile belegt hat.

Die obige Regel wird nur angewendet, wenn der Bildschirm groß ist. Wenn der Bildschirm klein ist, wird diese Regel verworfen und nur eine Komponente pro Zeile wird angezeigt.

Das folgende Bild zeigt verschiedene Bildschirmgrößenbreiten: