itProger Відеокурси Изучение технологии Bootstrap (верстка сайта) #9 - Текстовые панели

#9 - Текстовые панели

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

Відеоурок

Підписуйтесь на нашу групу в Телеграмі 🇺🇦

В Bootstrap версии 4 класс «panel» был удален и вместо него используется класс «card».

Документация про переход с класса «panel» на класс «card» представлена по этой ссылке.

Вихідний код

Панели

<div class="panel-group">
    <div class="panel panel-danger">
      <div class="panel-heading">Заголовок</div>
      <div class="panel-body">Текст</div>
    </div>
    <div class="panel panel-info">
      <div class="panel-heading">Заголовок</div>
      <div class="panel-body">Текст</div>
    </div>
    <div class="panel panel-primary">
      <div class="panel-heading">Заголовок</div>
      <div class="panel-body">Текст</div>
    </div>
</div>

Онлайн редактор коду

Завантаження...

Завдання до уроку

Простая панель

Создайте панель как на фото ниже:

Для выполнения задания используйте класс «card».

Подивитися відповідь

Решение задания:

<div class="col-md-4">
	<div class="card card-warning">
		<div class="card-header">Отличная панель</div>
		<div class="card-body">Здесь представлена некая полезная информация</div>
		<div class="card-footer">Подвал не всегда уместен, но выглядит также хорошо</div>
	</div>
</div>

Велике завдання за курсом

Вам необхідно оформити передплату на сайті, щоб мати доступ до всіх великих завдань. У завдання входить методика рішення, а також готовий проект з відповіддю до завдання.
PS: подібні завдання доступні при підписці від 1 місяця

Також варто подивитися