Уроки Bootstrap

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

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

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

Видеоурок

Исходный код

Панели
<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>

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

Загрузка...

Задание к уроку

Создание текстовых панелей
Текстовые панели выглядят красиво и реализуются очень просто. Их можно добавлять куда угодно на сайт. Ваша задача создать информационную панель (желтого цвета) с заголовком, а также подвалом.
Посмотреть ответ
Ваша текстовая панель может выглядеть следующим образом:
<div class="col-md-4">
  <div class="panel panel-warning">
    <div class="panel-heading">Отличная панель</div>
    <div class="panel-body">Здесь представлена некая полезная информация</div>
    <div class="panel-footer">Подвал не всегда уместен, но выглядит также хорошо</div>
  </div>
</div>

Большое задание по курсу

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

Также стоит посмотреть

Вёрстка адаптивного сайта на Bootstrap 4
6 уроков
Создание блога на Ruby On Rails
8 уроков
Видеокурс по PHP, MySQL / Создание динамического сайта
Современная вёрстка адаптивного веб-сайта
Уроки Python Django / Создание сайта
12 уроков
Комментарии для сайта Cackle