System siatki

Wykorzystaj naszą potężną siatkę flexbox zoptymalizowaną pod kątem urządzeń mobilnych, aby tworzyć układy o różnych kształtach i rozmiarach dzięki systemowi dwunastu kolumn, pięciu domyślnym, responsywnym warstwom, zmiennym i domieszkom Sass oraz dziesiątkom predefiniowanych klas.

Jak to działa

System siatki Bootstrap wykorzystuje szereg kontenerów, wierszy i kolumn do układania i wyrównywania zawartości. Jest zbudowany z flexbox i jest w pełni responsywny. Poniżej znajduje się przykład i dogłębne spojrzenie na to, jak łączy się siatka.

Nowy lub nie znasz flexboxa? Przeczytaj ten przewodnik po sztuczkach CSS flexbox, aby poznać tło, terminologię, wytyczne i fragmenty kodu.

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Powyższy przykład tworzy trzy kolumny o równej szerokości na małych, średnich, dużych i bardzo dużych urządzeniach przy użyciu naszych predefiniowanych klas siatek. Te kolumny są wyśrodkowane na stronie z elementem nadrzędnym .container.

Rozbijając to, oto jak to działa:

• Kontenery umożliwiają wyśrodkowanie i wyrównanie zawartości witryny w poziomie. Użyj .container, aby uzyskać responsywną szerokość w pikselach lub .container-fluidwe width: 100%wszystkich widocznych obszarach i rozmiarach urządzeń.
• Wiersze to opakowania dla kolumn. Każda kolumna ma poziomą padding(zwaną rynną) do kontrolowania przestrzeni między nimi. Jest paddingto następnie przeciwdziałane w rzędach z ujemnymi marginesami. W ten sposób cała zawartość Twoich kolumn jest wizualnie wyrównana do lewej strony.
• W układzie siatki zawartość musi być umieszczona w kolumnach, a tylko kolumny mogą być bezpośrednimi elementami podrzędnymi wierszy.
• Dzięki flexbox, kolumny siatki bez określonego widthzostaną automatycznie ustawione jako kolumny o równej szerokości. Na przykład cztery wystąpienia .col-smbędą automatycznie miały szerokość 25% od małego punktu przerwania w górę. Zobacz sekcję kolumn z automatycznym układem , aby uzyskać więcej przykładów.
• Klasy kolumn wskazują liczbę kolumn, których chcesz użyć z możliwych 12 na wiersz. Jeśli więc potrzebujesz trzech kolumn o równej szerokości, możesz użyć .col-4.
• Kolumny widthsą ustawiane w procentach, więc zawsze są płynne i mają rozmiar w stosunku do elementu nadrzędnego.
• Kolumny są poziome, paddingaby utworzyć rynny między poszczególnymi kolumnami, jednak możesz usunąć marginz wierszy i paddingkolumn za .no-gutterspomocą przycisku .row.
• Aby siatka była responsywna, istnieje pięć punktów przerwania siatki, po jednym dla każdego reagującego punktu przerwania : wszystkie punkty przerwania (bardzo małe), małe, średnie, duże i bardzo duże.
• Punkty przerwania siatki są oparte na zapytaniach o media o minimalnej szerokości, co oznacza, że ​​mają zastosowanie do tego jednego punktu przerwania i wszystkich powyżej niego (np. .col-sm-4dotyczą małych, średnich, dużych i bardzo dużych urządzeń, ale nie pierwszego xspunktu przerwania).
• Możesz użyć predefiniowanych klas siatek (takich jak .col-4) lub domieszek Sass, aby uzyskać bardziej semantyczne znaczniki.

Bądź świadomy ograniczeń i błędów związanych z flexboxem , takich jak niemożność użycia niektórych elementów HTML jako elastycznych kontenerów .

Opcje siatki

Podczas gdy Bootstrap używa ems lub rems do definiowania większości rozmiarów, pxs są używane do punktów przerwania siatki i szerokości kontenerów. Dzieje się tak, ponieważ szerokość widocznego obszaru jest wyrażona w pikselach i nie zmienia się wraz z rozmiarem czcionki .

Zobacz, jak różne aspekty systemu Bootstrap działają na wielu urządzeniach za pomocą poręcznej tabeli.

Kolumny z automatycznym układem

Korzystaj z klas kolumn specyficznych dla punktów przerwania, aby łatwo zmieniać rozmiar kolumn bez jawnej klasy numerowanej, takiej jak .col-sm-6.

Równej szerokości

