Düwmeler

“Bootstrap” -yň ýörite düwme görnüşlerini formalarda, gepleşiklerde we başga-da köp ululyk, ştat we ş.m. goldaw bilen ulanyň.

Bu sahypada

Mysallar

“Bootstrap” birnäçe öňünden kesgitlenen düwme stilini öz içine alýar, hersiniň öz semantik maksadyna hyzmat edýär we has köp gözegçilik üçin birnäçe goşmaçalar goýulýar.

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>

Kömekçi tehnologiýalara many bermek

Reňk ulanmak manysyny goşmak üçin diňe ekran okyjylary ýaly kömekçi tehnologiýalary ulanyjylara ýetirip bolmajak wizual görkezme berýär. Reňk bilen görkezilen maglumatlaryň mazmunyň özünden (meselem, görünýän tekstden) aç-açan ýa-da .visually-hiddensynp bilen gizlenen goşmaça tekst ýaly alternatiw usullar arkaly girizilendigine göz ýetiriň.

Tekstiň örtügini öçüriň

Düwme tekstiniň örtülmegini islemeýän bolsaňyz, düwmä .text-nowrapsynpy goşup bilersiňiz. Sass-da, $btn-white-space: nowrapher düwme üçin tekst örtügini öçürip bilersiňiz.

Düwme bellikleri

Sapaklar element .btnbilen ulanmak üçin niýetlenendir . <button>Şeýle-de bolsa, bu synplary <a>ýa -da <input>elementleri ulanyp bilersiňiz (käbir brauzerler birneme üýtgeşik terjime edip bilerler).

<a>Häzirki sahypadaky täze sahypalara ýa-da bölümlere baglanyşyk däl-de, sahypanyň işlemegine itergi berýän elementler boýunça düwme sapaklaryny ulananyňyzda (bu mazmunyň çökmegi ýaly), bu baglanyşyklara role="button"kömekçi tehnologiýalar ýaly maksatlaryna laýyk gelmek üçin berilmelidir. ekran okyjylary.

Baglanyşyk

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

Çyzgy düwmeleri

Bir düwmä mätäç, ýöne getirýän uly fon reňkleri dälmi? .btn-outline-*Islendik düwmedäki ähli fon suratlaryny we reňklerini aýyrmak üçin deslapky üýtgediji synplary çalyşyň .

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>

Düwmeleriň stilleriniň käbiri birneme açyk reňk ulanýar we ýeterlik kontrast bolmagy üçin diňe garaňky fonda ulanylmaly.

Ölçegler

Uly ýa-da kiçi düwmeler barmy? Goşmaça ululyklar üçin .btn-lggoşuň ..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>

Hatda öz ölçegleriňizi CSS üýtgeýjileri bilen hem öwrüp bilersiňiz:

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>

Maýyp ýagdaý

Islendik elemente disabledboolean atributyny goşup, düwmeleri hereketsiz görüň . Öçürilen we işjeň ýagdaýlaryň döremeginiň öňüni alyp, <button>ýapyk düwmeler ulanylýar.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>

Elementi ulanýan ýapyk düwmeler <a>birneme üýtgeşik hereket edýär:

<a>s atributy goldamaýar , şonuň üçin synpy wizual görnüşde görkezmek üçin disabledgoşmaly ..disabled
Geljekdäki dostlukly stilleriň hemmesini pointer-eventslabyr düwmelerinde öçürmek üçin girizilýär.
Ulanylýan ýapyk düwmeler , kömekçi tehnologiýalara elementiň ýagdaýyny görkezmek üçin atributy <a>öz içine almalydyr .aria-disabled="true"
Ulanylan ýapyk düwmeler atributy öz içine <a> almaly däldir .href

Esasy baglanyşyk Baglanyşyk

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>

Baglanyşyk funksiýasy

hrefAýratynlygy ýapyk baglanyşykda saklamaly bolýan ýagdaýlary ýapmak üçin .disabledsynp pointer-events: none, baglanyşyk funksiýalaryny öçürmäge synanyşýar <a>. Bu CSS häsiýetiniň entek HTML üçin standartlaşdyrylmandygyny, ýöne häzirki zaman brauzerleriň hemmesiniň muny goldaýandygyny ýadyňyzdan çykarmaň. Mundan başga-da, goldaýan brauzerlerde-de pointer-events: noneklawiatura nawigasiýasy täsirsiz galýar, ýagny görýän klawiatura ulanyjylary we kömekçi tehnologiýalary ulanýanlar bu baglanyşyklary işjeňleşdirip bilerler. Howpsuz bolmak üçin , bu baglanyşyklara klawiatura fokusyny almazlyk üçin aria-disabled="true"bir aýratynlyk goşuň we işleýşini düýbünden ýapmak üçin ýörite JavaScript ulanyň.tabindex="-1"

Esasy baglanyşyk Baglanyşyk

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>

Blok düwmeleri

