Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

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

05.08.2016


09:41


7891


2


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

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

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

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

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

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

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

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

Результат:

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

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

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

Результат:

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

Можно заголовок прописать через теги <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>

Результат:

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

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

Панель можно выделить различным цветом, при этом создать не только красивый вид меню, но и привлечь внимание пользователей.
Дополнительные классы: «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>

Результат:

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

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

<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>

Результат:

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

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



Случайные записи:

  1. Цикл While (Do- While). Основы PHP с нуля. Урок №11
  2. Кнопки. Основы bootstrap 3 для начинающих. Урок №7
  3. Нам 2 годика! С Днем Рождения StepkinBlog.ru!!!
  4. Тег div в HTML. Основы HTML для начинающих. Урок №17
  5. Ссылка-якорь на HTML. Основы HTML для начинающих. Урок №7

Последние записи рубрики:

  1. Бесплатный курс по основам Bootstrap3
  2. Создание простого сайта на Bootstrap 3. Практика по пройденному материалу
  3. Тесты Bootstrap 3 онлайн. Основы Bootstrap 3 для начинающих
  4. Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26
  5. Миниатюры. Основы bootstrap 3 для начинающих. Урок №25

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

  1. Андрей says:

    Отлично! Попробуем

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Пробуйте, Андрей!

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 231

Уведомление для пользователей AdBlock

Включая adblock (блокировщик рекламы) вы лишаете меня заработка, и тем самым лишаете смысла трудиться над своим сайтом, помогать вам и отвечать на комментарии. Если вы решились отключить adblock для моего блога, спасибо!

Как отключить AdBlock?