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

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

Похожие записи:

Урок 4. Адаптивные столбцы в Bootstrap Урок 5. Небольшая практика по Bootstrap Урок 6. Дополнительно по сеткам Bootstrap Урок 2. Подключаем Bootstrap Урок 1. Введение в курс «Bootstrap — сетки» Урок 8. Создание версий проекта в Git Урок 4. Основные команды в Git Урок 3. Генерация SSH-ключа для работы с GitHub Урок 10. Заключение и полезные материалы по Git Урок 9. Работа с версиями проекта в Git