Гузікі

Выкарыстоўвайце ўласныя стылі кнопак 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"ў .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>

Метады