Дугмад

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

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

Примери

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

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

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

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

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

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

Креирајте снопове „блокираних дугмади“ пуне ширине као што су они у Боотстрап 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" autocomplete="off">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">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>

Методе

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

var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)

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

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

var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
  var button = new bootstrap.Button(button)
  button.toggle()
})

Сасс

Променљиве

$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:              $link-color;
$btn-link-hover-color:        $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)
) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;
  @include box-shadow($btn-box-shadow);

  &:hover {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
  }

  .btn-check:focus + &,
  &:focus {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
    @if $enable-shadows {
      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
    } @else {
      // Avoid using mixin so we can pass custom focus shadow properly
      box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
    }
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  .show > &.dropdown-toggle {
    color: $active-color;
    background-color: $active-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    border-color: $active-border;

    &:focus {
      @if $enable-shadows {
        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
      }
    }
  }

  &:disabled,
  &.disabled {
    color: $disabled-color;
    background-color: $disabled-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    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)
) {
  color: $color;
  border-color: $color;

  &:hover {
    color: $color-hover;
    background-color: $active-background;
    border-color: $active-border;
  }

  .btn-check:focus + &,
  &:focus {
    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  &.dropdown-toggle.show {
    color: $active-color;
    background-color: $active-background;
    border-color: $active-border;

    &:focus {
      @if $enable-shadows {
        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
      }
    }
  }

  &:disabled,
  &.disabled {
    color: $color;
    background-color: transparent;
  }
}

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  padding: $padding-y $padding-x;
  @include font-size($font-size);
  // Manually declare to provide an override to the browser default
  @include border-radius($border-radius, 0);
}

Петље

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

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

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