Jaka jest różnica między col-lg- *, col-md- * i col-sm- * w Bootstrap?

Jaka jest różnica między col-lg-*, col-md-*a col-sm-*w Twitter Bootstrap?

Zaktualizowano 2019 ...

Bootstrap 3 siatka jest w 4 warstwach (lub „pułapki”) ...

• Bardzo mały (dla smartfonów .col-xs-*)
• Mały (na tablety .col-sm-*)
• Średni (dla laptopów .col-md-*)
• Duże (dla laptopów / komputerów stacjonarnych .col-lg-*).

Te rozmiary siatki pozwalają kontrolować zachowanie siatki na różnych szerokościach. Różne warstwy są kontrolowane przez zapytania mediów CSS .

Tak więc w 12-kolumnowej siatce Bootstrap ...

col-sm-3ma szerokość 3 z 12 kolumn (25%) na typowej małej szerokości urządzenia (> 768 pikseli)

col-md-3ma szerokość 3 z 12 kolumn (25%) na typowej średniej szerokości urządzenia (> 992 pikseli)

Mniejszy poziom ( xs, smi md) określa ponadto rozmiar dla większych szerokości ekranu . Tak więc dla kolumny o tym samym rozmiarze na wszystkich poziomach po prostu ustaw szerokość najmniejszej rzutni ...

<div class="col-lg-3 col-md-3 col-sm-3">..</div> jest taki sam jak,

<div class="col-sm-3">..</div>

Implikowane są większe poziomy . Ponieważ col-sm-3oznacza 3 units on sm-and-up, chyba że zostanie to przesłonięte przez większą warstwę, która używa innego rozmiaru.

xs(domyślnie)> przesłonięty przez sm> przesłonięty przez md> przesłonięty przezlg

Połącz klasy, aby użyć zmiany szerokości kolumn na różnych rozmiarach siatki . To tworzy responsywny układ.

<div class="col-md-3 col-sm-6">..</div>

Te sm, mda lgkratki wszystkich „komin” pionowo na ekranie / okien z mniej niż 768. W tym miejscu xsmieści się siatka. Kolumny korzystające z col-xs-*klas nie będą układać się w pionie i nadal będą się zmniejszać na najmniejszych ekranach.

Zmień rozmiar przeglądarki za pomocą tego pokazu, a zobaczysz efekty skalowania siatki.

Bootstrap 4

W Bootstrap 4 jest nowy -xl-rozmiar, zobacz to demo . Również -xs-infix została usunięta , więc najmniejsze kolumny są po prostu col-1, col-2.. col-12itd ..

col-*- 0 (xs)
col-sm-*- 576px
col-md-*- 768px
col-lg-*- 992px
col-xl-*- 1200px

Bootstrap 4 Grid Demo

Ponadto Bootstrap 4 zawiera nowe kolumny z automatycznym układem . Mają one również czułe punkty przerwania ( col, col-sm, col-md, itd ..), ale nie mają zdefiniowanych% szerokości. Dlatego kolumny automatycznego układu wypełniają równą szerokość w wierszu.

W tym artykule wyjaśniono więcej na temat siatki Bootstrap

Bootstrap docs zrobić to wyjaśnić, ale nadal mi zajęło je zdobyć. Ma to większy sens, gdy wyjaśniam to sobie na jeden z dwóch sposobów:

Jeśli myślisz o kolumnach rozpoczynających się w poziomie, możesz wybrać, kiedy chcesz je ułożyć w stos .

Na przykład, jeśli zaczynasz od kolumn: ABC

Ty decydujesz, kiedy powinny się układać tak:

ZA

b

do

Jeśli wybierzesz col-lg, kolumny będą się układać, gdy szerokość będzie <1200px.

Jeśli wybierzesz col-md, kolumny będą się układać, gdy szerokość będzie <992px.

Jeśli wybierzesz col-sm, kolumny będą się układać, gdy szerokość będzie <768px.

Jeśli wybierzesz col-xs, kolumny nigdy się nie ustawią.

Z drugiej strony, jeśli myślisz o kolumnach, które zaczynają się układać w stos, możesz wybrać, w którym momencie staną się poziome :

Jeśli wybierzesz col-sm, kolumny staną się poziome, gdy szerokość będzie> = 768px.

Jeśli wybierzesz col-md, kolumny staną się poziome, gdy szerokość będzie> = 992px.

Jeśli wybierzesz col-lg, kolumny staną się poziome, gdy szerokość będzie> = 1200px.

Z dokumentacji Bootstrap na Twitterze :

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

Myślę, że mylącym aspektem tego jest fakt, że BootStrap 3 to mobilny system responsywny i nie wyjaśnia, jak wpływa to na hierarchię col-xx-n w tej części dokumentacji Bootstrap. To sprawia, że ​​zastanawiasz się, co dzieje się na mniejszych urządzeniach, jeśli wybierzesz wartość dla większych urządzeń, i zastanawiasz się, czy istnieje potrzeba określenia wielu wartości. (Ty nie)

