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

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

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

Выглядят они вот так:

Для того, чтобы использовать эти стили кнопок 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>

Классы кнопок

Указанные ниже классы можно использовать для стилизации любого элемента <a>, <button> или <input>:

КлассОписание
.btnДобавляет базовый стиль для любой кнопки
.btn-defaultУказывает стандартную кнопку
.btn-primaryОбеспечивает дополнительный визуальный вес и определяет основное действие в наборе кнопок
.btn-successУказывает на успешное или положительное действие
.btn-infoКонтекстная кнопка для информационных предупреждающих сообщений
.btn-warningУказывает, что с этим действием следует соблюдать осторожность
.btn-dangerУказывает на опасное или потенциально негативное действие
.btn-linkДелает кнопку похожей на ссылку (все равно будет иметь поведение кнопки)
.btn-lgДелает большую кнопку
.btn-smДелает маленькую кнопку
.btn-xsДелает очень маленькую кнопку
.btn-blockДелает кнопку уровня блока (охватывает всю ширину родительского элемента)
.activeКнопка выглядит нажатой
.disabledКнопка выглядит отключенной
.navbar-btnВыравнивает по вертикали кнопку внутри панели навигации

Классы группы кнопок

Указанные ниже классы можно использовать для стилизации любого элемента <a>, <button> или <input>:

КлассОписание
.btn-groupОбъединяет кнопки в одну строку
.btn-group-justifiedДелает группу кнопок на всю ширину экрана
.btn-group-lgБольшая группа кнопок (увеличивает все кнопки в группе кнопок – увеличивается размер шрифта и отступы)
.btn-group-smМаленькая группа кнопок (делает все кнопки в группе кнопок меньше)
.btn-group-xsОчень маленькая группа кнопок (делает все кнопки в группе кнопок очень маленькими)
.btn-group-verticalДелает группу кнопок отображаться вертикально

Наверх ↑

Сергей Ермилов

Создаю веб-проекты, придумываю идеи, занимаюсь разработкой, оптимизирую и продвигаю сайты. Первые шаги в этом направлении были сделаны в 2008 году. Если у вас есть какие-то идеи или вы хотите что-то предложить, то пишите мне и моей команде.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вы можете использовать HTML теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>