twitter-bootstrap
System sieci

Wprowadzenie

Uwagi

Zapytania o media

Zapytania o media w Bootstrap pozwalają przenosić, wyświetlać i ukrywać zawartość w oparciu o rozmiar rzutni. W plikach LESS wykorzystywane są następujące zapytania o media w celu utworzenia kluczowych punktów przerwania w systemie siatki Bootstrap:

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Czasami są one rozszerzane o maksymalną szerokość, aby ograniczyć CSS do węższego zestawu urządzeń:

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Warstwy siatki Bootstrap (punkty przerwania)

Oprócz koncepcji jednostek kolumn , Bootstrap ma różne punkty przerwania lub rozmiary siatki zwane warstwami. Siatka Bootstrap 3 ma cztery (4) warstwy, aby pomieścić różne szerokości ekranu (lub rzutni). Warstwy Bootstrap 3 to xs , sm , md i lg . Kolumny siatki Bootstrap są identyfikowane przez różne klasy CSS col-{breakpoint}-{units} .

Każda warstwa siatki obejmuje zakres, który jest zaprojektowany tak, aby najlepiej pasował do typowych szerokości ekranów urządzeń, takich jak komputery stacjonarne, laptopy, tablety i smartfony.

Bootstrap używa zapytań o media CSS w celu utworzenia responsywnych punktów przerwania, które ustanawiają granicę dla każdego rozmiaru siatki. Te rozmiary siatki umożliwiają zmianę układu kolumn w celu najlepszego dopasowania do różnych szerokości ekranu i urządzeń__ istota responsywnego projektu.

• col-xs-* - dla najmniejszych szerokości ekranu, takich jak smartfony <768 px
• col-sm-* - dla małych szerokości ekranu, takich jak smartfony i tablety> = 768 px
• col-md-* - dla średnich szerokości ekranu, takich jak tablety i laptopy> = 992 px
• col-lg-* - dla dużych szerokości ekranu, takich jak komputery stacjonarne> = 1200 px

Odniesienie: system siatki

Ta sama szerokość kolumny dla każdego urządzenia

Aby utworzyć kolumnę, która ma zawsze 50% szerokości rzutni (na wszystkich urządzeniach), możesz ustawić col-*-6 dla każdej warstwy.

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

Jest to jednak niepotrzebny dodatkowy znacznik, ponieważ col-xs-6 oznacza 6 jednostek na xs i więcej. Najmniejszy ustawiony poziom (xs, sm lub md) również określa rozmiar dla większych szerokości ekranu. W przypadku kolumny o tym samym rozmiarze na wszystkich poziomach po prostu ustaw szerokość najmniejszej rzutni.

Krótszy kod:

<div class="col-xs-6">..</div>

Różne szerokości kolumn dla każdego urządzenia (responsive design)

Klasy col-*-* można łączyć, aby kontrolować szerokości kolumn na różnych rozmiarach siatki.

Na przykład utwórz kolumnę o szerokości 50% na warstwie sm i kolumnę o szerokości 25% na warstwie md ...

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

Siatki sm , md i lg będą „układać się” pionowo przy szerokości rzutni mniejszej niż 768 pikseli. W tym miejscu mieści się siatka xs . Kolumny korzystające z klas col-xs- * nie będą układać się w pionie i nadal będą się zmniejszać na najmniejszych ekranach.

Wiersze i kolumny Bootstrap

System siatki Bootstrap ma 12 jednostek zwanych Kolumnami , których można użyć do poziomego rozmieszczenia zawartości w rzutni.

Powodem dla siatki 12 jednostek (zamiast 10, 16 itd.) Jest to, że 12 równomiernie dzieli się na 6 (połówki), 4 (ćwiartki) i 3 (trzecie). To znacznie ułatwia dostosowanie do różnych układów. Kolumny siatki Bootstrap są identyfikowane przez różne klasy CSS col-{breakpoint}-{units} . Dowiedz się więcej o szerokości rzutni i punktach przerwania (warstwy AKA)

Na przykład col-md-3 reprezentuje kolumnę, która zajmuje 3 z 12 jednostek (lub 25%) w widoku o średniej ( md ) szerokości. Aby użyć szerokości kolumny w układzie, wystarczy użyć odpowiedniej klasy col-{breakpoint}-{units} w znacznikach HTML.

<div class="col-{breakpoint}-{units}">

Szerokość kolumny jest płynna (nie stała szerokość), więc kolumny zużywają procent swojego pojemnika.

