Znaczenie liczb w „col-md-4”, „col-xs-1”, „col-lg-2” w Bootstrap

Jestem mylony z systemem grid w nowym Bootstrap, szczególnie tymi klasami:

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

(gdzie * oznacza pewną liczbę).

Czy ktoś może wyjaśnić następujące kwestie:

1. Jak ta liczba wyrównuje siatki?
2. Jak korzystać z tych liczb?
3. Co oni właściwie reprezentują?

Dotyczy tylko Bootstrap 3.

Ignorując litery (x s , sm , md , lg ) do teraz , zacznę tylko numerami ...

• liczby (1-12) reprezentują część całkowitej szerokości dowolnego elementu div
• wszystkie div są podzielone na 12 kolumn
• więc col-*-6obejmuje 6 z 12 kolumn (połowa szerokości), col-*-12obejmuje 12 z 12 kolumn (cała szerokość) itp

Jeśli więc chcesz, aby dwie równe kolumny obejmowały div, napisz

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

Lub, jeśli chcesz, aby trzy nierówne kolumny obejmowały tę samą szerokość, możesz napisać:

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

Zauważysz, że liczba kolumn zawsze sumuje się do 12. Może być mniejsza niż dwanaście, ale uważaj, jeśli jest większa niż 12, ponieważ twoje obrażające div będą spadać do następnego rzędu (nie .row, co jest zupełnie inną historią).

Możesz także zagnieżdżać kolumny w kolumnach (najlepiej z .rowotoczką), takie jak:

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

Każdy zestaw zagnieżdżonych elementów div obejmuje także do 12 kolumn ich elementu div. UWAGA: Ponieważ każda .colklasa ma wypełnienie po 15 pikseli po każdej stronie, zwykle należy zawinąć kolumny zagnieżdżone w .rowmarginesie -15px. Pozwala to uniknąć powielania dopełniania i utrzymuje zawartość w linii między zagnieżdżonymi i nie zagnieżdżonymi klasami col.

- Nie pytałeś konkretnie o xs, sm, md, lgużycie, ale idą w parze, więc nie mogę się powstrzymać ...

Krótko mówiąc, służą do określenia, przy jakim rozmiarze ekranu ta klasa powinna się stosować:

• xs = dodatkowe małe ekrany (telefony komórkowe)
• sm = małe ekrany (tablety)
• md = średnie ekrany (niektóre komputery stacjonarne)
• lg = duże ekrany (pozostałe komputery stacjonarne)

Przeczytać „ Opcje siatki ” rozdział z oficjalnej dokumentacji Bootstrap więcej szczegółów.

Zazwyczaj powinieneś klasyfikować div używając wielu klas kolumn, aby zachowywał się różnie w zależności od rozmiaru ekranu (to jest sedno tego, co sprawia, że ​​bootstrap reaguje). np .: div z klasami col-xs-6i col-sm-4będzie obejmował połowę ekranu telefonu komórkowego (xs) i 1/3 ekranu na tabletach (sm).

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

UWAGA: jak w poniższym komentarzu, klasy siatki dla danego rozmiaru ekranu mają zastosowanie do tego rozmiaru ekranu i większych, chyba że zastąpi go inna deklaracja (tj. col-xs-6 col-md-4Obejmuje 6 kolumn na xs ism , i 4 kolumny na md ilg , mimo że smi lgnigdy nie zostały wyraźnie zadeklarowane)

UWAGA: jeśli nie definiują xs, będzie domyślnie col-xs-12(czyli col-sm-6jest o połowę szerokości sm, mdi lgekrany, ale o pełnej szerokości na xsekranach).

UWAGA: w rzeczywistości jest całkowicie w porządku, jeśli .rowzawierasz więcej niż 12 kols, o ile wiesz, jak zareagują. - To jest kwestia sporna i nie wszyscy się z tym zgadzają.

System siatki Bootstrap ma cztery klasy:
xs (dla telefonów)
sm (dla tabletów)
md (dla komputerów stacjonarnych)
lg (dla większych komputerów stacjonarnych)

Powyższe klasy można łączyć, aby tworzyć bardziej dynamiczne i elastyczne układy.

Wskazówka: Każda klasa skaluje się w górę, więc jeśli chcesz ustawić takie same szerokości dla xs i sm, wystarczy podać xs.

OK, odpowiedź jest łatwa, ale czytaj dalej:

col-lg- oznacza dużą kolumnę ≥ 1200px
col-md- oznacza średnią kolumnę ≥ 992px
col-xs- oznacza kolumnę bardzo małą≥ 768px

Liczby pikseli są punktami przerwania, więc na przykład col-xsceluje w element, gdy okno jest mniejsze niż 768 pikseli (prawdopodobnie urządzenia mobilne) ...

Ja również tworzone na obrazek poniżej, aby pokazać, w jaki sposób działa system sieci, w tym przykłady ich używać z 3, jak col-lg-6pokazać, jak działa system siatki na stronie, spojrzenie na sposób lg, mdi xssą dostosowane do rozmiaru okna:

Najważniejsze jest to:

col-lg-* col-md-* col-xs-* col-sm określ, ile kolumn będzie w tych różnych rozmiarach ekranu.

Przykład: jeśli chcesz, aby na ekranach komputerów i na telefonach były dwie kolumny, umieść dwie col-md-6i dwie col-xs-6klasy w swoich kolumnach.

Jeśli chcesz, aby na ekranach komputerów były dwie kolumny i tylko jedna kolumna na ekranach telefonu (tj. Dwa rzędy ułożone jedna na drugiej), umieścisz two col-md-6i dwie col-xs-12w swoich kolumnach, a ponieważ suma będzie wynosić 24, będą one automatycznie układać się na górze każdego inne lub po prostu pomiń xsstyl.

Z dokumentacji Bootstrap na Twitterze :

• mała siatka (≥ 768px) = .col-sm-*,
• średnia siatka (≥ 992px) = .col-md-*,
• duża siatka (≥ 1200px) = .col-lg-*.

czytaj więcej ...

Proszę bardzo

col-lg-2: jeśli ekran jest duży ( lg ), wówczas ten komponent zajmie miejsce 2 elementów, biorąc pod uwagę, że cały wiersz może zmieścić 12 elementów (więc zobaczysz, że na dużym ekranie ten komponent zajmuje 16% miejsca w rzędzie)

col-lg-6: jeśli ekran jest duży ( lg ), wówczas ten komponent zajmie miejsce 6 elementów, biorąc pod uwagę, że cały rząd może zmieścić 12 elementów - po zastosowaniu zobaczysz, że komponent zajął połowę dostępnego miejsca w rzędzie.

Powyższa zasada jest stosowana tylko wtedy, gdy ekran jest duży. gdy ekran jest mały, reguła jest odrzucana i pokazywany jest tylko jeden komponent na wiersz.

Poniższy obraz pokazuje różne szerokości ekranu: