Дугмад

Користите Боотстрап-ове прилагођене стилове дугмади за радње у обрасцима, дијалозима и још много тога уз подршку за више величина, стања и још много тога.

Примери

Боотстрап укључује неколико унапред дефинисаних стилова дугмади, од којих сваки служи својој семантичкој сврси, са неколико додатака за већу контролу.

<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класу дугмету. У Сасс-у можете подесити $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>с пошто они користе псеудо-класу . Међутим, и даље можете форсирати исти активни изглед са .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>с не подржавају 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>с. Имајте на уму да ово ЦСС својство још није стандардизовано за ХТМЛ, али га подржавају сви модерни претраживачи. Поред тога, чак и у прегледачима који подржавају pointer-events: noneнавигација тастатуром остаје непромењена, што значи да ће корисници тастатуре који виде и корисници помоћних технологија и даље моћи да активирају ове везе. Дакле, да бисте били сигурни, поред aria-disabled="true", укључите и tabindex="-1"атрибут на ове везе како бисте спречили да примају фокус тастатуре и користите прилагођени ЈаваСцрипт да бисте потпуно онемогућили њихову функционалност.

<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>

Поље за потврду и радио дугмад

Боотстрап-ови .buttonстилови се могу применити на друге елементе, као што је <label>с, да би се омогућило пребацивање у поље за потврду или дугме за радио стил. Додајте data-toggle="buttons"у а .btn-groupкоји садржи та модификована дугмад да бисте омогућили њихово понашање при пребацивању преко ЈаваСцрипт-а и додајте .btn-group-toggleда бисте стилизовали <input>с унутар својих дугмади. Имајте на уму да можете креирати појединачна дугмад са напајањем или групе њих.

Проверено стање ових дугмади се ажурира само путем 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>

Методе