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.

<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

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

<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

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

Maýyp ýagdaý

disabledDüwmeleri islendik <button>elemente boolean atributyny goşup hereketsiz görüň . pointer-events: noneÖçürilen we işjeň ýagdaýlaryň döremeginiň öňüni alyp, ýapyk düwmeler ulanylýar.

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

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

<a>s atributy goldamaýar , şonuň üçin wizual görnüşde görünmek üçin synpy disabledgoşmaly ..disabled
Geljekdäki dostlukly stilleriň hemmesi pointer-eventslabyr düwmelerinde öçürilýär.
Öçürilen düwmeler aria-disabled="true", kömekçi tehnologiýalara elementiň ýagdaýyny görkezmek üçin atributy öz içine almalydyr.

Esasy baglanyşyk Baglanyşyk

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

Baglanyşyk funksiýasy

Synp s baglanyşyk funksiýasyny .disabledöçürmäge pointer-events: nonesynanyşýar <a>, ýöne CSS emlägi entek standartlaşdyrylanok. 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"

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.

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

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

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

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

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

Baglanyşyk Işjeň açmak Baglanyşyk öçürildi

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

Usullar

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

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

Usul	Düşündiriş
`toggle`	Toggles ýagdaýy basýar. Düwmä işjeňleşdirilen görnüşini berýär.
`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)`

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

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

Sass

Üýtgeýjiler

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

Mixins

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

Aýlawlar

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