Кнопки
Используйте собственные стили кнопок Bootstrap для действий в формах, диалогах и т. д. Включает поддержку нескольких контекстных вариаций, размеров, состояний и т. д.
Содержание
- Содержание
- Примеры
- Теги кнопок
- Outline кнопки
- Размеры
- Активное состояние
- Отключенное состояние
- Плагин кнопок
Примеры
Bootstrap включает в себя шесть предопределенных стилей кнопок, каждая из которых служит своей семантической цели.
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Secondary, outline button -->
<button type="button" class="btn btn-secondary">Secondary</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">Link</button>Передача значения ассистивным технологиям
Использование цвета для добавления значения обеспечивает только визуальную индикацию, которая не будет передаваться пользователям ассистивных технологий - таких как screen readers (программы для чтения экрана). Убедитесь, что информация, выделенная цветом, либо очевидна из самого содержания (например, видимый текст), либо включается с помощью альтернативных средств, таких как дополнительный текст, скрытый классом .sr-only.
Теги кнопок
Классы .btn предназначены для использования с элементом <button>/ Однако вы также можете использовать эти классы для элементов <a> или <input> (хотя некоторые браузеры могут применять несколько иной рендеринг).
При использовании классов кнопок для элементов <a>, которые используются для запуска функцонала на странице (например, при свертывании содержимого), вместо того, чтобы ссылаться на новые страницы или разделы на текущей странице, этим ссылкам должны быть соответствующим образом присвоены role="button", чтобы надлежащим образом передать их цели вспомогательным технологиям, таким как скринридеры.
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">Outline кнопки
Нуждна кнопка, но не цвета фона? Замените классы модификаторов по умолчанию на .btn-outline-*, чтобы удалить все фоновые изображения и цвета на любой кнопке.
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>Размеры
Необычные большие или маленькие кнопки? Добавьте .btn-lg или .btn-sm для дополнительных размеров.
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button><button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>Создайте кнопки уровня блока, те, которые охватывают всю ширину родителя, добавив .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>Активное состояние
Кнопки будут отображаться при нажатии (с более темным фоном, более темной рамкой и вставкой тени), когда они активны. Не нужно добавлять класс к <button>s поскольку они используют псевдокласс. Тем не менее, вы все равно можете принудительно использовать тот же активный вид с .active (и включать атрибут aria-pressed="true"), если вам нужно будет программно копировать состояние.
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>Отключенное состояние
Сделайте кнопки неактивными, добавив логический атрибут disabled в любой элемент <button>.
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>Отключенные кнопки с использованием элемента <a> ведут себя немного по-другому:
<a>s не поддерживают атрибутdisabled, поэтому вы должны добавить класс.disabled, чтобы сделать его визуально видимым отключенным.- Некоторые удобные для будущего стили включены для отключения всех
pointer-eventsна кнопках привязки. В браузерах, которые поддерживают это свойство, вы вообще не увидите отключенный курсор. - Отключенные кнопки должны включать атрибут
aria-disabled="true", чтобы указать состояние элемента для вспомогательных технологий.
<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>Предостережение функциональности ссылок
Класс .disabled использует pointer-events: none чтобы попытаться отключить функциональность ссылки <a>s, но это свойство CSS еще не стандартизировано. Кроме того, даже в браузерах, которые поддерживают pointer-events: none, навигация клавиатуры остается неизменной, что означает, что зрячие пользователи клавиатуры и пользователи вспомогательных технологий все равно смогут активировать эти ссылки. Поэтому, чтобы быть в безопасности, добавьте атрибут tabindex="-1" в эти ссылки (чтобы они не получали фокус клавиатуры) и используйте настраиваемый JavaScript, чтобы отключить их функциональность.
Плагин кнопок
Делайте больше с помощью кнопок. Управляйте состояниями кнопки или создавайте группы кнопок для большего количества компонентов, таких как панели инструментов.
Переключить состояния
Добавьте data-toggle="button" для переключения active состояния кнопки. Если вы предварительно переключаете кнопку, вы должны вручную добавить класс .active и aria-pressed="true" на <button>.
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
Single toggle
</button>Флажки и переключатели
Стили Bootstrap .button могут применяться к другим элементам, таким как <label>, чтобы обеспечить переключение стиля кнопки флажка или переключателя. Добавьте data-toggle="buttons" в .btn-group, содержащую эти измененные кнопки, чтобы включить их соответствующие стили.
Проверенное состояние этих кнопок обновляется только при click событии на кнопке. Если вы используете другой метод для обновления входных данных, например, с помощью <input type="reset"> или вручную применяя checked свойство ввода, вам нужно вручную переключить .active на <label>.
Обратите внимание, что кнопки с предварительной проверкой требуют, чтобы вы вручную добавили класс .active в тег <label>.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div><div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
</label>
</div>Методы
| Метод | Описание |
|---|---|
$().button('toggle') |
Включает состояние push. Придает кнопке вид, который был активирован. |