Способы создания кнопок

В Bootstrap можно создавать кнопки четырьмя разными способами. Они перечислены ниже:

<button class="btn btn-default">Кнопка как тег button</button>

<input type="submit" class="btn btn-default" value="Кнопка отправки формы">

<input type="button" class="btn btn-default" value="Кнопка как элемент input">

<a href="/login" role="button" class="btn btn-default">Ссылка как кнопка</a>

Кнопки, созданные этими способами, будут выглядеть одинаково. Для обозначения принадлежности внешнего вида кнопок к тому или иному дествию, используются следующие классы:

• btn-default - обычная кнопка
• btn-primary - основная кнопка
• btn-success - кнопка подтверждения
• btn-info - кнопка уведомления
• btn-warning - кнопка предупреждения
• btn-danger - кнопка опасности
• btn-link - кнопка будет выглядеть как ссылка

Каждый такой класс будет влиять на цвет кнопки и шрифт надписи.

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

Для изменения размеров кнопок используются следующие классы:

• btn-xs - маленькая кнопка
• btn-sm - небольшая кнопка
• btn-md - кнопка средних размеров
• btn-lg - большая кнопка

Что бы растянуть кнопку по горизонтали на все свободное пространство, можно воспользоваться классом btn-block.

Нажатая кнопка и заблокированная кнопка

Можно менять видимое состояние кнопки. Например, если нужно отобразить кнопку нажатой, то можно добавить класс active. Если нужно отобразить кнопку как запрещенную для нажатий, ей нужно добавить класс disabled.

Группы кнопок

Если нужно сделать, чтобы несколько кнопок отображалось как группа кнопок, расположенных рядом, без разделителей, то такие кнопки можно поместить в специальный блок:

<div class="btn-group">

...

</div>

Группам кнопок можно задавть размер. Тогда все кнопки в группе становятся нужного размера.

• btn-group-xs - группа маленьких кнопок
• btn-group-sm - группа небольших кнопок
• btn-group-md - группа кнопок средних размеров
• btn-group-lg - группа больших кнопок

Вместо стандартного горизонтального объединения кнопок, можно задать вертикальное объединение. То есть, кнопки выстроятся по вертикали. Для этого группе кнопок надо вместо класса btn-group задать класс btn-group-vertical.