От автора: всех приветствую. Мы продолжаем цикл статей по фреймворку Bootstrap, который является одним из лучших и самых популярных css и js-фреймворков. Сегодня рассмотрим, как делать с помощью Bootstrap кнопки.
Стандартные кнопки
В Bootstrap уже заложено 6 стандартных стилей для кнопок, вот они:
|
1 2 3 4 5 6 |
<button class="btn btn-default">Кнопка</button> <button class="btn btn-success">Кнопка</button> <button class="btn btn-info">Кнопка</button> <button class="btn btn-warning">Кнопка</button> <button class="btn btn-danger">Кнопка</button> <button class="btn btn-primary">Кнопка</button> |
Соответственно, если вы вдруг захотите изменить оформление, можно сразу создать свой собственный файл стилей, где описать свои стили для кнопок. Например:
|
1 2 3 |
.btn-gradient{ background: linear-gradient(to bottom, #B5D279, #9CD175); } |
Теперь задайте этот класс кнопке и она окрасится уже в те цвета, которые вы сами для нее подобрали.
Размеры
В Bootstrap по умолчанию заложено 4 размера для кнопок: xs, sm, md и lg. Перечислил я их по возрастанию. Чтобы определить размер кнопки, допишите ей класс btn-размер. По умолчанию кнопки выводятся в размере md.
|
1 2 3 4 |
<button class="btn btn-default btn-xs">Кнопка</button> <button class="btn btn-success btn-sm">Кнопка</button> <button class="btn btn-info btn-md">Кнопка</button> <button class="btn btn-warning btn-lg">Кнопка</button> |
Группы кнопок
Очень часто бывает так, что несколько кнопок нужно объединить в одну группу. В таких случаях используйте такую разметку:
|
1 2 3 4 5 |
<div class="btn-group"> <button class="btn btn-default">Первая</button> <button class="btn btn-default">Вторая</button> <button class="btn btn-default">Третья</button> </div> |
То есть все кнопки помещаются в контейнер btn-group.
Для управления размером всех кнопок, помещенных в одну группу, допишите ей класс btn-group-размер.
|
1 |
<div class="btn-group btn-group-lg"> |
Простым изменением класс btn-group на btn-group-vertical вы добъетесь того, что все кнопки будут располагаться вертикально.
Панель кнопок
Панель – это общий контейнер для нескольких групп кнопок. Укажите контейнеру панели класс btn-toolbar, а также атрибут role = “toolbar”. Вот пример добавления в панель трех групп кнопок:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="btn-toolbar" role="toolbar"> <div class="btn-group"> <button class="btn btn-default">Первая</button> <button class="btn btn-default">Вторая</button> <button class="btn btn-default">Третья</button> </div> <div class="btn-group"> <button class="btn btn-default">Четвертая</button> <button class="btn btn-default">Пятая</button> </div> <div class="btn-group"> <button class="btn btn-default">И еще что-то</button> </div> </div> |
Обратите внимание на то, как именно располагаются группы кнопок в панели. Каждую группу от другой отделяет небольшой горизонтальный отступ.
Кнопка выпадающий список
Для реализации кнопки, при клике по которой будет разворачиваться список ссылок, я также использую пример из документации, лишь немного его переделав:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Кнопка-список <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Пункт 1</a></li> <li><a href="#">Пункт 2</a></li> <li><a href="#">Пункт 3</a></li> <li class="divider"></li> <li><a href="#">Какой-то левый пункт</a></li> </ul> </div> |
Результат:
Исходя из этого, вы и сами можете понять разметку.
Как сделать в Bootstrap кнопку по центру?
По умолчанию в фреймворка нет такого класса, но вы можете легко дописать его самостоятельно:
|
1 |
<button type="button" class="btn btn-primary center">Кнопка</button> |
Как видите, в этом куске кода мы задаем кнопке дополнительный класс center. А вот и стили для него:
|
1 2 3 4 |
.center{ display: block; margin: 0 auto; } |
Достаточно сделать кнопку блочной и задать автоматические внешние отступы по горизонтали.
Что ж, мы рассмотрели несколько примеров работы с кнопками в Bootstrap. Остальные вы сможете найти в документации. Работать с этим компонентом фреймворка очень просто. Ну а если вы хотите поработать не просто с каким-то одним компонентом, а сверстать полноценные сайты на Bootstrap, буду рад видеть вас в числе людей, которые приобрели и изучили курс по адаптивной верстке на Bootstrap. Этот курс позволит вам буквально за несколько дней или недель изучить фреймворк ОТ и ДО. Что ж, ну а я прощаюсь с вами, в следующей статье вы сможете получить реальную практику работы с фреймворком, потому что мы будем верстать схематичный шаблон.
Комментарии (1)