Ekranymyz we boşluk hyzmatlarymyzyň garyndysy bilen Bootstrap 4-de bolşy ýaly doly giňlikdäki “blok düwmelerini” dörediň. Düwmeleriň aýratyn synplarynyň ýerine kömekçi enjamlary ulanmak bilen, aralyklara, deňleşdirmelere we täsirli hereketlere has uly gözegçilik edýäris.

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>

mdBu ýerde, synpy çalyşýan nokada çenli dikligine diklenen düwmelerden başlap .d-md-block, synpy çalyşýan .d-grid, şeýlelik bilen gap-2peýdalylygy ýitirýän täsirli üýtgeşiklik döredýäris. Brauzeriňiziň üýtgemegini görmek üçin ölçegini üýtgediň.

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>

Blok düwmeleriniň giňligini gözenegiň sütüniniň giňligi bilen sazlap bilersiňiz. Mysal üçin, ýarym ini “blok düwmesi” üçin ulanyň .col-6. Ony keseligine merkezleşdiriň .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>

Gorizontal bolanda düwmeleriň deňleşmegini sazlamak üçin goşmaça kömekçi enjamlar ulanylyp bilner. Bu ýerde öňki jogap beriji mysalymyzy aldyk we düwmeleri indi ýerleşdirilmedik ýagdaýynda sag tekizlemek üçin düwmä birneme flex kömekçi we margin kömekçi goşduk.

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>

Düwme plugin

Düwme plugin, açmak / öçürmek düwmelerini ýönekeý döretmäge mümkinçilik berýär.

Görnüşe görä, bu üýtgetmek düwmeleri bellik gutusyny üýtgetmek düwmeleri bilen birmeňzeşdir . Şeýle-de bolsa, kömekçi tehnologiýalar arkaly başgaça ýetirilýär: bellik gutusynyň açylmagy ekrany okyjylar tarapyndan “barlanylýar” / “barlanmaýar” diýlip yglan ediler (sebäbi daş keşbine garamazdan, olar henizem bellik gutusydyr), emma bu açar düwmeleri yglan ediler “Düwme” / “düwme basyldy”. Bu iki çemeleşmäniň arasyndaky saýlama, döredýän açar görnüşiňize we bellik gutusy ýa-da hakyky düwme hökmünde yglan edilende ulanyjylaryň manysynyň ýa-da ýokdugyna baglydyr.

Toggle aýdýar

data-bs-toggle="button"Bir düwmäniň ýagdaýyny üýtgetmek üçin goşuň active. Bir düwmäni öňünden üýtgedýän bolsaňyz, .activesynpy el bilen goşmaly we aria-pressed="true" kömekçi tehnologiýalara laýyk berilýändigine göz ýetirmeli.

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>

Baglanyşyk Işjeň üýtgetmek Baglanyşyk öçürildi

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>

Usullar

Düwme konstruktory bilen düwme meselesini döredip bilersiňiz, mysal üçin:

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

Usul	Düşündiriş
`dispose`	Bir elementiň düwmesini ýok edýär. (DOM elementindäki saklanan maglumatlary aýyrýar)
`getInstance`	DOM elementi bilen baglanyşykly düwme mysalyny almaga mümkinçilik berýän statiki usul, ony şeýle ulanyp bilersiňiz : `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	DOM elementi bilen baglanyşykly düwmäni mysal getirýän ýa-da başlamadyk ýagdaýynda täzesini döredýän statiki usul. Muny şeýle ulanyp bilersiňiz : `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	Toggles ýagdaýy basýar. Düwmä işjeňleşdirilen görnüşini berýär.

Mysal üçin, ähli düwmeleri üýtgetmek

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

CSS

Üýtgeýjiler

V5.2.0 goşuldy

“Bootstrap” -yň ösýän CSS üýtgeýjiler çemeleşmesiniň bir bölegi hökmünde, düwmeler indi .btnhakyky wagtlaýyn özleşdirmek üçin ýerli CSS üýtgeýjileri ulanýarlar. CSS üýtgeýjileriniň bahalary Sass arkaly kesgitlenýär, şonuň üçin Sass sazlamasy henizem goldanýar.

  --#{$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);

Her üýtgediji synp , goşmaça CSS düzgünlerini biziň we garyndylarymyz .btn-*bilen azaltmak üçin degişli CSS üýtgeýjileri täzeleýär.button-variant()button-outline-variant()button-size()

.btn-*Ine, “ Bootstrap” -yň CSS üýtgeýjilerini öz CSS we Sass üýtgeýjilerimiziň garyndysy bilen täzeden belläp, resminamalarymyza mahsus düwmeler üçin edişimiz ýaly adaty üýtgediji synp gurmagyň mysaly .

.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 üýtgeýjileri

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

Düwmeler üçin üç sany garyndy bar: düwme we düwmäniň çyzgy görnüşi garyndysy (ikisine-de esaslanýar $theme-colors) we düwmäniň ululygyndaky garyndy.

@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 aýlawlary

$theme-colorsDüwmeleriň görnüşleri (yzygiderli we çyzgy düwmeleri üçin) üýtgeýän synplary döretmek üçin kartamyz bilen degişli garyndylaryny ulanýarlar 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);
  }
}