Chciałbym to wyjaśnić, stwierdzając, że ... Próbki o niższym ziarnie (xs, sm) zachowują wygląd układu na mniejszych ekranach, a większe typy (md, lg) będą poprawnie wyświetlane tylko na większych ekranach, ale będą zawijać kolumny na mniejszych urządzeniach. Wartości podane w poprzednich przykładach odnoszą się do progu, w którym bootstrap obniża wygląd, aby pasował do dostępnej nieruchomości ekranu.

W praktyce oznacza to, że jeśli utworzysz kolumny col-xs-n, wówczas zachowają one poprawny wygląd nawet na bardzo małych ekranach, dopóki okno nie spadnie do rozmiaru, który jest tak restrykcyjny, że strona nie może zostać poprawnie wyświetlona. Powinno to oznaczać, że urządzenia o szerokości 768 pikseli lub mniejszej powinny pokazywać tabelę tak, jak ją zaprojektowałeś, a nie w formie zdegradowanej (pojedyncza lub owinięta kolumna). Oczywiście nadal zależy to od zawartości kolumn i o to właśnie chodzi. Jeśli strona spróbuje wyświetlić wiele kolumn dużych danych obok siebie na małym ekranie, kolumny naturalnie zawiną się w straszny sposób, jeśli nie uwzględnisz tego. Dlatego w zależności od danych w kolumnach możesz zdecydować, w którym miejscu poświęcony jest układ, aby odpowiednio wyświetlić zawartość.

np. jeśli strona zawiera trzy kolumny col-sm-n, program ładujący zawinie kolumny w wiersze, gdy szerokość strony spadnie poniżej 992px. Oznacza to, że dane są nadal widoczne, ale aby je wyświetlić, konieczne będzie przewijanie w pionie. Jeśli nie chcesz, aby twój układ ulegał degradacji, wybierz xs (o ile twoje dane mogą być odpowiednio wyświetlane na urządzeniu o niższej rozdzielczości w trzech kolumnach)

Jeśli pozioma pozycja danych jest ważna, powinieneś spróbować wybrać niższe wartości granulacji, aby zachować charakter wizualny. Jeśli pozycja jest mniej ważna, ale strona musi być widoczna na wszystkich urządzeniach, należy użyć wyższej wartości.

Jeśli wybierzesz col-lg-n, kolumny będą wyświetlane poprawnie, dopóki szerokość ekranu nie spadnie poniżej progu xs 1200px.

Rozmiary urządzenia i prefiks klasy:

• Bardzo małe urządzenia Telefony (<768px) - .col-xs-
• Małe urządzenia Tablety (≥768px) - .col-sm-
• Średnie urządzenia Komputery stacjonarne (≥992px) - .col-md-
• Duże urządzenia Komputery stacjonarne (≥1200px) - .col-lg-

Opcje siatki:

Odniesienie: system siatki

TL; DR

.col-X-YŚrodki w rozmiarze ekranu X i do góry , rozciągają się ten element, w celu wypełnienia kolumny Y .

Bootstrap zapewnia siatkę 12 kolumn na .row, więc Y = 3 oznacza szerokość = 25%.

xs, sm, md, lg to odpowiednio rozmiary smartfona, tabletu, laptopa i komputera stacjonarnego.

Określenie różnych szerokości dla różnych rozmiarów ekranu polega na tym, aby powiększyć na mniejszych ekranach.

Przykład

<div class="col-lg-6 col-xs-12">

Znaczenie: 50% szerokości na komputerach stacjonarnych, 100% szerokości na urządzeniach mobilnych, tabletach i laptopach.

.col-xs-$   Extra Small     Phones Less than 768px 
.col-sm-$   Small Devices   Tablets 768px and Up 
.col-md-$   Medium Devices  Desktops 992px and Up 
.col-lg-$   Large Devices   Large Desktops 1200px and Up 

Jeden szczególny przypadek: przed nauczeniem się systemu siatki ładowania początkowego upewnij się, że powiększenie przeglądarki jest ustawione na 100% (sto procent). Na przykład: jeśli rozdzielczość ekranu wynosi (1600px x 900px), a powiększenie przeglądarki wynosi 175%, wówczas elementy „bootstrap-ped” zostaną ułożone w stos.

HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4">class="col-lg-4"</div>
        <div class="col-lg-4">class="col-lg-4"</div>
    </div>
</div>

Chrome zoom 100%

Przeglądarka 100 procent - elementy umieszczone poziomo

Powiększenie Chrome 175%

Przeglądarka 175 procent - ułożone elementy

Nie komplikujmy Bootstrap!

Zauważ, jak col-sm zajmuje 100% szerokości (innymi słowy, przechodzi do nowej linii) poniżej, 576pxale col nie. Możesz zauważyć aktualną szerokość w górnej środkowej części w gif.

