Bootstrap

Изучение технологии Bootstrap (верстка сайта)

16 уроков 20 заданий Справочник Компилятор

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

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


BootstrapHTML5

В этом уроке мы с вами изучим различные текстовые панели, которые можно стилизировать под различные события благодаря 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 месяца!


BootstrapHTML5

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