Buttons / Кнопки

Buttons / Кнопки

Опции

Используйте любой из доступных типов кнопок, чтобы быстро создать стильную кнопку.

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Ссылка</button>

Размеры

Больше или малые кнопки? Добавьте .btn-lg, .btn-sm, или .btn-xs для дополнительных размеров.

<p>
 <button type="button" class="btn btn-primary btn-lg">Большая кнопка</button>
 <button type="button" class="btn btn-default btn-lg">Большая кнопка</button>
 </p>
<p>
 <button type="button" class="btn btn-primary">По умолчанию</button>
 <button type="button" class="btn btn-default">По умолчанию</button>
 </p>
<p>
 <button type="button" class="btn btn-primary btn-sm">Малая кнопка</button>
 <button type="button" class="btn btn-default btn-sm">Малая кнопка</button>
 </p>
<p>
 <button type="button" class="btn btn-primary btn-xs">Очень малая кнопка</button>
 <button type="button" class="btn btn-default btn-xs">Очень малая кнопка</button>
 </p>

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Блок кнопка</button>
<button type="button" class="btn btn-default btn-lg btn-block">Блок кнопка</button>

Активное состояние

Когда кнопка будет активной, она будет выглядеть нажатой (с затемненным фоном, темным ободком, и внутренней тенью). Для элемента <и> это делается при помощи :active. Для элемента <a> это делается через .active. Однако, вы можете использовать .active - <и> если вам нужно повторить активное состояние программно.

Элемент кнопки

Нет необходимости добавлять :active, поскольку это является псевдо-класс, но если вам необходимо предоставить кнопки такого же вида, добавляйте .active.

<button type="button" class="btn btn-primary btn-lg active">Главная кнопка</button>
<button type="button" class="btn btn-default btn-lg active">Кнопка</button>

Элементы якоря

Добавьте класс .active ссылок <a> в виде кнопки.

Главная ссылка Ссылка

<a href="#" class="btn btn-primary btn-lg active" role="button">Главная ссылка</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Ссылка</a>

Заблокированное состояние

Создайте неактиные кнопки, с пименением прозрачности на 50%.

Элемент кнопки

Добавьте disabled атрибут к <button> кнопке.

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Главная кнопка</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Кнопка</button>

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

Если вы добавите disabled атрибут к <button>, Internet Explorer 9, то внизу будет отражен серый текст с неприятной текстовой тенью, которую мы не можем исправить.

Элементы якоря

Добавьте .disabled класс к <a> кнопке.

Главная ссылка Ссылка

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Главная ссылка</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Ссылка</a>

Мы используем .disabled как поддержку класса здесь, типичную для общего .active класса, так что префикс не требуется.

Функциональность ссылки не влияет

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

Контекстная специфика использования

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

Теги кнопки

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

Ссылка
<a class="btn btn-default" href="#" role="button">Ссылка</a>
<button class="btn btn-default" type="submit">Кнопка</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

Рендеринг кросс-браузера

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

Среди прочего, есть ошибка Firefox что мешает нам установитьline-height на <input> базовой кнопки, заставляя их не точно соответствовать с высотой других кнопок в Firefox.

Изображения

Адаптивные изображения

Изображения в Bootstrap 3 адаптируюся с помощью добавления класса .img-responsive. Это касается max-width: 100%; иheight: auto; к изображению, чтобы он хорошо масштабировался к родительскому элементу.

<img src="..." class="img-responsive" alt="Responsive image">

Фигурные изображения

Добавьте классы к <img> элементу чтобы легко стилизовать изображения в любом проекте.

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

Имейте в виду, что Internet Explorer 8 блокирует поддержку для закругленных краев.

140x140 140x140 140x140
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Translate »