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 месяца

Bootstrap

HTML5