Искать
Вы превысили запрос на
0 знаков

Это блог интерактивного сайта Codebra. Здесь публикуются материалы, выходящие за рамки основных курсов сайта, мои собственные мысли по программированию и новости сайта. Кстати, если нужны курсы, то Вам сюда.

«Низкоуровневый язык — это когда требуется внимание к вещам, которые никак не связаны с программами на этом языке.»

Учёный в области информатики

Алан Джей Перлис

1922 - 1990 гг.

Главная » Bootstrap » Урок 3. Создаем столбцы в Bootstrap
Урок 3. Создаем столбцы в Bootstrap

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

Когда вы создаёте макет, вы как-то ограничиваете контент в нём, то есть создаёте 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 столбца.
Bootstrap. Просмотров: 42
29.07.2022
Codebra