Bootstrap sieciowi
Bootstrap's układ kratowy umożliwia do 12 kolumn w poprzek strony.
Jeśli nie chcesz, aby wykorzystać wszystkie kolumny 12 indywidualnie, można pogrupować kolumny tworząc 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 | |||||||||||
Bootstrap's system sieci jest czułe i kolumny ponownie zorganizować automatycznie w zależności od rozmiaru ekranu.
Klasy siatki
Bootstrap system sieci ma cztery klasy:
- xs (dla telefonów)
- sm (dla tabletek)
- md (dla komputerów stacjonarnych)
- lg (dla większych komputerów stacjonarnych)
Klasy powyżej mogą być łączone w celu stworzenia bardziej dynamiczne i elastyczne układy.
Podstawowa struktura Bootstrap siatki
Poniżej znajduje się podstawowa struktura Bootstrap sieci:
<div
class="row">
<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; utworzyć wiersz ( <div class="row"> ). Następnie należy dodać odpowiednią liczbę kolumn (tagi z odpowiednim .col-*-* zajęcia). Należy pamiętać, że numery w .col-*-* Należy zawsze sumują się do 12 dla każdego wiersza.
Poniżej zebraliśmy kilka przykładów podstawowych Bootstrap układów sieciowych.
Trzy równe Kolumny
Poniższy przykład pokazuje, jak zdobyć trzy kolumny o równej szerokości zaczynają się tabletek i skalowanie do dużych komputerów stacjonarnych. W telefonach komórkowych, kolumny automatycznie stosu:
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> Spróbuj sam " Dwie nierówne Kolumny
Poniższy przykład pokazuje, jak uzyskać dwie różne szerokości kolumn począwszy od tabletek i skalowanie do dużych 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> Spróbuj sam " Wskazówka: Dowiesz się więcej o Bootstrap siatek w dalszej części tego podręcznika.