Na przykład oto dwa układy siatki, które mają zastosowanie do każdego urządzenia i rzutni, od xsdo xl. Dodaj dowolną liczbę klas bez jednostek dla każdego potrzebnego punktu przerwania, a każda kolumna będzie miała tę samą szerokość.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Kolumny o równej szerokości można podzielić na wiele wierszy, ale był błąd Safari flexbox , który uniemożliwiał działanie bez wyraźnego flex-basislub border. Istnieją obejścia dla starszych wersji przeglądarek, ale nie powinny być one konieczne, jeśli jesteś na bieżąco.

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Ustawianie szerokości jednej kolumny

Automatyczne rozmieszczenie kolumn siatki Flexbox oznacza również, że możesz ustawić szerokość jednej kolumny i automatycznie zmienić rozmiar kolumn wokół niej. Możesz użyć predefiniowanych klas siatek (jak pokazano poniżej), mixinów siatek lub szerokości w linii. Zwróć uwagę, że inne kolumny zmienią rozmiar bez względu na szerokość kolumny środkowej.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Zawartość o zmiennej szerokości

Użyj col-{breakpoint}-autoklas, aby określić rozmiar kolumn na podstawie naturalnej szerokości ich zawartości.

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Wielorzędowe o równej szerokości

Utwórz kolumny o równej szerokości, które obejmują wiele wierszy, wstawiając znak w miejscu, w .w-100którym kolumny mają się dzielić do nowego wiersza. Spraw, aby przerwy były responsywne, łącząc je .w-100z niektórymi narzędziami do wyświetlania .

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Klasy responsywne

Siatka Bootstrap zawiera pięć poziomów predefiniowanych klas do budowania złożonych, responsywnych układów. Dostosuj rozmiar swoich kolumn na bardzo małych, małych, średnich, dużych lub bardzo dużych urządzeniach według własnego uznania.

Wszystkie punkty przerwania

W przypadku siatek, które są takie same od najmniejszego urządzenia do największego, użyj klas .coli . .col-*Określ numerowaną klasę, gdy potrzebujesz kolumny o szczególnie dużym rozmiarze; w przeciwnym razie możesz trzymać się .col.

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

Ułożone w poziomie

Używając pojedynczego zestawu .col-sm-*klas, możesz utworzyć podstawowy system siatki, który zaczyna się ułożony w stos i staje się poziomy w małym punkcie przerwania ( sm).

<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</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>

Mieszać i łączyć

Nie chcesz, aby Twoje kolumny po prostu układały się w niektóre poziomy siatki? W razie potrzeby użyj kombinacji różnych klas dla każdego poziomu. Zobacz poniższy przykład, aby lepiej zrozumieć, jak to wszystko działa.

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

Wyrównanie

Użyj narzędzi do wyrównywania flexbox, aby wyrównać kolumny w pionie i poziomie.

Wyrównanie w pionie

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Wyrównanie w poziomie

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Brak rynien

Rynny między kolumnami w naszych predefiniowanych klasach siatki można usunąć za pomocą .no-gutters. Spowoduje to usunięcie ujemnych margins .rowi poziomych paddingze wszystkich najbliższych kolumn podrzędnych.

Oto kod źródłowy do tworzenia tych stylów. Zwróć uwagę, że nadpisania kolumn dotyczą tylko pierwszych kolumn podrzędnych i są kierowane za pomocą selektora atrybutów . Chociaż generuje to bardziej szczegółowy selektor, dopełnienie kolumn można nadal dostosowywać za pomocą narzędzi do ustawiania odstępów .

Potrzebujesz projektu od krawędzi do krawędzi? Usuń rodzica .containerlub .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

W praktyce tak to wygląda. Pamiętaj, że możesz nadal używać tego ze wszystkimi innymi predefiniowanymi klasami siatki (w tym z szerokościami kolumn, warstwami responsywnymi, zmianami kolejności i nie tylko).

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Zawijanie kolumn

Jeśli w jednym rzędzie znajduje się więcej niż 12 kolumn, każda grupa dodatkowych kolumn, jako jedna jednostka, zawinie się w nowy wiersz.

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

Łamanie kolumn

Łamanie kolumn do nowej linii w flexboksie wymaga małego hacka: dodaj element z width: 100%dowolnym miejscem, w którym chcesz zawinąć kolumny do nowej linii. Zwykle odbywa się to za pomocą wielu .rows, ale nie każda metoda implementacji może to wyjaśnić.

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

  <!-- Force next columns to break to new line -->
  <div class="w-100"></div>

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

Możesz również zastosować to przerwanie w określonych punktach przerwania za pomocą naszych narzędzi do responsywnego wyświetlania .

<div class="row">
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block"></div>

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

