Дугмад

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

На овој страници

Примери

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

хтмл

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

Преношење значења помоћним технологијама

Коришћење боје за додавање значења пружа само визуелну индикацију, која се неће пренети корисницима помоћних технологија – као што су читачи екрана. Уверите се да су информације означене бојом или очигледне из самог садржаја (нпр. видљиви текст), или су укључене путем алтернативних средстава, као што је додатни текст скривен .visually-hiddenкласом.

Онемогућите преламање текста

Ако не желите да се текст дугмета премота, можете додати .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>

Можете чак и да направите сопствену прилагођену величину помоћу ЦСС променљивих:

хтмл

<button type="button" class="btn btn-primary"
        style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
  Custom button
</button>

Дисаблед стате

Нека дугмад изгледају неактивна додавањем disabledлогичког атрибута било ком <button>елементу. Онемогућена дугмад су се pointer-events: noneприменила на, спречавајући покретање стања лебдења и активних стања.

хтмл

<button type="button" class="btn btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary" disabled>Button</button>
<button type="button" class="btn btn-outline-primary" disabled>Primary button</button>
<button type="button" class="btn btn-outline-secondary" disabled>Button</button>

Онемогућена дугмад која користе <a>елемент понашају се мало другачије:

<a>с не подржавају disabledатрибут, тако да морате додати .disabledкласу да би визуелно изгледала онемогућена.
Неки стилови прилагођени будућности су укључени да би се онемогућила сва pointer-eventsпричврсна дугмад.
Коришћење онемогућених дугмади <a>треба да садржи aria-disabled="true"атрибут који указује на стање елемента помоћним технологијама.
Онемогућена дугмад која се користе <a> не би требало да садрже hrefатрибут.

Примарна веза Линк

хтмл

<a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary 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 disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

Блокирај дугмад

Креирајте снопове „блокираних дугмади“ пуне ширине као што су они у Боотстрап 4 помоћу мешавине наших услужних програма за приказ и празнине. Коришћењем услужних програма уместо класа специфичних за дугмад, имамо много већу контролу над размаком, поравнањем и одзивним понашањем.

хтмл

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Овде креирамо прилагодљиву варијацију, почевши од вертикално наслаганих дугмади до mdтачке прекида, где .d-md-blockзамењује .d-gridкласу, чиме се поништава gap-2услужни програм. Промените величину прегледача да бисте видели како се мењају.

хтмл

<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Можете подесити ширину дугмади блока помоћу класа ширине колоне мреже. На пример, за „дугме за блокирање“ половине ширине користите .col-6. Центрирајте га и хоризонтално помоћу .mx-auto.

хтмл

<div class="d-grid gap-2 col-6 mx-auto">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Додатни услужни програми се могу користити за подешавање поравнања дугмади када су хоризонтални. Овде смо узели наш претходни пример са одзивом и додали неке флексибилне услужне програме и услужни програм маргине на дугме да бисмо поравнали дугмад удесно када више нису наслагани.

хтмл

<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button class="btn btn-primary me-md-2" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Додатак за дугме

Додатак за дугме вам омогућава да креирате једноставна дугмад за укључивање/искључивање.

Визуелно, ова дугмад за пребацивање су идентична дугмадима за избор у пољу за потврду . Међутим, помоћне технологије их преносе другачије: преклопници поља за потврду ће читачи екрана најавити као „потврђене“/„непотврђене“ (пошто су, упркос свом изгледу, у основи и даље поља за потврду), док ће ови тастери за пребацивање бити најављени као „дугме“/„дугме притиснуто“. Избор између ова два приступа зависиће од типа прекидача који креирате и да ли ће прекидач имати смисла за кориснике када се објави као поље за потврду или као стварно дугме.

Пребаци државе

Додајте data-bs-toggle="button"да бисте променили стање дугмета active. Ако унапред укључујете дугме, морате ручно да додате .activeкласу и aria-pressed="true" да обезбедите да се она на одговарајући начин преноси помоћним технологијама.

хтмл

<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>

Пребаци везу Активна преклопна веза Онемогућена преклопна веза

хтмл

<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>

Методе

Можете креирати инстанцу дугмета помоћу конструктора дугмади, на пример:

const bsButton = new bootstrap.Button('#myButton')

Метод	Опис
`dispose`	Уништава дугме елемента. (Уклања сачуване податке на ДОМ елементу)
`getInstance`	Статичка метода која вам омогућава да добијете инстанцу дугмета повезана са ДОМ елементом, можете је користити овако: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	Статичка метода која враћа инстанцу дугмета придружену ДОМ елементу или креира нову у случају да није иницијализована. Можете га користити овако: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	Пребацује стање притиска. Даје дугмету изглед да је активирано.

На пример, да бисте укључили сва дугмад

document.querySelectorAll('.btn').forEach(buttonElement => {
  const button = bootstrap.Button.getOrCreateInstance(buttonElement)
  button.toggle()
})

ЦСС

Променљиве

