Кнопки и группы кнопок

Для создания стилизованной цветом кнопки используется класс. btn совместно с одним из классов. btn-default,.btn-primary,.btn-success,.btn-info,.btn-warning,.btn-danger,.btn-link.



Вышеуказанные классы могут применяться для элементов ,

Success



Дополнительно классы. btn-lg,.btn-md,.btn-sm,.btn-xs регулируют размер кнопки.



Дополнительно класс. btn-block обеспечивает 100% ширину кнопки.



Класс. active переводит кнопку в нажатое состояние.

Класс. disabled делает кнопку некликабельной.



Для смещения и центрирования кнопок дополнительно применяются классы. pull-left,.pull-right,.center-block.

Класс. btn-group позволяет скомпоновать группу кнопок в строку или столбец.

Горизонтальный макет:



Вертикальный макет:



Группа кнопок позволяет применить размер сразу ко всем кнопкам с помощью дополнительных классов. btn-group-lg,.btn-group-md,.btn-group-sm,.btn-group-xs.

Класс. btn-group-justified, группирующий кнопки позволяет заполнить кнопками всю ширину экрана.

Button 1

Button 2

Button 3



Для кнопок

С помощью класса. btn-group можно также сделать кнопку с выпадающим меню.



Или разделенную кнопку с меню.



Кнопку раскрытия меню можно делать разного размера.









Для раскрытия меню вверх, а не вниз используется класс. dropup.




Для объединения групп кнопок в панель используется класс. btn-toolbar, который дает небольшой отступ и обтекание слева для групп кнопок.