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

Bootstrap docs wyjaśnij to, ale i tak Zajęło mi trochę czasu, aby go zdobyć. To ma większy sens, gdy wyjaśniam to sobie na jeden z dwóch sposobów:

Jeśli myślisz o kolumnach zaczynających się poziomo, możesz wybrać, kiedy chcesz, aby układały się w stos .

Na przykład, jeśli zaczniesz od kolumn: A B C

Ty decydujesz kiedy powinny być takie:

A

B

C

Jeśli wybierzesz col - lg, to kolumny będzie stosował się, gdy szerokość wynosi

Jeśli wybierzesz col-md, kolumny będą się układać w stos, gdy szerokość będzie

Jeśli wybierzesz col-sm, kolumny będą się układać w stos, gdy szerokość będzie

Jeśli wybierzesz col-xs, kolumny nigdy nie będą się układać.

Z drugiej strony, jeśli myślisz o kolumnach zaczynających się na stosie, możesz wybrać, w którym momencie staną się poziome :

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

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

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

From Twitter Bootstrap documentation :

• 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 jest systemem reagującym na urządzenia mobilne i nie wyjaśnia, jak to wpływa 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. (You don ' t)

Chciałbym to wyjaśnić, stwierdzając, że... Niższe typy ziarna (xs, sm) wygląd układu na mniejszych ekranach i większych typach (md,lg) wyświetla się poprawnie tylko na większych ekranach, ale zawija kolumny na mniejszych urządzeniach. Wartości podane w poprzednich przykładach odnoszą się do progu, w którym bootstrap degraduje wygląd, aby pasował do dostępnej przestrzeni ekranu.

W praktyce oznacza to, że jeśli ustawisz kolumny col-xs-n, zachowają one prawidłowy wygląd nawet na bardzo małych ekranach, aż okno spadnie do rozmiaru tak ograniczającego że strona nie może być wyświetlona poprawnie. Powinno to oznaczać, że urządzenia o szerokości 768px lub mniejszej powinny wyświetlać tabelę w taki sposób, w jaki została zaprojektowana, a nie w postaci zdegradowanej(pojedyncza lub zawinięta kolumna). Oczywiście to nadal zależy od treści kolumn i o to chodzi. Jeśli strona spróbuje wyświetlić wiele kolumn dużych danych, obok siebie na małym ekranie, kolumny naturalnie zawijają się w okropny sposób, jeśli nie uwzględniłeś tego. Dlatego, w zależności od danych w kolumnach można zdecydować, w którym punkcie układ jest wyświetlany, aby odpowiednio wyświetlić zawartość.

Np. jeśli strona zawiera trzy kolumny col-sm-N Bootstrap zawija kolumny w wiersze, gdy szerokość strony spadnie poniżej 992px. Oznacza to, że dane są nadal widoczne, ale wymagają przewijania w pionie, aby je wyświetlić. Jeśli nie chcesz, aby układ ulegał degradacji, wybierz xs (o ile Twoje dane mogą być odpowiednio wyświetlane w niższej rozdzielczości urządzenie w trzech kolumnach)

Jeśli pozioma pozycja danych jest ważna, należy spróbować wybrać niższe wartości ziarnistości, aby zachować wizualny charakter. Jeżeli 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, aż szerokość ekranu spadnie poniżej progu xs wynoszącego 1200px.

Rozmiar urządzenia i prefiks klasy:

• Extra small devices Phones (.col-xs-
• małe urządzenia Tablety (≥768px)- .col-sm-
• Urządzenia średnie Komputery Stacjonarne (≥992px)- .col-md-
• Duże Komputery Stacjonarne (≥1200px)- .col-lg-

Opcje siatki:

Reference: Grid System

.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 

TL; DR

.col-X-Y oznacza na ekranie Rozmiar X i więcej, rozciągnij ten element, aby wypełnić kolumny Y .

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

xs, sm, md, lg są rozmiary odpowiednio dla smartfona, tabletu, laptopa, komputera stacjonarnego.

Celem określania różnych szerokości na różnych rozmiarach ekranu jest umożliwienie zwiększenia rozmiarów na mniejszych ekranach.

Przykład

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

Znaczenie: 50% szerokość na komputerach stacjonarnych, 100% szerokość na telefonie komórkowym, tablecie i laptopie.

Jeden szczególny przypadek : przed rozpoczęciem nauki systemu Bootstrap grid upewnij się, że zoom przeglądarki jest ustawiony na 100% (sto procent). Na przykład: jeśli rozdzielczość ekranu wynosi (1600px x 900px), a powiększenie przeglądarki wynosi 175%, elementy "bootstrap-ped" zostaną ułożone w stosy.

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>

Chromowany zoom 100%

Przeglądarka 100% - elementy umieszczone poziomo

Chromowany zoom 175%

Przeglądarka 175% - stos elementy

Dobrze jest używany do określania bootstrap ile kolumn ma być umieszczone w wierszu w zależności od rozmiaru ekranu -

col-xs-2

Wyświetla tylko 2 kolumny w rzędzie na bardzo małym ekranie (XS), tak samo jak SM definiuje mały ekran, md (medium sized), lg (large sized), ale zgodnie z pierwszą zasadą Bootstrap, jeśli wspomnisz

xs-col-2 md-col-4

Wtedy 2 kolumny będą wyświetlane w każdym wierszu dla rozmiarów ekranu od xs do sm(w zestawie) i zmieniają się, gdy otrzyma następny rozmiar tj. dla md do lg (w zestawie) aby lepiej zrozumieć rozmiary ekranu, spróbuj uruchomić je w różnych trybach ekranu w trybie deweloperskim chrome (CTR+shift+i) i wypróbuj różne piksele lub urządzenia