Додато у в5.2.0

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

  --#{$prefix}btn-padding-x: #{$btn-padding-x};
  --#{$prefix}btn-padding-y: #{$btn-padding-y};
  --#{$prefix}btn-font-family: #{$btn-font-family};
  @include rfs($btn-font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-font-weight: #{$btn-font-weight};
  --#{$prefix}btn-line-height: #{$btn-line-height};
  --#{$prefix}btn-color: #{$body-color};
  --#{$prefix}btn-bg: transparent;
  --#{$prefix}btn-border-width: #{$btn-border-width};
  --#{$prefix}btn-border-color: transparent;
  --#{$prefix}btn-border-radius: #{$btn-border-radius};
  --#{$prefix}btn-hover-border-color: transparent;
  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
  --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);

Свака .btn-*класа модификатора ажурира одговарајуће ЦСС променљиве да би минимизирала додатна ЦСС правила помоћу наших button-variant(), button-outline-variant(), и button-size()миксина.

Ево примера прављења прилагођене .btn-*класе модификатора као што радимо за дугмад јединствена за наше документе тако што смо поново доделили Боотстрап-ове ЦСС променљиве мешавином наших сопствених ЦСС и Сасс променљивих.

.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet);
  --bs-btn-border-color: var(--bd-violet);
  --bs-btn-border-radius: .5rem;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}

Сасс варијабле

$btn-padding-y:               $input-btn-padding-y;
$btn-padding-x:               $input-btn-padding-x;
$btn-font-family:             $input-btn-font-family;
$btn-font-size:               $input-btn-font-size;
$btn-line-height:             $input-btn-line-height;
$btn-white-space:             null; // Set to `nowrap` to prevent text wrapping

$btn-padding-y-sm:            $input-btn-padding-y-sm;
$btn-padding-x-sm:            $input-btn-padding-x-sm;
$btn-font-size-sm:            $input-btn-font-size-sm;

$btn-padding-y-lg:            $input-btn-padding-y-lg;
$btn-padding-x-lg:            $input-btn-padding-x-lg;
$btn-font-size-lg:            $input-btn-font-size-lg;

$btn-border-width:            $input-btn-border-width;

$btn-font-weight:             $font-weight-normal;
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
$btn-focus-width:             $input-btn-focus-width;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow;
$btn-disabled-opacity:        .65;
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125);

$btn-link-color:              var(--#{$prefix}link-color);
$btn-link-hover-color:        var(--#{$prefix}link-hover-color);
$btn-link-disabled-color:     $gray-600;

// Allows for customizing button radius independently from global border radius
$btn-border-radius:           $border-radius;
$btn-border-radius-sm:        $border-radius-sm;
$btn-border-radius-lg:        $border-radius-lg;

$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$btn-hover-bg-shade-amount:       15%;
$btn-hover-bg-tint-amount:        15%;
$btn-hover-border-shade-amount:   20%;
$btn-hover-border-tint-amount:    10%;
$btn-active-bg-shade-amount:      20%;
$btn-active-bg-tint-amount:       20%;
$btn-active-border-shade-amount:  25%;
$btn-active-border-tint-amount:   10%;

Сасс микинс

Постоје три миксина за дугмад: мешавине варијанте дугмета и обриса дугмади (оба заснована на $theme-colors), плус миксин величине дугмета.

@mixin button-variant(
  $background,
  $border,
  $color: color-contrast($background),
  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
  $hover-color: color-contrast($hover-background),
  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
  $active-color: color-contrast($active-background),
  $disabled-background: $background,
  $disabled-border: $border,
  $disabled-color: color-contrast($disabled-background)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-bg: #{$background};
  --#{$prefix}btn-border-color: #{$border};
  --#{$prefix}btn-hover-color: #{$hover-color};
  --#{$prefix}btn-hover-bg: #{$hover-background};
  --#{$prefix}btn-hover-border-color: #{$hover-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$disabled-color};
  --#{$prefix}btn-disabled-bg: #{$disabled-background};
  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
}

@mixin button-outline-variant(
  $color,
  $color-hover: color-contrast($color),
  $active-background: $color,
  $active-border: $color,
  $active-color: color-contrast($active-background)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-border-color: #{$color};
  --#{$prefix}btn-hover-color: #{$color-hover};
  --#{$prefix}btn-hover-bg: #{$active-background};
  --#{$prefix}btn-hover-border-color: #{$active-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$color};
  --#{$prefix}btn-disabled-bg: transparent;
  --#{$prefix}btn-disabled-border-color: #{$color};
  --#{$prefix}gradient: none;
}

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  --#{$prefix}btn-padding-y: #{$padding-y};
  --#{$prefix}btn-padding-x: #{$padding-x};
  @include rfs($font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-border-radius: #{$border-radius};
}

Сасс петље

Варијанте дугмади (за обична и обрисна дугмад) користе своје одговарајуће мешавине са нашом $theme-colorsмапом за генерисање класа модификатора у scss/_buttons.scss.

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @if $color == "light" {
      @include button-variant(
        $value,
        $value,
        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
        $active-background: shade-color($value, $btn-active-bg-shade-amount),
        $active-border: shade-color($value, $btn-active-border-shade-amount)
      );
    } @else if $color == "dark" {
      @include button-variant(
        $value,
        $value,
        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
        $active-background: tint-color($value, $btn-active-bg-tint-amount),
        $active-border: tint-color($value, $btn-active-border-tint-amount)
      );
    } @else {
      @include button-variant($value, $value);
    }
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}