System siatki
Skorzystaj z naszej potężnej siatki Flexbox stworzonej z myślą o urządzeniach mobilnych, aby tworzyć układy o różnych kształtach i rozmiarach dzięki systemowi dwunastu kolumn, sześciu domyślnym, responsywnym warstwom, zmiennym i domieszkom Sass oraz dziesiątkom predefiniowanych klas.
Przykład
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 szczegółowe wyjaśnienie, w jaki sposób łączy się system sieci.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Powyższy przykład tworzy trzy kolumny o równej szerokości na wszystkich urządzeniach i rzutniach przy użyciu naszych predefiniowanych klas siatek. Te kolumny są wyśrodkowane na stronie z elementem nadrzędnym .container
.
Jak to działa
Rozbijając to, oto jak łączy się system siatki:
-
Nasza siatka obsługuje sześć responsywnych punktów przerwania . Punkty przerwania są oparte na
min-width
zapytaniach o media, co oznacza, że wpływają na ten punkt przerwania i wszystkie znajdujące się powyżej niego (np..col-sm-4
dotyczysm
,md
,lg
,xl
ixxl
). Oznacza to, że możesz kontrolować rozmiar i zachowanie kontenera i kolumny według każdego punktu przerwania. -
Kontenery wyśrodkują i poziomo wypełniają zawartość. Użyj
.container
w przypadku responsywnej szerokości piksela,.container-fluid
wewidth: 100%
wszystkich widocznych obszarach i urządzeniach lub responsywnego kontenera (np..container-md
) w przypadku kombinacji szerokości płynnej i w pikselach. -
Wiersze to opakowania dla kolumn. Każda kolumna ma poziomą
padding
(zwaną rynną) do kontrolowania przestrzeni między nimi. Jestpadding
to następnie przeciwdziałane w wierszach z ujemnymi marginesami, aby zapewnić, że zawartość kolumn jest wizualnie wyrównana do lewej strony. Wiersze obsługują również klasy modyfikatorów, aby jednolicie stosować rozmiary kolumn i klasy gutter w celu zmiany odstępów zawartości. -
Kolumny są niesamowicie elastyczne. W każdym wierszu dostępnych jest 12 kolumn szablonów, co pozwala tworzyć różne kombinacje elementów, które obejmują dowolną liczbę kolumn. Klasy kolumn wskazują liczbę kolumn szablonu do rozpięcia (np.
col-4
rozpięte cztery).width
s są ustawione w procentach, więc zawsze masz ten sam rozmiar względny. -
Rynny są również responsywne i konfigurowalne. Klasy Gutter są dostępne we wszystkich punktach przerwania, z tymi samymi rozmiarami, co nasz margines i odstępy dopełnienia . Zmień poziome rynny za pomocą
.gx-*
klas, pionowe rynny za pomocą.gy-*
lub wszystkie rynny za pomocą.g-*
klas..g-0
jest również dostępny do usuwania rynien. -
Zmienne Sass, mapy i mixiny zasilają sieć. Jeśli nie chcesz używać predefiniowanych klas siatki w Bootstrap, możesz użyć Sass źródła naszej siatki, aby stworzyć własną z bardziej semantycznymi znacznikami. Dołączamy również niektóre niestandardowe właściwości CSS, aby wykorzystać te zmienne Sass, aby uzyskać jeszcze większą elastyczność.
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
System siatki Bootstrap może dostosować się do wszystkich sześciu domyślnych punktów przerwania i dowolnych punktów przerwania, które dostosowujesz. Sześć domyślnych poziomów siatki to:
- Bardzo mały (xs)
- Mały (sm)
- Średni (md)
- Duży (lg)
- Bardzo duży (xl)
- Bardzo duży (xxl)
Jak wspomniano powyżej, każdy z tych punktów przerwania ma swój własny kontener, unikalny prefiks klasy i modyfikatory. Oto jak zmienia się siatka w tych punktach przerwania:
xs <576 pikseli |
sm ≥576px |
md ≥768px |
dł. ≥992px |
xl ≥1200px |
xxl ≥1400 pikseli |
|
---|---|---|---|---|---|---|
Pojemnikmax-width |
Brak (automatycznie) | 540px | 720px | 960px | 1140px | 1320px |
Prefiks klasy | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# kolumn | 12 | |||||
Szerokość rynny | 1,5 rem (0,75 rem po lewej i prawej stronie) | |||||
Rynny niestandardowe | TAk | |||||
Gniazdowy | TAk | |||||
Kolejność kolumn | TAk |
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 xs
do xxl
. 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>
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}-auto
klas, 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>
Klasy responsywne
Siatka Bootstrap zawiera sześć 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 .col
i . .col-*
Określ numerowaną klasę, gdy potrzebujesz kolumny o szczególnie dużym rozmiarze; w przeciwnym razie możesz trzymać się .col
.
<div class="container">
<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>
</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="container">
<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>
</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.
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.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>
</div>
Kolumny wierszy
Użyj .row-cols-*
klas responsywnych, aby szybko ustawić liczbę kolumn, które najlepiej renderują treść i układ. Podczas gdy normalne .col-*
klasy mają zastosowanie do pojedynczych kolumn (np. .col-md-4
), klasy kolumn wierszy są .row
domyślnie ustawione na rodzicu dla zawartych kolumn. Dzięki .row-cols-auto
niej możesz nadać kolumnom ich naturalną szerokość.
Użyj tych klas kolumn wierszy, aby szybko tworzyć podstawowe układy siatki lub kontrolować układy kart i zastępować je w razie potrzeby na poziomie kolumny.
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-auto">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-2 row-cols-lg-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
</div>
</div>
Możesz również użyć dołączonego mixinu Sass, row-cols()
:
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
Zagnieżdżanie
Aby zagnieździć zawartość z domyślną siatką, dodaj nową .row
i 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="container">
<div class="row">
<div class="col-sm-3">
Level 1: .col-sm-3
</div>
<div class="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>
</div>
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: 1.5rem;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
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();
// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@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 {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.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-columns
służy do generowania szerokości (w procentach) poszczególnych słupów, podczas gdy $grid-gutter-width
ustawia szerokość rynien słupów.
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !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-breakpoints
i $container-max-widths
do 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
, em
lub %
).