in English

Тугмаҳо

Услубҳои фармоишии тугмаҳои 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>

Интиқоли маъно ба технологияҳои ёрирасон

Истифодаи ранг барои илова кардани маъно танҳо нишонаи визуалиро таъмин мекунад, ки он ба корбарони технологияҳои ёрирасон, ба монанди экрани хонандагон, интиқол дода намешавад. Боварӣ ҳосил кунед, ки иттилооте, ки бо ранг нишон дода шудааст, ё аз худи мундариҷа (масалан, матни намоён) равшан аст ё тавассути воситаҳои алтернативӣ, ба монанди матни иловагии бо .visually-hiddenсинф пинҳоншуда дохил карда мешавад.

Печондани матнро ғайрифаъол кунед

Агар шумо нахоҳед, ки матни тугма печонида шавад, шумо метавонед .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>

Ҳолати ғайрифаъол

Бо илова кардани 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>s атрибутро дастгирӣ намекунад disabled, аз ин рӯ шумо бояд .disabledсинфро илова кунед, то ки он ба таври визуалӣ ғайрифаъол намояд.
Баъзе услубҳои барои оянда дӯстона барои хомӯш кардани ҳама pointer-eventsтугмаҳои лангар дохил карда шудаанд.
Тугмаҳои ғайрифаъол бояд aria-disabled="true"атрибутро барои нишон додани ҳолати элемент ба технологияҳои ёрирасон дар бар гиранд.

Пайванди ибтидоӣ Пайванд

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

Огоҳӣ дар бораи функсияи пайванд

.disabledСинф pointer-events: noneбарои хомӯш кардани функсияи истиноди s истифода мебарад <a>, аммо он амволи CSS ҳанӯз стандартизатсия нашудааст. Илова бар ин, ҳатто дар браузерҳое, ки дастгирӣ мекунанд pointer-events: none, паймоиши клавиатура бетаъсир мемонад, яъне корбарони клавиатура ва корбарони технологияҳои ёрирасон метавонанд ин истинодҳоро фаъол созанд. Ҳамин тавр, барои бехатар будан, ба ғайр аз aria-disabled="true", инчунин tabindex="-1"атрибутро дар ин истинодҳо дохил кунед, то онҳо аз гирифтани фокуси клавиатура пешгирӣ кунанд ва JavaScript-и фармоиширо барои хомӯш кардани функсияҳои онҳо комилан истифода баред.

Тугмаҳои блок

Стекҳои ҷавобгӯи васеъ ва "тугмаҳои блок" -ро ба монанди онҳое, ки дар Bootstrap 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-gridgap-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 href="#" class="btn btn-primary disabled" tabindex="-1" 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`	Тугмаи элементро нест мекунад. (Маълумоти захирашударо дар элементи DOM нест мекунад)
`getInstance`	Усули статикӣ, ки ба шумо имкон медиҳад, ки мисоли тугмаи марбут ба унсури DOM гиред, шумо метавонед онро чунин истифода баред:`bootstrap.Button.getInstance(element)`
`getOrCreateInstance`	Усули статикӣ, ки мисоли тугмаи марбут ба унсури DOM-ро бармегардонад ё дар сурати оғоз нашудани он як нав эҷод мекунад. Шумо метавонед онро чунин истифода баред:`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);
  }
}