Урок 4. Адаптивные столбцы в Bootstrap

Оглавление мини-курса «Bootstrap — сетки» от пользователя сайта Codebra

Урок 1. Введение в курс «Bootstrap — сетки»
Урок 2. Подключаем Bootstrap
Урок 3. Создаем столбцы в Bootstrap
Урок 4. Адаптивные столбцы в Bootstrap
Урок 5. Небольшая практика по Bootstrap
Урок 6. Дополнительно по сеткам Bootstrap

В предыдущем уроке мы создавали автоматические столбцы.

Но Bootstrap славится своей адаптивностью. Как же нам сделать адаптивные столбцы?

Bootstrap может адаптировать к шести контрольным точкам (брейкпоинт):

Очень маленький — Extra small (xs);
Маленький — Small (sm);
Средний — Medium (md);
Большой — Large (lg);
Очень большой — Extra large (xl);
Огромный — Extra extra large (xxl).

На рисунке 1 представлено определение сетки на контрольных точках.

К примеру, мы сделаем, чтобы на брейкпоинте md было две колонки по шесть столбцов:

<div class="container">    
    <div class="row">        
        <div class="col-md-6"> 1 колонка </div>        
        <div class="col-md-6"> 2 колонка </div>    
    </div>
</div>

Получается, что с разрешения md и выше у нас будет по две колонки и по шесть столбцов.

Но если разрешение будет ниже 768 px, то колонки будут занимать всё доступное пространство. Разрешения строятся по принципу больше или равно.

Для 768 px правила будут приниматься больше или равно этому значению, также и насчёт других разрешений.

Мы можем также комбинировать наши классы.

Пример:

<div class="container">    
    <div class="row">        
        <div class="col-md-3 col-xl-3"> 1 </div>        
        <div class="col-md-4 col-xl-3"> 2 </div>        
        <div class="col-md-3 col-xl-3"> 3 </div>       
        <div class="col-md-2 col-xl-3"> 4 </div>    
    </div>
</div>

В нашем примере мы видим, что колонки на разрешении 1200 px и более выстроились по 3, а на разрешении меньше 1200 px колонки будут занимать по 3, 4, 3 и 2 колонки соответственно.

Вот такими простыми способами мы можем манипулировать нашей сеткой.

Задание:

Сделайте 3 колонки таким способом:

На разрешении xs – должны занимать по 12 столбцов. (автоматические колонки можно создать просто классом .col);
На разрешении sm – должны занимать по 6 столбцов;
На разрешении md — должны занимать по 4 столбцов;
На разрешении lg — должны занимать по 12 столбцов;