Посмотреть все уроки курса
Выбрать другой урок из курса
Поиск по сайту
Теория урока

4.1. Адаптивные столбцы в Bootstrap

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

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

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

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

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

Рисунок 1x
Рисунок 1x

К примеру, мы сделаем, чтобы на брейкпоинте 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 колонки таким способом:

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

Автор курса: Олег Данилюк (по всем вопросам)

<
×
>
Впервые на сайте Codebra?

Извините за это всплывающее окно, меня они тоже раздражают.

Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Ради интереса можете посмотреть на содержимое курсов по Python, HTML и CSS, JavaScript, C++ и другие, размещенные на главной странице.

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно