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

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

Задание

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


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

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

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

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

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

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

Закрыть окно