<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

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

Подписавшись по 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):

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