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

3.1. Создаем столбцы в Bootstrap

Когда вы создаёте макет, вы как-то ограничиваете контент в нём, то есть создаёте container.

В Bootstrap он тоже есть, .container устанавливает max-width в каждой контрольной точке. Класс .container-fluid охватывает всю ширину вашего экрана.

После того как мы создали container, давайте зададим сетку.

Сетка создаётся при помощи классов .row и .col, в сеточной системе 12 столбцов.

(Примечание: без класса .row, использование класса .col невозможно)

Пример:

Пример
<div class="row">
<div class="col"> 1 колонка </div>
<div class="col"> 2 колонка </div>
<div class="col"> 3 колонка </div>
</div>

В примере выше, будет создана строка из 3 колонок, автоматически занимающая 12 столбцов, 1 колонка (4 столбца), т.е. 4 + 4 + 4 = 12.

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

Пример
<div class="row">
<div class="col-3"> 1 колонка </div>
<div class="col-3"> 2 колонка </div>
<div class="col-3"> 3 колонка </div>
<div class="col-3"> 4 колонка </div>
</div>

Теперь сформируются 4 колонки по 3 столбца.

Не так уже и сложно, верно?

Задание:

Сделайте 4 колонки, которые будут занимать:

  • 1 колонка - 2 столбца;
  • 2 колонка - 4 столбца;
  • 3 колонка - 3 столбца;
  • 4 колонка - 3 столбца.

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

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

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

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

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

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

Закрыть окно