Siatki Bootstrap
System siatki Bootstrap
System siatki Bootstrap pozwala na umieszczenie do 12 kolumn na stronie.
Jeśli nie chcesz używać wszystkich 12 kolumn pojedynczo, możesz je zgrupować, aby utworzyć szersze kolumny:
| rozpiętość 1 | rozpiętość 1 | rozpiętość 1 | rozpiętość 1 | rozpiętość 1 | rozpiętość 1 | rozpiętość 1 | rozpiętość 1 | rozpiętość 1 | rozpiętość 1 | rozpiętość 1 | rozpiętość 1 |
| rozpiętość 4 | rozpiętość 4 | rozpiętość 4 | |||||||||
| rozpiętość 4 | rozpiętość 8 | ||||||||||
| rozpiętość 6 | rozpiętość 6 | ||||||||||
| rozpiętość 12 | |||||||||||
System siatki Bootstrap jest responsywny, a kolumny zmienią się automatycznie w zależności od rozmiaru ekranu.
Klasy siatki
System siatki Bootstrap ma cztery klasy:
xs(dla telefonów - ekrany o szerokości poniżej 768px)sm(dla tabletów - ekrany o szerokości lub większej niż 768px)md(dla małych laptopów - ekrany o szerokości lub większej niż 992px)lg(dla laptopów i komputerów stacjonarnych - ekrany o szerokości lub większej niż 1200px)
Powyższe klasy można łączyć, aby tworzyć bardziej dynamiczne i elastyczne układy.
Podstawowa struktura siatki Bootstrap
Poniżej znajduje się podstawowa struktura siatki Bootstrap:
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
Pierwszy; utwórz wiersz ( <div
class="row">). Następnie dodaj żądaną liczbę kolumn (znaczniki z odpowiednimi
.col-*-*klasami). Pamiętaj, że liczby w .col-*-*powinny zawsze sumować się do 12 w każdym wierszu.
Poniżej zebraliśmy kilka przykładów podstawowych układów siatki Bootstrap.
Trzy równe kolumny
Poniższy przykład pokazuje, jak uzyskać trzy kolumny o równej szerokości, zaczynając od tabletów i skalując do dużych komputerów stacjonarnych. Na telefonach komórkowych lub ekranach o szerokości mniejszej niż 768 pikseli kolumny zostaną automatycznie ustawione w stos:
Przykład
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Dwie nierówne kolumny
Poniższy przykład pokazuje, jak uzyskać dwie kolumny o różnej szerokości, zaczynając od tabletów i skalując do dużych komputerów stacjonarnych:
Przykład
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Wskazówka: w dalszej części tego samouczka dowiesz się więcej o siatkach Bootstrap.