Bootstrap: Быстрое создание современных сайтов

Автор

Тимур Машнин

Жанр

Книги о компьютерах

Год написания книги

2016

<< 1 2 3 4 5 6 ... 21 >>

На страницу:

Перейти

2 из 21

Настройки чтения

Размер шрифта

Высота строк

Поля

.container {

width: 970px;

}

}

@media (min-width: 1200px) {

.container {

width: 1170px;

}

}

Класс. container-fluid охватывает всю ширину viewport:

.container-fluid {

padding-right: 15px;

padding-left: 15px;

margin-right: auto;

margin-left: auto;

}

Bootstrap Grid System

Bootstrap табличная система позволяет создать до 12 столбцов на странице.

Если вы хотите использовать меньшее количество столбцов, можно группировать столбцы вместе, чтобы создавать более широкие столбцы:

Столбцы Bootstrap Grid System будут перестраиваться автоматически в зависимости от размера экрана.

Для создания строки со столбцами нужно создать контейнер с классом. row, например, <div class=«row»>, в который включить столбцы:

<div class=«row»>

<div class=«col-*-*"> </div>

<div class=«col-*-*"> </div>

<div class=«col-*-*"> </div>

</div>

Выглядеть это будет следующим образом:

Вместо первой звездочки можно поставить один из четырех классов:

xs – для телефонов

sm – для планшетов

md – для настольных компьютеров

lg – для больших мониторов

Вместо второй звездочки указывается, сколько столбцов из 12 данный столбец объединяет.

Например, если указать col-md-6:

<div class=«row»>

<div class=«col-md-6»> col-md-6 </div>

<div class=«col-md-6»> col-md-6 </div>

</div>

Тогда для настольных компьютеров и больше это будет строка из двух столбцов, а для планшетов и телефонов это будут две строки:

Или если вы хотите сделать:

1 колонка для небольших устройств

2 колонки для малых и средних устройств

4 колонки для больших устройств

Тогда укажите:

<div class=«row»>

<div class=«col-sm-6 col-lg-3»>

This is part of our grid.

</div>

<div class=«col-sm-6 col-lg-3»>

This is part of our grid.

<< 1 2 3 4 5 6 ... 21 >>

На страницу:

Перейти

2 из 21