Копчиња

Користете ги прилагодените стилови на копчиња на 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>

Методи