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ň.
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-hidden
synp 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-nowrap
synpy goşup bilersiňiz. Sass-da, $btn-white-space: nowrap
her düwme üçin tekst örtügini öçürip bilersiňiz.
Düwme bellikleri
Sapaklar element .btn
bilen 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.
<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>
Ölçegler
Uly ýa-da kiçi düwmeler barmy? Goşmaça ululyklar üçin .btn-lg
goş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ý
disabled
Dü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 synpydisabled
goşmaly ..disabled
- Geljekdäki dostlukly stilleriň hemmesi
pointer-events
labyr 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.
<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: none
synanyşýar <a>
, ýöne CSS emlägi entek standartlaşdyrylanok. Mundan başga-da, goldaýan brauzerlerde-de pointer-events: none
klawiatura 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>
md
Bu ýerde, synpy çalyşýan nokada çenli dikligine diklenen düwmelerden başlap .d-md-block
, synpy çalyşýan .d-grid
, şeýlelik bilen gap-2
peý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.
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, .active
synpy 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>
<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-colors
Dü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);
}
}