Бутони

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

Примери

Bootstrap включва няколко предварително дефинирани стила на бутони, всеки от които служи за собствена семантична цел, с няколко екстри, добавени за повече контрол.

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

<button type="button" class="btn btn-link">Link</button>

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

Ако не искате текстът на бутона да се обвива, можете да добавите .text-nowrapкласа към бутона. В Sass можете да настроите $btn-white-space: nowrapда деактивирате обвиването на текст за всеки бутон.

Етикети с бутони

Класовете .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">

Контурни бутони

Имате нужда от бутон, но не и от мощните фонови цветове, които носят? Заменете класовете модификатори по подразбиране с .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-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</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бутони за фиксиране. В браузъри, които поддържат това свойство, изобщо няма да видите деактивирания курсор.
• Използването на деактивирани бутони <a>трябва да включва aria-disabled="true"атрибута за указване на състоянието на елемента към помощните технологии.
• Използването на деактивирани бутони <a> не трябва да включва hrefатрибута.

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

Предупреждение относно функционалността на връзката

За да покрие случаите, когато трябва да запазите hrefатрибута на деактивирана връзка, .disabledкласът използва , pointer-events: noneза да се опита да деактивира функционалността на връзката на <a>s. Имайте предвид, че това CSS свойство все още не е стандартизирано за HTML, но всички съвременни браузъри го поддържат. В допълнение, дори в браузъри, които поддържат pointer-events: none, навигацията на клавиатурата остава незасегната, което означава, че зрящите потребители на клавиатура и потребителите на помощни технологии все още ще могат да активират тези връзки. Така че, за да сте в безопасност, в допълнение към aria-disabled="true", включете и tabindex="-1"атрибут в тези връзки, за да им попречите да получават фокус от клавиатурата, и използвайте персонализиран JavaScript, за да деактивирате напълно функционалността им.

<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

Плъгин за бутони

Правете повече с бутоните. Състояния на бутоните за управление или създаване на групи от бутони за повече компоненти като ленти с инструменти.

Превключване на състоянията

Добавете data-toggle="button", за да превключите activeсъстоянието на бутон. Ако превключвате предварително бутон, трябва ръчно да добавите .activeкласа и aria-pressed="true" към <button>.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

Квадратче за отметка и радио бутони

Стиловете на Bootstrap .buttonмогат да бъдат приложени към други елементи, като <label>s, за да осигурят превключване на бутона за отметка или радио стил. Добавете data-toggle="buttons"към a .btn-group, съдържащ тези модифицирани бутони, за да активирате поведението им при превключване чрез JavaScript и добавете .btn-group-toggle, за да стилизирате <input>s във вашите бутони. Обърнете внимание, че можете да създавате единични бутони с входно захранване или групи от тях.

Отметнатото състояние за тези бутони се актуализира само чрез clickсъбитие на бутона. Ако използвате друг метод за актуализиране на входа — например с <input type="reset">или чрез ръчно прилагане на checkedсвойството на входа — ще трябва да включите .activeръчно <label>.

Обърнете внимание, че предварително маркираните бутони изискват ръчно да добавите .activeкласа към входа <label>.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

Методи