Вертикальное меню (панель). Основы bootstrap 3 для начинающих. Урок №11

Всем привет!
Продолжаем изучать основы «bootstrap3».
В сегодняшнем уроке вы научитесь создавать вертикальное боковое меню для веб-страницы, используя компонент «Bootstrap панель». Панель резиновая и имеет свойства растягиваться.
Для создания вертикального меню, в <div> с классом «panel-body» нужно вставить текст либо меню.
Скажу простыми словами: Bootstrap панель можно использовать для отображения текста с полем (админ-панель для управления сайтом, управления товаром для интернет магазина и т.д.):

Или же для красивого оформления меню.
Сейчас вы все увидите:

Создание простой панели для меню

<div class="panel panel-default">
<div class="panel-body">Пример простой панели</div>
</div>

Результат:

Создание простой панели для меню с заголовком

<div class="panel panel-default">
<div class="panel-heading">Заголовок</div>
<div class="panel-body">
Содержимое панели
</div>
</div>

Результат:

Можно заголовок прописать через теги <h1> - <h6>, применяя к тегу класс «panel-title».

<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Панель с h3 заголовком</h3>
</div>
<div class="panel-body">
Содержимое панели
</div>
</div>

Результат:

Акцентирующие панели

Панель можно выделить различным цветом, при этом создать не только красивый вид меню, но и привлечь внимание пользователей.
Дополнительные классы: «panel-primary», «panel-success», «panel-info», «panel-warning», «panel-danger».

<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Заголовок панели 1</h3>
</div>
<div class="panel-body">
Содержимое панели
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Заголовок панели 2</h3>
</div>
<div class="panel-body">
Содержимое панели
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Заголовок панели 3</h3>
</div>
<div class="panel-body">
Содержимое панели
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Заголовок панели 4</h3>
</div>
<div class="panel-body">
Содержимое панели
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Заголовок панели 5</h3>
</div>
<div class="panel-body">
Содержимое панели
</div>
</div>

Результат:

Теперь попробуем создать полноценное меню, используя компоненты Bootstrap панель:

<div class="panel panel-default">
<!-- Обычное содержимое панели -->
<div class="panel-heading">Товары</div>
<div class="panel-body">
Список товаров в нашем магазине.
</div>
<!-- Групповой список -->
<div class="list-group">
<a href="#" class="list-group-item">Смартфоны <span class="badge">22</span></a>
<a href="#" class="list-group-item">Ноутбуки <span class="badge">24</span></a>
<a href="#" class="list-group-item">Планшеты <span class="badge">17</span></a>
<a href="#" class="list-group-item">Компьютеры <span class="badge">1</span></a>
</div>
</div>

Результат:

Можно вот так:

<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Заголовок панели</h3>
</div>
<div class="panel-body">
<ul class=" list-unstyled">
<a href="#"><li>Главная</li></a>
<a href="#"><li>Портфолио</li></a>
<a href="#"><li>Автор</li></a>
<a href="#"><li>Контакты</li></a>
</ul>
</div>
</div>

Результат:

Вот так вот! Сегодня вы снова почерпнули новые знания. Жду вас на следующих уроках.