<MyRusakov.ru />

PHP и MySQL с Нуля до Гуру 2.0

PHP и MySQL с Нуля до Гуру 2.0

Данный курс научит Вас программировать на самом популярном Web-языке в мире - PHP. Курс состоит из 11 разделов, в которых с нуля рассказывается и показывается процесс написания различных скриптов на PHP.

В курсе Вы узнаете всю необходимую теоретическую часть, а также увидите массу практических примеров, в том числе, и из моей практики.

Почти к каждому уроку идут упражнения.

Просмотрев данный курс, Вы сможете создавать абсолютно любые PHP-сайты любой сложности.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Bootstrap 4. Компонент Cards.

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. Таких карточек мы создаем несколько, просто копируя их код и меняя содержимое.

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

А на этом сегодня все. Спасибо за внимание!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.