Поиск
Метки
Последние записи
Это блог интерактивного сайта Codebra. Здесь публикуются материалы, выходящие за рамки основных курсов сайта, мои собственные мысли по программированию и новости сайта. Кстати, если нужны курсы, то Вам сюда.
«Многие из вас знакомы с достоинствами программиста. Их всего три, и разумеется это: лень, нетерпеливость и гордыня.»
Программист
1954 г.
В этом уроке мы закрепим пройденный до этого материал.
Мы создадим один экран нашего сайта.
<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 столбца. Во второй колонки мы вложили строку с колонкой, таким же образом можно вкладывать в колонки строки и снова делать колонки (размеры вложенных колонок определяются от родителя).
Создайте первый экран сайта, используя сетки.