Zmiana kolejności

Zamów zajęcia

Użyj .order-klas do kontrolowania wizualnej kolejności treści. Te klasy są responsywne, więc możesz ustawić je orderwedług punktu przerwania (np .order-1.order-md-2. ). Obejmuje wsparcie dla 1wszystkich 12pięciu poziomów siatki.

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

Istnieją również responsywne .order-firsti .order-lastklasy, które zmieniają orderelement poprzez zastosowanie odpowiednio order: -1i order: 13( order: $columns + 1). Klasy te można również mieszać z .order-*klasami ponumerowanymi w razie potrzeby.

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

Przesunięcie kolumn

Możesz przesunąć kolumny siatki na dwa sposoby: nasze responsywne .offset-klasy siatki i nasze narzędzia do tworzenia marginesów . Klasy siatki są dopasowane do kolumn, podczas gdy marginesy są bardziej przydatne w przypadku szybkich układów, w których szerokość przesunięcia jest zmienna.

Klasy offsetowe

Przenieś kolumny w prawo za pomocą .offset-md-*klas. Te klasy zwiększają lewy margines kolumny o *kolumny. Na przykład .offset-md-4porusza się .col-md-4po czterech kolumnach.

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

Oprócz czyszczenia kolumn w responsywnych punktach przerwania może być konieczne zresetowanie odsunięć. Zobacz to w akcji w przykładzie siatki .

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

Narzędzia depozytowe

Po przejściu na flexbox w wersji 4 możesz używać narzędzi do marżowania, takich jak .mr-autoodsuwanie od siebie kolumn rodzeństwa.

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>

Zagnieżdżanie

Aby zagnieździć zawartość z domyślną siatką, dodaj nową .rowi zestaw .col-sm-*kolumn w istniejącej .col-sm-*kolumnie. Wiersze zagnieżdżone powinny zawierać zestaw kolumn, które sumują się do 12 lub mniej (nie jest wymagane użycie wszystkich 12 dostępnych kolumn).

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">
        Level 2: .col-8 .col-sm-6
      </div>
      <div class="col-4 col-sm-6">
        Level 2: .col-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Mieszanki Sass

Korzystając ze źródłowych plików Sass Bootstrap, masz możliwość używania zmiennych Sass i domieszek do tworzenia niestandardowych, semantycznych i responsywnych układów stron. Nasze predefiniowane klasy grid wykorzystują te same zmienne i domieszki, aby zapewnić cały zestaw gotowych do użycia klas dla szybkich, responsywnych układów.

Zmienne

Zmienne i mapy określają liczbę kolumn, szerokość rynny i punkt zapytania o media, od którego mają się zaczynać kolumny swobodne. Używamy ich do generowania wcześniej zdefiniowanych klas siatek opisanych powyżej, a także do niestandardowych domieszek wymienionych poniżej.

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

Mieszanki

Domieszki są używane w połączeniu ze zmiennymi siatki do generowania semantycznego CSS dla poszczególnych kolumn siatki.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Przykładowe użycie

Możesz modyfikować zmienne do własnych wartości niestandardowych lub po prostu użyć domieszek z ich wartościami domyślnymi. Oto przykład użycia ustawień domyślnych do utworzenia układu dwukolumnowego z przerwą między nimi.

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

Dostosowywanie siatki

Korzystając z naszych wbudowanych zmiennych i map siatki Sass, można całkowicie dostosować predefiniowane klasy siatki. Zmień liczbę poziomów, wymiary zapytań o media i szerokości kontenerów, a następnie dokonaj ponownej kompilacji.

Kolumny i rynny

Liczbę kolumn siatki można modyfikować za pomocą zmiennych Sass. $grid-columnssłuży do generowania szerokości (w procentach) poszczególnych słupów, podczas gdy $grid-gutter-widthustawia szerokość rynien słupów.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Poziomy siatki

Wychodząc poza same kolumny, możesz również dostosować liczbę poziomów siatki. Jeśli chcesz mieć tylko cztery poziomy siatki, zaktualizuj $grid-breakpointsi $container-max-widthsdo czegoś takiego:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Wprowadzając jakiekolwiek zmiany w zmiennych Sass lub mapach, musisz je zapisać i ponownie skompilować. Spowoduje to wygenerowanie zupełnie nowego zestawu wstępnie zdefiniowanych klas siatki dla szerokości kolumn, przesunięć i kolejności. Responsywne narzędzia widoczności również zostaną zaktualizowane, aby korzystać z niestandardowych punktów przerwania. Pamiętaj, aby ustawić wartości siatki w px(nie rem, emlub %).