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