Верстка по сетке Bootstrap (часть 4)
Итак, на этом уроке делаем верстку последней секции макета по сетке Bootstrap.
Секция с корзиной
Верстаем уже по накатанной схеме: секция -> контейнер -> ряд -> две колонки. В блоке row, сделаем выравнивание контента по центру, прописав класс justify-content-center.
HTML код
<section class="cart">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-sm-6">
<div class="cart-wrap">
<h2>The Shopping cart</h2>
<img class="cart-image" src="images/cart.png">
</div>
</div>
<div class="col-sm-6">
<div class="cart-text">
<h4>Some Bullet text here</h4>
<p>some text
</p>
</div>
</div>
</div>
</div>
</section>
CSS код
/* обертка для секции с корзиной */
.cart {
padding: 80px 50px 120px 50px;
font-family: "SegoeWPN";
}
/* Выравнивает по центру */
.cart-wrap{
text-align: center;
color: #6f7173;
}
/* Размер корзины */
.cart-image{
max-width: 80%;
margin-top: 15px;
}
/* Отступ от верхней секции */
.cart-text h4{
margin-top: 50px;
}
/* Стили параграфа */
.cart-text p{
margin-top: 30px;
font-size: 80%;
line-height: 30px;
color: #999;
}
Демонстрация примера в браузере
Итоги
Сетка фреймворка Bootstrap на ширине меньше 576 пикселей, автоматически заточена на складывание колонок друг под друга. Вам останется в медиа-запросах, уменьшать отступы, размер текста, только там где это нужно.
-
Создано 22.04.2019 10:01:47
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.