Кнопкалар

Ботстрапның махсус төймә стильләрен формаларда, диалогларда һәм башка зурлыклар, штатлар һәм башкалар ярдәмендә кулланыгыз.

Бу биттә

Мисаллар

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төймәгә класс өсти аласыз. Сасста сез $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>disableds атрибутны хупламый , шуңа күрә .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>. Игътибар итегез, бу 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

Variзгәрешләр

V5.2.0 өстәлде

Bootstrap үсешенең CSS үзгәрүчәнлеге алымы кысаларында, төймәләр хәзерге вакытта җирле 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);

Eachәрбер үзгәртүче класс тиешле CSS үзгәрүләрен яңарта , безнең һәм миксиннар .btn-*белән өстәмә CSS кагыйдәләрен киметү өчен .button-variant()button-outline-variant()button-size()

.btn-*Менә без үзебезнең CSS һәм Sass үзгәрүчәннәр катнашмасы белән Bootstrap'ның CSS үзгәрүчәннәрен үзгәртеп, документларыбызга хас булган төймәләр өчен эшләгән кебек , махсус үзгәртүче класс төзү мисалы .

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