Кнопки. Основы bootstrap 3 для начинающих. Урок №7

Всем привет!
Продолжаем изучать основы «bootstrap3».
В сегодняшнем уроке, вы научитесь создавать адаптивные кнопки.
Кнопки часто используют на сайте для добавления комментариев, отправка сообщения, регистрации, авторизации и т.д.
С помощью различных стилей подаренными нам от Twitter Bootstrap, мы можем задавать различные состояния для кнопок. Эти стили можно применять к таким элементам как <a>, <input>, <button>.

Цвет и вид кнопок.

Таблица №1.  Различные стили доступные в Bootstrap 3.

Вид кнопки	Класс
Default	btn btn-default
Primary	btn btn-primary
Info	btn btn-info
Success	btn btn-success
Warning	btn btn-warning
Danger	btn btn-danger
Link	btn btn-link

Давайте попробуем прописать взятые из таблицы классы для кнопок <button>
Пример:

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

Для ссылки

<a href="#" class="btn btn-default">Default</a>
<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-info">Info</a>
<a href="#" class="btn btn-success">Success</a>
<a href="#" class="btn btn-warning">Warning</a>
<a href="#" class="btn btn-danger">Danger</a>
<a href="#" class="btn btn-link">Link</a>

Размер кнопок.
Также можно задать размеры для кнопок. Для этого разработаны были такие классы как:

btn-lg -  большая кнопка

btn-sm - маленькая кнопка

btn-xs - очень маленькая кнопка

Пример:

<button type="button" class="btn btn-success btn-xs">Очень маленькая кнопка</button>
<button type="button" class="btn btn-success btn-sm">Маленькая кнопка</button>
<button type="button" class="btn btn-success">Кнопка обычного размера</button>
<button type="button" class="btn btn-success btn-lg">Большая кнопка</button>

Результат:

Очень маленькая кнопка

Маленькая кнопка

Кнопка обычного размера

Большая кнопка

Также, можно создать адаптивную кнопку, которая будет занимать всю ширину сайта.
Для этого добавьте класс «.btn-block»

<button type="button" class="btn btn-success btn-block">Большая адаптивная кнопка</button>

Результат:

Большая адаптивная кнопка

Кнопка в неактивном состоянии.
Если вам нужно сделать кнопку не кликабельной, например, до тех пор, пока не будут заполнены все поля, то, следует добавить к кнопке класс «.disabled».

<button type="button" class="btn btn-danger btn-lg disabled">Взрыв мозга</button>

Результат:

Взрыв мозга

Переключение кнопки.
Можете изменить обычное состояние кнопки на нажатое, и наоборот.
Добавьте к тегу <button> атрибут data-toggle со значением button:

<button type="button" class="btn btn-default" data-toggle="button">По умолчанию</button>
<button type="button" class="btn btn-primary" data-toggle="button">Основная</button>
<button type="button" class="btn btn-success" data-toggle="button">Успех</button>
<button type="button" class="btn btn-info" data-toggle="button">Информация</button>
<button type="button" class="btn btn-warning" data-toggle="button">Предупреждение</button>
<button type="button" class="btn btn-danger" data-toggle="button">Опасность</button>

Результат:

По умолчанию

Основная

Успех

Информация

Предупреждение

Опасность

Создание группы кнопок
Можно сгруппировать несколько кнопок вместе в одну линию.
Чтобы создать группу кнопок, добавьте для тега <div> класс «.btn-group» и поместите вовнутрь этого контейнера кнопки.

Горизонтально:

<div class="btn-group">
<button type="button" class="btn btn-primary">Левая</button>
<button type="button" class="btn btn-primary">Средняя</button>
<button type="button" class="btn btn-primary">Правая</button>
</div>

Результат:

Вертикально:

<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Верхняя</button>
<button type="button" class="btn btn-primary">Средняя</button>
<button type="button" class="btn btn-primary">Нижняя</button>
</div>

Результат:

Иконка в кнопке
Можно также сделать кнопку, внутри которой будет находиться иконка.

<button type="button" class="btn btn-success btn-lg"><span class="glyphicon glyphicon-phone"></span> Мобильная версия</button>

Результат:

Мобильная версия

С кнопками разобрались!
Рекомендую подписаться на обновления блога stepkinBLOG.RU