Стандартные кнопки

Стиль кнопки может быть применен к любому элементу с классом .btn. Но скорее всего Вы будете применить его к элементам <a> и <button>, для наилучшего результата.

Совместимость с браузерами

IE9 не подгоняет градиенты к элементам и закругленным углам, так что мы убрали их. Еще IE9 делает недоступным применение стилей к элементам button, текст становится серым и добавляется ужасная тень, которую невозможно исправить.

Различные размеры

Нужны большие и маленькие кнопки? Добавьте классы .btn-large, .btn-small, или .btn-mini для дополнительных размеров.

<p>
  <button class="btn btn-large btn-primary" type="button">Large button</button>
  <button class="btn btn-large" type="button">Large button</button>
</p>
<p>
  <button class="btn btn-primary" type="button">Default button</button>
  <button class="btn" type="button">Default button</button>
</p>
<p>
  <button class="btn btn-small btn-primary" type="button">Small button</button>
  <button class="btn btn-small" type="button">Small button</button>
</p>
<p>
  <button class="btn btn-mini btn-primary" type="button">Mini button</button>
  <button class="btn btn-mini" type="button">Mini button</button>
</p>

Нужна кнопка размер которой совпадает с шириной родительского элемента? — Добавьте класс .btn-block к нопке или любому элементу с классом .btn.

<button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
<button class="btn btn-large btn-block" type="button">Block level button</button>

Отключенное состояние

Дополнительные стили кнопок, позволяют понять что они не кликабельные или отключены.

Элемент Anchor Ссылка

Для отключения ссылок со стилем кнопок добавьте класс .disabled.

Primary link Link

<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
<a href="#" class="btn btn-large disabled">Link</a>

Внимание! Используйте .disabled как дополнительный класс, так же как и класс .active, без префиксов. И имейте ввиду что для элемента >a< - это только применения стиля, Вы должны использовать JavaScript для полноценного отключения ссылок.

Элемент Button Кнопка

Добавьте атрибут disabled к элементу <button> для отключения кнопки.

Primary button Button

<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-large" disabled>Button</button>

Один класс, несколько тегов

Используйте класс .btn для элементов <a>, <button>, или <input>.

<a class="btn" href="/">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

Для наилучшей совместимости с браузерами, используйте элементы корректно обрабатываемые во всех браузерах. Например input, используйте как кнопку <input type="submit">.

Как и цвет текста контекстных классов, легко устанавливать фон элемента к любому контекстному классу. Якорные компоненты будут темнеть при наведении, как и текстовые классы.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>