Jednostki kolumn w Bootstrap 3

• col-*-1 : 1 z 12 (8.33333333% szerokości)
• col-*-2 : 2 z 12 (16,666666667% szerokości)
• col-*-3 : 3 z 12 (25% szerokości)
• col-*-4 : 4 z 12 (33,33333333% szerokości)
• col-*-5 : 5 z 12 (41,666666667% szerokości)
• col-*-6 : 6 z 12 (50% szerokości)
• col-*-7 : 7 z 12 (58.33333333% szerokości)
• col-*-8 : 8 z 12 (szerokość 66.66666667%)
• col-*-9 : 9 z 12 (75% szerokości)
• col-*-10 : 10 z 12 (83,333333333% szerokości)
• col-*-11 : 11 z 12 (91,666666667% szerokości)
• col-*-12 : 12 z 12 (100% szerokości)

Demo - 12 jednostek kolumn Bootstrap

Rząd Bootstrap

Klasa .row Bootstrap służy do przechowywania kolumn. Kolumny należy zawsze umieszczać w wierszach, a wiersze należy zawsze umieszczać w pojemniku ( container lub container-fluid ). Wiersz używa ujemnych marginesów (-15px), aby zapewnić odpowiednie odstępy między zawartością kolumny a krawędzią przeglądarki. Rzędy służą do grupowania kolumn w poziomie.

<div class="container">
    <div class="row">
        <!-- one more columns -->
        <div class="col-{breakpoint}-{units}">..</div>
    </div>
</div>

Kolumny będą wypełniać .row poziomo od lewej do prawej i będą zawijać się do nowej linii co 12 jednostek kolumn. Dlatego możesz używać .row s do tworzenia .row poziomych lub możesz dodać więcej niż 12 jednostek kolumn w jednym elemencie .row , aby kolumny .row się (lub stosy) pionowo w dół ekranu.

Gdy używasz zawijania kolumn (więcej niż 12 jednostek w .row ), musisz użyć responsywnych resetów (lub .row ), aby zapewnić równomierne zawijanie nierównej zawartości kolumny. Jest to niezbędne, gdy zawartość kolumn różni się wysokością.

Więcej informacji na temat kolumn i rzędów siatki Bootstrap

Problemy z układem płynnej siatki Bootstrap 3?

Bootstrap 3 - zagnieżdżony wiersz. Czy mogę dodać kolumny do więcej niż 12?

Wyjaśnienie wiersza i kolumny programu ładującego

Jak działa siatka rozruchowa (średnia)

Pojemniki

Bootstrap wymaga elementu zawierającego, aby owinąć zawartość witryny i pomieścić nasz system grid. Możesz wybrać jeden z dwóch kontenerów do wykorzystania w swoich projektach.

Użyj klasy .container jako responsywnego kontenera o stałej szerokości.

<div class="container">
  ...
</div>

Użyj klasy .container-fluid dla kontenera o pełnej szerokości, obejmującego całą szerokość okna.

<div class="container-fluid">
  ...
</div>

Uwaga: pojemników nie można zagnieździć (nie można umieścić pojemnika w innym pojemniku) z powodu padding i innych elementów.

Przesunięcie kolumn

Klasy te zwiększają lewy margines kolumny o * kolumny. Na przykład .col-md-offset-4 przenosi .col-md-4 na cztery kolumny.

<div class="row">
  <div class="col-lg-4"></div>
  <div class="col-lg-4 col-lg-offset-4"></div>
</div>
<div class="row">
  <div class="col-lg-5 col-lg-offset-1"></div>
  <div class="col-lg-5 col-lg-offset-1"></div>
</div>

Manipulowanie kolejnością kolumn za pomocą push i pull

<div class="container content">
    <div class="row">
        <!--Main Content-->
        <div class="col-lg-9 col-lg-push-3">
            Main Content
        </div>
        
        <!--Sidebar-->
        <div class="col-lg-3 col-lg-pull-9">
            Sidebar
        </div>
    </div>
</div>

To zmienia kolejność wbudowanych kolumn siatki.

Składnia: .col-md-push- * i .col-md-pull- *.

Więcej:
Manipulowanie kolejnością kolumn za pomocą col-lg-push i col-lg-pull w Twitter Bootstrap 3
Bootstrap 3: Wciśnij / pociągnij kolumny tylko na mniejszych ekranach
Kolejność i układanie kolumn w Bootstrap 3