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

Небольшая практика по 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 столбца. Во второй колонки мы вложили строку с колонкой, таким же образом можно вкладывать в колонки строки и снова делать колонки (размеры вложенных колонок определяются от родителя).

Задание

Создайте первый экран сайта, используя сетки.


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

<
×
>
Не публикуйте свой код прямо в комментариях. Во-первых, он плохо отображается. Во-вторых, он может содержать для кого-то «спойлеры», т.е. ответы на практику. Воспользуйтесь специальными сервисами: cssdeck.com или jsfiddle.net.
Комментарии, содержащие код (пару строк не считается), будут безжалостно удаляться.