Bootstrap 4. Компонент Cards.
Всем привет! В этой статье мы продолжим изучать Bootstrap 4 и рассмотрим компонент под названием Cards.
Cards – это компонент, который позволяет создавать блоки в виде карточек. Чтобы лучше понять, как это выглядит, перейдите на официальный сайт Bootstrap 4. Давайте создадим несколько. Я сразу приведу нужный код, а затем мы разберем, что там происходит.
<div class="container text-muted">
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="card">
<img class="card-img-top img-fluid" src="/img/img1.png">
<div class="card-block">
<h3 class="card-title">Bootstrap 4 Tutorial</h3>
aliquam erat volutpat.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card">
<img class="card-img-top img-fluid" src="/img/img2.png">
<div class="card-block">
<h3 class="card-title">Bootstrap 4 Tutorial</h3>
<p class="card-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card">
<img class="card-img-top img-fluid" src="/img/img3.png">
<div class="card-block">
<h3 class="card-title">Bootstrap 4 Tutorial</h3>
<p class="card-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card">
<img class="card-img-top img-fluid" src="/img/img4.png">
<div class="card-block">
<h3 class="card-title">Bootstrap 4 Tutorial</h3>
<p class="card-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
</div>
Итак, давайте разбираться. Сначала мы создаем контейнер, в котором указан класс text-muted. Этот класс делает текст светлым, чтобы он лучше выглядел в карточках. Дальше создаем строку, в которой будут наши карточки размером 6 колонок для средних размеров экрана и 3 для маленьких размеров экрана. Потом мы начинаем создавать отдельную карточку. Для этого мы используем блок с классом card. В этой карточке сверху будет изображение и, чтобы это изображение автоматически растягивалось на всю ширину блока карточки и подстраивалось по высоте, мы применяем класс img-fluid. Класс card-img-top нужен для того, чтобы изображение было сверху. Далее мы создаем блок с классом card-block, в котром будет содержимое нашей карточки в виде текста. Сверху у нас будет заголовок, следовательно, мы используем тег h3 с классом card-title, а дальше сам текст – параграф с классом card-text. Таких карточек мы создаем несколько, просто копируя их код и меняя содержимое.
Как видите, сделать красивый блок в виде карточки несложно, а классы, которые в них используются, говорят сами за себя, поэтому вы не запутаетесь, что и где использовать. Если же вы что-то забудете, то просто зайдите в нужный раздел на официальном сайте и посмотрите пример.
А на этом сегодня все. Спасибо за внимание!
-
Создано 12.07.2017 15:17:17
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.