twitter-bootstrap
Кнопки
Поиск…
Синтаксис
- Классы: .btn-default | .btn-primary | .btn-success | .btn-info | .btn-warning | .btn-danger | .btn-link;
- Размеры: .btn-lg | .btn-md | .btn-sm | .btn-XS;
- Состояние: активное | dissabled.
Клавишные классы
Bootstrap предоставляет несколько классов для кнопок стилизации и делает их выделяющимися.
Кнопки Bootstrap могут быть созданы путем добавления класса .btn к элементу.
| Класс начальной загрузки | Роль (цвет) |
|---|---|
.btn-default | Стандартная кнопка (белый) |
.btn-primary | Обеспечивает дополнительный визуальный вес и определяет основное действие (синее) |
.btn-success | Используется для указания успешного действия (зеленый) |
.btn-info | Контекстная кнопка для предоставления информации (светло-голубой) |
.btn-warning | Указывает, что пользователь должен будет соблюдать осторожность (желтый) |
.btn-danger | Указывает на опасное или отрицательное действие (красный) |
.btn-link | Сделать кнопку похожим на якорный тег. |
Размеры кнопок
Вы также можете создавать разные размеры кнопок с .btn-size
| Класс начальной загрузки | Результат |
|---|---|
.btn-lg | Создает кнопку большего размера |
.btn-sm | Создает кнопку меньшего размера |
.btn-xs | Создает очень маленькую кнопку |
.btn-block | Кнопки становятся элементами уровня блока и охватывают всю ширину их родительских |
Активна кнопка
active класс заставит кнопку нажать.
<button type="button" class="btn btn-primary active">Active Primary</button>
Отключить кнопку
Добавление disabled класса к кнопке приведет к тому, что кнопка будет disabled и покажет запретный курсор при зависании над ней.
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
Кнопки рендеринга горизонтально
Несколько кнопок могут отображаться горизонтально с .btn-group . Просто оберните ваши кнопки внутри элемента контейнера и дайте этому элементу класс btn-group.
<div class="btn-group">
<button type="button" class="btn btn-primary">Apples</button>
<button type="button" class="btn btn-primary">Oranges</button>
<button type="button" class="btn btn-primary">Pineapples</button>
</div>
Кнопки рендеринга по вертикали
Применить .btn-group-vertical к элементу контейнера
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apples</button>
<button type="button" class="btn btn-primary">Oranges</button>
<button type="button" class="btn btn-primary">Pineapples</button>
</div>
Группировать группы кнопок в полную ширину
Кнопки, заключенные внутри элемента .btn-group занимают столько же ширины, сколько необходимо. Чтобы группа .btn-group-justified всю ширину экрана, используйте .btn-group-justified .
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apples</a>
<a href="#" class="btn btn-primary">Oranges</a>
<a href="#" class="btn btn-primary">Pineapples</a>
</div>