Классы кнопок в Bootstrap 3

Bootstrap 3 предоставляет разные стандартные стили кнопок на все случаи жизни.

Основные кнопки

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

.btn
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link

В следующем примере показан код для различных стилей кнопок:

<button type="button" class="btn">Basic</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-success">Success</button>
<button type="button" class="btn btn-info">Info</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>

Классы для кнопок могут использоваться с HTML-тегами <a>, <button> или <input>:

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

Почему мы ставим # в атрибут href ссылки?

Так как у нас нет никакой страницы, на которую можно было бы сделать ссылку, и мы не хотим получать сообщение «404», то в наших примерах мы поместили # в качестве ссылки. Это должен быть реальный URL на конкретную страницу.

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

Bootstrap предоставляет четыре размера кнопок. Классы, которые определяют различные размеры:

.btn-lg
.btn-sm
.btn-xs

В следующем примере показан код для кнопок различного размера:

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>

Кнопки на уровне блока

Кнопка уровня блока охватывает всю ширину родительского элемента. Добавьте класс .btn-block для создания кнопки уровня блока:

<button type="button" class="btn btn-primary btn-block">Button 1</button>

Активные / отключенные кнопки

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

<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>