Сетка

Bootstrap включает в себя адаптивную, первую мобильную резиновую систему разметки, которая масштабируется до 12 столбцов как на устройствах или при изменении окна просмотра. Для того чтобы создавать разметку для всех видов устройств одновременно (мобильные-настольные-планшеты), нужно учитывать размер экрана каждого из устройств, и соответственно для каждого устройства задавать поведение «схлопываения». Достигается это специальными тегами, каждый из которых «работает» в зависимости от размеров экрана, согласно таблице:

Очень маленькие устройство Телефоны (<768px) Малые устройстваПланшеты (≥768px) Средние устройстваНастольные (≥992px) Большие устройстваНастольные (≥1200px)
Поведение разметки Горизонтальный все время Терпеть неудачу при начатии, горизонтальный выше контрольной точки
Ширина контейнера Нет (автом.) 750px 970px 1170px
Класс префикса .col-xs- .col-sm- .col-md- .col-lg-
# колонок 12
Ширина колонки Авто 60px 78px 95px
Промежуточная ширина 30px(15px) на каждой стороне колонки
Вкладка Да
Отступ Да
Выравнивание колонки Да

Вот названия и разметка сетки:

 

Вот пример «резиновых блоков»:

<code class="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container-fluid"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
    &lt;div class="col-md-4"&gt;
    &lt;/div&gt;
    &lt;div class="com-md-8"&gt;
    &lt;/div&gt;
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code>

яя8


Комментарии:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Жизнь замечательных грибов