Урок 5. Небольшая практика по Bootstrap

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

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

В этом уроке мы закрепим пройденный до этого материал.

Мы создадим один экран нашего сайта.

<header class="header">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    Logo
                </div>
                <div class="col-md-6 offset-md-3">
                    <ul class="nav">
                        <li>О нас</li>
                        <li>Работы</li>
                        <li>Codebra</li>
                    </ul>
                </div>
            </div>
        </div>
    </header>
    <section class="promo">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <h1 class="title">
                        Построение Сетки
                    </h1>
                </div>
                <div class="col-md-4">
                    <h2 class="subtitle">
                        Обучение на сайте Codebra
                    </h2>
                    <div class="row">
                        <div class="col-md-6">
                            Вложенность
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="img">
                        <img src="img/icons-hero.png" alt="bootstrap">
                    </div>
                </div>
             </div>
        </div>
</section>

Css файл:

.header {
    padding-top: 20px;
    background-color: aqua;
}

.nav {
    list-style-type: none;
    display: flex;
    justify-content: space-between;
}

.promo {
    margin-top: 100px;
}

Мы создали набросок нашей шапки сайта и разделили на 2 колонки, которые занимают по 3 столбца и 6 столбцов, отделили мы друг от друга классом .offset-md-3.

Выровняли при помощи flex.

Когда вы хотите отделить колонки друг от друга на определённые столбцы, применяйте класс .offset

В следующей секции мы сделали 3 колонки по 4 столбца. Во второй колонки мы вложили строку с колонкой, таким же образом можно вкладывать в колонки строки и снова делать колонки (размеры вложенных колонок определяются от родителя).