Siatka jonowa (siatka)
Siatka jonowa (siatka) i większość innych ram są różne, używa elastyczny model blokowy (Flexible Box modelu). I w terminalu mobilnym, zasadniczo komórkowe są obsługiwane. wiersz wiersz określony styl, styl kol podana kolumna.
Ta sama wielkość siatki
W wierszu z elementami stylu w stylu jeśli obejmować kol kol zostanie ustawiona na tej samej wielkości.
Poniższe przykłady wiersz zawiera 5 kol styl styl każdej szerokości col 20%.
<div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> </div>
Określa szerokość kolumny
Można ustawić przykładowe rozmiary dla każdej kolumny w wierszu. Domyślnie kolumna zostanie podzielona na równej wielkości. Jednak można także stosować jako procent szerokości kolumny (zachowanie 12 mesh).
<div class="row"> <div class="col col-50">.col.col-50</div> <div class="col">.col</div> <div class="col">.col</div> </div> <div class="row"> <div class="col col-75">.col.col-75</div> <div class="col">.col</div> </div> <div class="row"> <div class="col">.col</div> <div class="col col-75">.col.col-75</div> </div> <div class="row"> <div class="col">.col</div> <div class="col">.col</div> </div>
Uwaga: Przykłady każdego stylu zostanie automatycznie dodany do col granicę i szare tło.
Poniżej wymienione są niektóre z określonej kolumny nazwy szerokość procentowy styl:
| .col-10 | 10% |
| .col-20 | 20% |
| .col-25 | 25% |
| .col-33 | 33,3333% |
| .col-50 | 50% |
| .col-67 | 66,6666% |
| .col-75 | 75% |
| .col-80 | 80% |
| .col-90 | 90% |
Istnieje przesunięcie siatki
Można ustawić w lewej kolumnie przesunięcia przykłady przedstawiają się następująco:
<div class="row"> <div class="col col-33 col-offset-33">.col</div> <div class="col">.col</div> </div> <div class="row"> <div class="col col-33">.col</div> <div class="col col-33 col-offset-33">.col</div> </div> <div class="row"> <div class="col col-33 col-offset-67">.col</div> </div>
Oto kilka procent offsetu stylu nazwie:
| .col-offset-10 | 10% |
| .col-offset-20 | 20% |
| .col-offset-25 | 25% |
| .col-offset-33 | 33,3333% |
| .col-offset-50 | 50% |
| .col-offset-67 | 66,6666% |
| .col-offset-75 | 75% |
| .col-offset-80 | 80% |
| .col-offset-90 | 90% |
Portret Przyciągaj do siatki
Elastyczny model skrzynki można łatwo ustawić kolumnę wzdłużnie wyrównane. Zawierający wzdłużnie górną, środkową część dna, może być stosowany do każdego wiersza lub kolumny, kolumny podane.
Przykład, ostatni skonfigurować zawartość demo dla lepszego wzdłużnej sieci wyrównania.
<div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">1<br>2<br>3<br>4</div> </div> <div class="row"> <div class="col col-top">.col</div> <div class="col col-center">.col</div> <div class="col col-bottom">.col</div> <div class="col">1<br>2<br>3<br>4</div> </div> <div class="row row-top"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">1<br>2<br>3<br>4</div> </div> <div class="row row-center"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">1<br>2<br>3<br>4</div> </div> <div class="row row-bottom"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">1<br>2<br>3<br>4</div> </div>
responsive Siatka
Ekran ręczny po włączeniu, na przykład, poziomy ekran, pionowy ekran i tak dalej. Trzeba ustawić siatkę dla każdego rzędu mogą być zrealizowane w zależności od szerokości adaptacyjnego wielkości.
Różne urządzenia reagujące stylu klasy w następujący sposób:
| responsive klasy | opis |
| .responsive-sm | Mniejszy niż w telefonie komórkowym krzyż ekranie |
| .responsive-MD | Mniej niż płaskiej pionowej ekranu |
| .responsive-lg | Mniej niż płaskiej poziomej ekranu |
<div class="row responsive-sm"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> </div>