ионная Сетка (Grid)
ионной сетки (Grid) и большинство других структур различны, он использует модель упругой коробки (Flexible Box Model). И в мобильном терминале, в основном телефоны поддерживаются. строка стиль, заданный строка, столбец стиль, заданный столбец.
Сетка же размера
В строке с элементами стиля в стиле, если вы включаете седловины, Col будет установлен в том же размере.
Следующие примеры стиля строка содержит 5 стиль Col, каждая из которых ширина 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>
Определяет ширину столбца
Вы можете установить размер выборки для каждого столбца в строке. По умолчанию столбец будет разделен на одинаковый размер. Но вы также может быть установлен в процентах от ширины колонки (поведение 12 меш).
<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>
Примечание: Примеры каждого стиля будут автоматически добавлены к Col границу и серый фон.
Ниже перечислены некоторые из указанного столбца имени ширина процент стиля:
| .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% |
Там смещения сетки
Вы можете установить левый столбец смещения примеры являются следующие:
<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>
Вот некоторый процент смещения стиль имя:
| .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% |
Портрет Привязка к сетке
Гибкая модель коробки можно легко установить колонку выровнены продольно. Состоит из продольно выровненный верхней, средней части дна, он может быть применен к каждой строке столбца или столбца, указанного.
Пример, последний из которых создали демонстрационный контент для лучшей продольной сетки выравнивания.
<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-см | Меньше, чем кросс-экран мобильного телефона |
| .responsive-мкр | Менее плоский вертикальный экран |
| .responsive-Л.Г. | Менее плоского экрана по горизонтали |
<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>