Кнопки

Используйте настраиваемые стили кнопок Bootstrap для действий в формах, диалоговых окнах и т.п. с поддержкой нескольких размеров, состояний и т.д.

karkas-na-veka.ru

Реклама

Дома от «Каркас на Века». Теплые одноэтажные

Примеры

Bootstrap имеет некоторые предопределенные стили кнопок, каждый из которых имеет свою семантическую цель, и имеет дополнительные параметры для большего контроля и гибкости.

<buttontype="button"class="btn btn-primary">Primary</button><buttontype="button"class="btn btn-secondary">Secondary</button><buttontype="button"class="btn btn-success">Success</button><buttontype="button"class="btn btn-danger">Danger</button><buttontype="button"class="btn btn-warning">Warning</button><buttontype="button"class="btn btn-info">Info</button><buttontype="button"class="btn btn-light">Light</button><buttontype="button"class="btn btn-dark">Dark</button><buttontype="button"class="btn btn-link">Link</button>

Отключение переноса текста

Если вы не хотите переносить текст кнопки, вы можете добавить к ней класс .text-nowrap. В Sass вы можете установить $btn-white-space: nowrap чтобы отключить перенос текста для каждой кнопки.

Тэг «кнопка»

Классы .btn созданы для использования с элементом <button>. Однако их также можно использовать внутри <a> или <input> (хотя из-за этого некоторые браузеры могут рендерить это немного иначе).

При использовании классов .btn в элементах <a>, которые в данном случае используются не как линк, ведущий на новые страницы или как якорь, а как триггер внутристраничной функциональности (такой как сворачивание содержимого), необходимо задать этим <a> атрибут role="button" для правильного поведения в случае применения вспомогательных технологий таких как «экранная читалка».

<aclass="btn btn-primary"href="#"role="button">Link</a><buttonclass="btn btn-primary"type="submit">Button</button><inputclass="btn btn-primary"type="button"value="Input"><inputclass="btn btn-primary"type="submit"value="Submit"><inputclass="btn btn-primary"type="reset"value="Reset">

Контурные кнопки (без фона)

Нужна кнопка, но без «тяжелых» фоновых цветов? Замените дефолтные классы-модификаторы на классы .btn-outline-* для удаления всех фоновых изображений и цветов в любой кнопке.

<buttontype="button"class="btn btn-outline-primary">Primary</button><buttontype="button"class="btn btn-outline-secondary">Secondary</button><buttontype="button"class="btn btn-outline-success">Success</button><buttontype="button"class="btn btn-outline-danger">Danger</button><buttontype="button"class="btn btn-outline-warning">Warning</button><buttontype="button"class="btn btn-outline-info">Info</button><buttontype="button"class="btn btn-outline-light">Light</button><buttontype="button"class="btn btn-outline-dark">Dark</button>

Размеры

Нужно изменить размеры кнопки? Добавьте в нее классы .btn-lg или .btn-sm для получения дополнительных размеров.

<buttontype="button"class="btn btn-primary btn-lg">Большая кнопка</button><buttontype="button"class="btn btn-secondary btn-lg">Большая кнопка</button>

<buttontype="button"class="btn btn-primary btn-sm">Маленькая кнопка</button><buttontype="button"class="btn btn-secondary btn-sm">Маленькая кнопка</button>

Создайте кнопки блочного уровня – которые занимают полную ширину родительского элемента – добавлением класса .btn-block.

<buttontype="button"class="btn btn-primary btn-lg btn-block">Кнопка блочного уровня</button><buttontype="button"class="btn btn-secondary btn-lg btn-block">Кнопка блочного уровня</button>

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

Когда кнопки нажимают, появляется более темный фон, границы и внутренняя тень. В BS4 нет необходимости добавлять класс в <button>, т.к. тут используется псевдо-класс. Однако вы можете вызвать «активное» поведение и соответствующий внешний вид, добавив класс .active (и включив атрибут aria-pressed="true") , когда необходимо прямо объявить такое поведение.

<ahref="#"class="btn btn-primary btn-lg active"role="button"aria-pressed="true">Первичная ссылка</a><ahref="#"class="btn btn-secondary btn-lg active"role="button"aria-pressed="true">Ссылка</a>

«Отключенние» кнопки

Заставьте кнопки выглядеть «неактивными» добавлением булеанова атрибута disabled к любому элементу <button>.

<buttontype="button"class="btn btn-lg btn-primary"disabled>Первичная кнопка</button><buttontype="button"class="btn btn-secondary btn-lg"disabled>Кнопка</button>

«Отключенные» кнопки, созданные из элемента <a>, ведут себя немного иначе:

• Элемент <a> не поддерживает атрибут disabled, так что для соответствующих свойств вместо него надо добавлять класс .disabled;
• Некоторые future-friendly стили, которые поддерживаются не всеми юзер-агентами, (т.е. «возможно будут поддерживаться в будущем») включены в <a> для отключения всех событий pointer-events на кнопках-якорях. В браузерах, которые поддерживают это свойство, вы вовсе не увидите деактивированный курсор.
• Отключенные кнопки должны содержать атрибут aria-disabled="true" для указания вспомогательным технологиям состояния элемента.

<ahref="#"class="btn btn-primary btn-lg disabled"tabindex="-1"role="button"aria-disabled="true">Первичная ссылка</a><ahref="#"class="btn btn-secondary btn-lg disabled"tabindex="-1"role="button"aria-disabled="true">Ссылка</a>

Плагины кнопок

Контролируйте состояния кнопок или создавайте группы кнопок для компонентов, таких как «тулбары».

Переключение состояний

Добавьте data-toggle="button" для переключения на активное состояние кнопки. Если вы делаете это, вы должны вручную добавить в <button> класс .active и aria-pressed="true".

<buttontype="button"class="btn btn-primary"data-toggle="button"aria-pressed="false"> Одиночный переключатель
</button>

Переключатели («галочки») и «кнопки радио»

Стили классов .button могут применяться к прочим элементам, таким как <label>, для создания переключателей («галочек») или «кнопок радио». Добавьте data-toggle="buttons" к классу .btn-group, содержащему эти измененные кнопки, для включения «переключателей» в их соответствующих стилях.

Состояние выбора (т.е. когда ставится «галочка») обновляется лишь событием клика click по кнопке. Если вы используете другой метод для обновления ввода – например <input type="reset"> или вручную применяя свойство ввода checked – вам потребуется вручную применить класс .active к <label>.

Заметьте, что кнопки с предустановленным выбором требуют вручную добавить класс .active к элементу ввода <label>.

<divclass="btn-group-toggle"data-toggle="buttons"><labelclass="btn btn-secondary active"><inputtype="checkbox"checked> Выбрано </label></div>

<divclass="btn-group btn-group-toggle"data-toggle="buttons"><labelclass="btn btn-secondary active"><inputtype="radio"name="options"id="option1"checked> Активная </label><labelclass="btn btn-secondary"><inputtype="radio"name="options"id="option2"> Переключатель </label><labelclass="btn btn-secondary"><inputtype="radio"name="options"id="option3"> Переключатель </label></div>

Методы