it-swarm.com.de

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

Ich bin mit dem Rastersystem im neuen Bootstrap verwechselt, insbesondere mit den folgenden Klassen:

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

(wobei * eine Zahl darstellt).

Kann mir jemand bitte folgendes erklären:

  1. Wie richtet diese Zahl die Gitter aus?
  2. Wie werden diese Zahlen verwendet?
  3. Was stellen sie tatsächlich dar?
409
Bravo

Gilt nur für Bootstrap 3.

Ignorieren der Buchstaben (x s , sm , md , lg ) für den Moment , Ich fange mit an nur die zahlen ...

  • die Zahlen (1-12) repräsentieren einen Teil der Gesamtbreite eines Div
  • alle Divs sind in 12 Spalten unterteilt
  • also erstreckt sich col-*-6 über 6 von 12 Spalten (halbe Breite), col-*-12 über 12 von 12 Spalten (gesamte Breite) usw

Also, wenn Sie möchten, dass zwei gleiche Spalten einen Div überspannt, schreiben Sie

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

Oder wenn Sie möchten, dass drei ungleiche Spalten dieselbe Breite umfassen, können Sie 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 addiert. Es kann weniger als 12 sein, aber Vorsicht, wenn mehr als 12 vorhanden sind, da Ihre anstößigen Divs in die nächste Zeile springen (nicht .row, was eine andere ist Geschichte insgesamt).

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

<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>

Jede Gruppe verschachtelter Divs umfasst auch bis zu 12 Spalten der übergeordneten Div. HINWEIS: Da jede .col -Klasse auf beiden Seiten 15 Pixel Abstand aufweist, sollten Sie verschachtelte Spalten normalerweise in .row mit -15 Pixel Rändern umbrechen. Dies vermeidet das Duplizieren des Auffüllens und hält den Inhalt zwischen verschachtelten und nicht verschachtelten col-Klassen ausgerichtet.

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

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

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

Lesen Sie das Kapitel "Grid Options" in der offiziellen Bootstrap Dokumentation für weitere Details.

Sie sollten normalerweise ein div mit mehreren Spaltenklassen klassifizieren, damit es sich je nach Bildschirmgröße anders verhält (dies ist das Herzstück dessen, was bootstrap reaktionsfähig macht). Beispiel: Ein Div mit den Klassen col-xs-6 und col-sm-4 wird die Hälfte des Bildschirms auf dem Mobiltelefon (xs) und 1/3 des Bildschirms auf Tablets (sm) umfassen.

<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 -->

ANMERKUNG: Wie im Kommentar unten angegeben, gelten für diese Bildschirmgröße Rasterklassen. nd größer es sei denn, eine andere Deklaration überschreibt sie (dh col-xs-6 col-md-4 erstreckt sich über 6 Spalten bei xs und sm und 4 Spalten bei md und lg, obwohl sm und lg niemals explizit deklariert wurden)

HINWEIS: Wenn Sie xs nicht definieren, wird standardmäßig col-xs-12 verwendet (dh col-sm-6 entspricht der halben Breite von sm, md und lg, jedoch in voller Breite auf xs Bildschirmen).

HINWEIS: Es ist eigentlich völlig in Ordnung, wenn Ihr .row mehr als 12 Spalten enthält, solange Sie wissen, wie sie reagieren werden. - Dies ist ein strittiges Thema, und nicht jeder stimmt zu.

783
Shawn Taylor

Das Gittersystem Bootstrap hat vier Klassen:
xs (für Telefone)
sm (für Tabletten)
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 skaliert. Wenn Sie also für xs und sm die gleichen Breiten festlegen möchten, müssen Sie nur xs angeben.

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

col-lg - steht für column large ≥ 1200px
col-md - steht für das Spaltenmedium ≥ 992px
col-xs - steht für Spalte extra klein ≥ 768px

Die Pixelnummern sind die Haltepunkte, also zielt col-xs beispielsweise auf das Element ab, wenn das Fenster kleiner als 768px ist (wahrscheinlich für Mobilgeräte). ..

Ich habe auch das Bild unten erstellt, um zu zeigen, wie das Rastersystem funktioniert. In diesen Beispielen verwende ich sie mit 3, wie col-lg-6, um zu zeigen, wie das Rastersystem auf der Seite funktioniert. Schauen Sie sich an, wie lg. md und xs reagieren auf die Fenstergröße:

Bootstrap grid system, col-*-6

39
Alireza

Der Hauptpunkt ist dies:

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

Beispiel: Wenn in Desktop-Bildschirmen und in Telefonbildschirmen zwei Spalten angezeigt werden sollen, fügen Sie zwei Klassen col-md-6 und zwei Klassen col-xs-6 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) vorhanden sind, geben Sie two col-md-6 und zwei col-xs-12 in Ihre Spalten ein, und weil die Summe dies bewirkt 24 werden sie automatisch übereinander gestapelt oder lassen den xs -Stil einfach weg.

10
Tone Škoda

Von Twitter Bootstrap Dokumentation :

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

zum Weiterlesen ...

10
Aditya P Bhatt

Los geht's

col-lg-2: Wenn der Bildschirm groß ist ( lg ), nimmt diese Komponente Platz von 2 Elemente, die die gesamte Zeile berücksichtigen, können 12 Elemente aufnehmen (Sie werden also sehen, dass diese Komponente auf einem großen Bildschirm 16% des Platzes einer Zeile einnimmt)

col-lg-6: Wenn der Bildschirm groß ist ( lg ), nimmt diese Komponente Platz von 6 Elemente, die die gesamte Zeile berücksichtigen, können 12 Elemente aufnehmen. Wenn sie angewendet werden, 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 angezeigt.

Das folgende Bild zeigt verschiedene Bildschirmgrößen:

screen size definitions

4
Dhananjay