Oto kod:

<div class="container">
    <div class="row">
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
    </div>
    <div class="row">
        <div class="col-sm">col-sm</div>
        <div class="col-sm">col-sm</div>
        <div class="col-sm">col-sm</div>
    </div>
</div>

Bootstrap domyślnie wyrównuje wszystkie kolumny (col) w jednym rzędzie o równej szerokości. W takim przypadku trzy colzajmą szerokość 100% / 3, niezależnie od wielkości ekranu. Możesz to zauważyć w gif.

Co teraz, jeśli chcemy wyrenderować tylko jedną kolumnę na linię, tj. Podać 100% szerokości każdej kolumnie, ale tylko dla mniejszych ekranów ? Teraz nadchodzą col-xxzajęcia!

Użyłem, col-smponieważ chciałem podzielić kolumny na osobne linie poniżej 576 pikseli. Te 4 col-xxklasy są dostarczane przez Bootstrap dla różnych urządzeń wyświetlających, takich jak telefony komórkowe, tablety, laptopy, duże monitory itp.

Więc col-smzłamałby się poniżej 576px, col-mdzłamałby poniżej 768px, col-lgzłamałby poniżej 992px i col-xlspadłby poniżej 1200px

Zauważ, że col-xsw bootstrap 4 nie ma klasy.

To prawie podsumowanie. Możesz wrócić do pracy.

Ale to coś więcej. Teraz przychodzi col-*i col-xx-*dostosowywania szerokości.

Pamiętaj, że w powyższym przykładzie wspomniałem o tym collub col-xxbierze równą szerokość z rzędu. Jeśli więc chcemy nadać konkretną szerokość, colmożemy to zrobić.

Rząd Bootstrap jest podzielony na 12 części, więc w powyższym przykładzie było ich 3, colwięc każda z nich zajmuje 12/3 = 4 części. Możesz rozważyć te części jako sposób pomiaru szerokości.

Możemy również napisać to w formacie col-*tj. W col-4ten sposób:

<div class="row">
  <div class="col-4">col</div>
  <div class="col-4">col</div>
  <div class="col-4">col</div>
</div>

I nie zrobiłoby to różnicy, ponieważ domyślnie bootstrap daje równą szerokość col(4 + 4 + 4 = 12).

Ale co jeśli chcemy dać 7 części 1 col, 3 części 2, cola resztę 2 części (12-7-3 = 2) 3 col(7 + 3 + 2, więc w sumie 12), możemy to po prostu zrobić:

<div class="row">
  <div class="col-7">col-7</div>
  <div class="col-3">col-3</div>
  <div class="col-2">col-2</div>
</div>

i możesz również dostosować szerokość col-xx-*klas.

<div class="row">
    <div class="col-sm-7">col-sm-7</div>
    <div class="col-sm-3">col-sm-3</div>
    <div class="col-sm-2">col-sm-2</div>
</div>

Jak to wygląda w akcji?

Co jeśli suma coljest większa niż 12? Następnie colprzesunie się / dostosuje do dolnej linii. Tak, w wierszu może znajdować się dowolna liczba kolumn!

<div class="row">
        <div class="col-12">col-12</div>
        <div class="col-9">col-9</div>
        <div class="col-6">col-6</div>
        <div class="col-6">col-6</div>
    </div>

Co jeśli chcemy 3 kolumny z rzędu dla dużych ekranów, ale podzielić te kolumny na 2 rzędy dla małych ekranów?

<div class="row">
    <div class="col-12 col-sm">col-12 col-sm TOP</div>
    <div class="col col-sm">col col-sm</div>
    <div class="col col-sm">col col-sm</div>
</div>

Możesz się tutaj pobawić: https://jsfiddle.net/JerryGoyal/6vqno0Lm/

Myślę, że ten obraz jest całkiem dobry, aby lepiej zrozumieć tę koncepcję!

dla bardziej szczegółowego zrozumienia proszę przejść poniżej link:

https://getbootstrap.com/docs/3.4/css/

służy do informowania bootstrap, ile kolumn ma być umieszczonych w rzędzie w zależności od rozmiaru ekranu -

col-xs-2

wyświetlałby tylko 2 kolumny z rzędu na bardzo małym ekranie (xs), w taki sam sposób, jak sm definiuje mały ekran, md (średni rozmiar), lg (duży rozmiar), ale zgodnie z bootstrap mniejszą pierwszą regułą, jeśli wspomniasz

xs-col-2 md-col-4

wtedy w każdym wierszu będą wyświetlane 2 kolumny dla rozmiarów ekranu od xs do sm (w zestawie) i zmieni się, gdy otrzyma następny rozmiar, tj. dla md do lg (w zestawie) dla lepszego zrozumienia rozmiarów ekranu, spróbuj uruchomić je w różnych trybach ekranu w tryb dewelopera chrome (ctr + shift + i) i wypróbuj różne piksele lub urządzenia