Сетки начальной загрузки
Сеточная система Bootstrap
Система сетки Bootstrap позволяет использовать до 12 столбцов на странице.
Если вы не хотите использовать все 12 столбцов по отдельности, вы можете сгруппировать столбцы вместе, чтобы создать более широкие столбцы:
| диапазон 1 | диапазон 1 | диапазон 1 | диапазон 1 | диапазон 1 | диапазон 1 | диапазон 1 | диапазон 1 | диапазон 1 | диапазон 1 | диапазон 1 | диапазон 1 |
| пролет 4 | пролет 4 | пролет 4 | |||||||||
| пролет 4 | диапазон 8 | ||||||||||
| диапазон 6 | диапазон 6 | ||||||||||
| диапазон 12 | |||||||||||
Система сетки Bootstrap отзывчива, и столбцы автоматически перестраиваются в зависимости от размера экрана.
Классы сетки
Сеточная система Bootstrap имеет четыре класса:
xs(для телефонов - экраны шириной менее 768px)sm(для планшетов — экраны шириной не менее 768 пикселей)md(для небольших ноутбуков — экраны, равные или превышающие ширину 992 пикселей)lg(для ноутбуков и настольных компьютеров — экраны шириной не менее 1200 пикселей)
Приведенные выше классы можно комбинировать для создания более динамичных и гибких макетов.
Базовая структура Bootstrap Grid
Ниже приведена базовая структура сетки 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>
Первый; создать строку ( <div
class="row">). Затем добавьте нужное количество столбцов (тегов с соответствующими
.col-*-*классами). Обратите внимание, что числа .col-*-*всегда должны составлять до 12 для каждой строки.
Ниже мы собрали несколько примеров базовых макетов сетки Bootstrap.
Три равных столбца
В следующем примере показано, как получить три столбца одинаковой ширины, начиная с планшетов и масштабируя их до больших настольных компьютеров. На мобильных телефонах или экранах шириной менее 768 пикселей столбцы автоматически складываются:
Пример
<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>
Две неравные колонки
В следующем примере показано, как получить два столбца разной ширины, начиная с планшетов и масштабируя их до больших настольных компьютеров:
Пример
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Совет: вы узнаете больше о сетках Bootstrap позже в этом руководстве.