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