Сетка
Bootstrap включает в себя адаптивную, первую мобильную резиновую систему разметки, которая масштабируется до 12 столбцов как на устройствах или при изменении окна просмотра. Для того чтобы создавать разметку для всех видов устройств одновременно (мобильные-настольные-планшеты), нужно учитывать размер экрана каждого из устройств, и соответственно для каждого устройства задавать поведение «схлопываения». Достигается это специальными тегами, каждый из которых «работает» в зависимости от размеров экрана, согласно таблице:
| Очень маленькие устройство Телефоны (<768px) | Малые устройстваПланшеты (≥768px) | Средние устройстваНастольные (≥992px) | Большие устройстваНастольные (≥1200px) | |
|---|---|---|---|---|
| Поведение разметки | Горизонтальный все время | Терпеть неудачу при начатии, горизонтальный выше контрольной точки | ||
| Ширина контейнера | Нет (автом.) | 750px | 970px | 1170px |
| Класс префикса | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| # колонок | 12 | |||
| Ширина колонки | Авто | 60px | 78px | 95px |
| Промежуточная ширина | 30px(15px) на каждой стороне колонки | |||
| Вкладка | Да | |||
| Отступ | Да | |||
| Выравнивание колонки | Да | |||
Вот названия и разметка сетки:
Вот пример «резиновых блоков»:
|
1 2 3 4 5 6 7 8 |
<code class="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container-fluid"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> <div class="col-md-4"> </div> <div class="com-md-8"> </div> <span class="nt"></div></span> <span class="nt"></div></span></code> |
яя8