Копчиња

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

Ознаки на копчињата

Класите .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копчиња за прицврстување. Во прелистувачите што го поддржуваат тоа својство, воопшто нема да го видите оневозможениот курсор.
• Оневозможените копчиња треба да го содржат 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>

Приклучок за копчиња

Направете повеќе со копчињата. Контролирајте ги состојбите на копчињата или креирајте групи на копчиња за повеќе компоненти како што се алатниците.

Вклучи состојби

Додај 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>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 autocomplete="off"> 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" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

Методи