Тугмаҳо

Услубҳои фармоишии тугмаҳои Bootstrap-ро барои амалҳо дар шаклҳо, муколамаҳо ва ғайра бо дастгирии андозаҳои гуногун, штатҳо ва ғайра истифода баред.

Дар ин саҳифа

Мисолхо

Bootstrap якчанд услубҳои пешакӣ муайяншудаи тугмаҳоро дар бар мегирад, ки ҳар кадоме ба ҳадафҳои семантикии худ хизмат мекунанд ва барои назорати бештар чанд ҷузъҳои иловагӣ гузошта шудаанд.

html

<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"то ҳадафи онҳо ба технологияҳои ёрирасон, ба монанди хонандагони экран.

Пайванд

html

<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-*, то ҳама тасвирҳо ва рангҳои пасзаминаро дар ҳама гуна тугма нест кунед.

html

<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барои андозаҳои иловагӣ.

html

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

html

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Шумо ҳатто метавонед андозаи фармоишии худро бо тағирёбандаҳои CSS тағир диҳед:

html

<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ғайрифаъол ба кор андохта шудаанд, ки аз ангезиши мавқеъ ва ҳолати фаъол пешгирӣ мекунанд.

html

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

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

html

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

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

html

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

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

Стекҳои ҷавобгӯи паҳнои пурраи "тугмаҳои блок" -ро ба монанди онҳое, ки дар Bootstrap 4 бо омехтаи дисплей ва утилитаҳои холии мо эҷод мекунанд, созед. Бо истифода аз утилитаҳо ба ҷои синфҳои мушаххаси тугмаҳо, мо назорати фосила, ҳамоҳангсозӣ ва рафтори посухгӯиро бештар дорем.

html

<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

html

<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Онро ба таври уфуқӣ бо , низ марказ кунед .

html

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

Утилитҳои иловагӣ метавонанд барои танзими ҳамоҳангсозии тугмаҳо ҳангоми уфуқӣ истифода шаванд. Дар ин ҷо мо намунаи қаблии ҷавобгарии худро гирифтем ва баъзе утилитаҳои фасеҳ ва утилитаи маржаро дар тугма илова кардем, то тугмаҳоро дар ҳолати дигар ҷамъ накунанд, ки тугмаҳоро ба рост ҳамоҳанг созанд.

html

<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" боварӣ ҳосил кунед, ки он ба технологияҳои ёрирасон интиқол дода мешавад.

html

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

Пайвастро иваз кунед Истиноди фаъол Истиноди гузариш ғайрифаъол

html

<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`	Тугмаи элементро нест мекунад. (Маълумоти захирашударо дар элементи DOM нест мекунад)
`getInstance`	Усули статикӣ, ки ба шумо имкон медиҳад, ки мисоли тугмаи марбут ба унсури DOM гиред, шумо метавонед онро чунин истифода баред: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	Усули статикӣ, ки як мисоли тугмаи марбут ба унсури DOM-ро бармегардонад ё дар сурати оғоз нашудани он як нав эҷод мекунад. Шумо метавонед онро чунин истифода баред: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	Ҳолати фишорро иваз мекунад. Тугма намуди зоҳириро медиҳад, ки он фаъол шудааст.

Масалан, барои иваз кардани ҳама тугмаҳо

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

CSS

Тағйирёбандаҳо

Дар v5.2.0 илова карда шудааст

Ҳамчун як қисми равиши тағирёбандаи CSS-и Bootstrap, тугмаҳо ҳоло тағирёбандаҳои маҳаллии CSS-ро .btnбарои мутобиқсозии мукаммали вақти воқеӣ истифода мебаранд. Арзишҳо барои тағирёбандаҳои CSS тавассути Sass муқаррар карда мешаванд, аз ин рӯ мутобиқсозии Sass ҳанӯз ҳам дастгирӣ карда мешавад.

  --#{$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-*синфи тағирдиҳанда тағирёбандаҳои мувофиқи CSS-ро навсозӣ мекунад, то қоидаҳои иловагии CSS-ро бо button-variant(), button-outline-variant(), ва button-size()миксинҳои мо кам кунад.

Ин аст мисоли сохтани .btn-*синфи тағирдиҳандаи фармоишӣ ба монанди мо барои тугмаҳои ба ҳуҷҷатҳои мо хос тавассути таъини тағирёбандаҳои CSS-и Bootstrap бо омехтаи тағирёбандаҳои CSS ва Sass худамон.

.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%)};
}

Тағйирёбандаҳои Sass

$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%;

Омехтаҳои Sass

Барои тугмаҳо се омехта мавҷуд аст: миксинҳои варианти контури тугмаҳо ва тугмаҳо (ҳарду бар асоси $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};
}

ҳалқаҳои Sass

Вариантҳои тугмаҳо (барои тугмаҳои муқаррарӣ ва контурӣ) омехтаҳои мувофиқи худро бо $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);
  }
}