Рис.1. Типы кнопок в Bootstrap

Bootstrap содержит заготовленные оформления для 7 видов кнопок, а также дополнительные стили для указания размеров и стилей для нажатых кнопок.

Основные виды кнопок и их соответствия классам:

  • Обычная  - btn-default
  • Основная - btn-primary
  • Кнопка Ok - btn-success
  • Уведомление - btn-info
  • Предупреждение - btn-warning
  • Отмена - btn-danger
  • Ссылка - btn-link

 

Код кнопок

 

Рис.1. Типы кнопок в Bootstrap

Рис.1. Типы кнопок в Bootstrap

 

Стили кнопок в Bootstrap могут быть использованы для элементов <button>, <input type="button"> и гиперссылкам <a>. Для этого кнопке нужно присвоить класс .btn и один из классов для применения стиля. Для тэга <a> это будет выглядеть так:

Аналогично для тэгов <input> и <button>.

 

Размеры кнопок Bootstrap

Кроме цвета, можно управлять и размером кнопок. В Bootstrap заложено 4 размера кнопок – btn-lg, btn-md, btn-sm, btn-xs:

 

Рис.2. Размеры кнопок Bootstrap

Рис.2. Размеры кнопок Bootstrap

 

Задать кнопкам блочные свойства

Кнопки в HTML являются строчными элементами управления. Для того, чтобы кнопка превратилась в блочный элемент, в Bootstrap есть класс .btn-block. Кнопка с классом .btn-block занимает 100% от ширины родительского элемента.

 

Активные и заблокированные кнопки

Для привлечения внимания к кнопке можно сделать ее активной, добавив для нее класс .active, а также можно отключить кнопку с помощью класса .disabled. Для кнопки с   классом .disabled будут отключены нажатия.

Рис.3. Активная и отключенная кнопки

Рис.3. Активная и отключенная кнопки