Кнопкалар
Ботстрапның махсус төймә стильләрен формаларда, диалогларда һәм башка зурлыклар, штатлар һәм башкалар ярдәмендә кулланыгыз.
Мисаллар
Bootstrap берничә алдан билгеләнгән төймә стилен үз эченә ала, аларның һәрберсе үз семантик максатына хезмәт итә, берничә контроль өстәмә контроль өчен.
<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"
максатларын тиешенчә җиткерү өчен бирелергә тиеш. экран укучылары.
<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-*
Килешү үзгәртүче классларны теләсә нинди төймәдәге барлык фон рәсемнәрен һәм төсләрен бетерү өчен алыштырыгыз .
<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
өстәмә зурлыклар өчен.
<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>
Инвалид хәл
Теләсә нинди элементка disabled
буле атрибутын өстәп төймәләрне активсыз күрегез . <button>
Инвалид төймәләр pointer-events: none
кулланылды, хәрәкәтләнү һәм актив хәлләр килеп чыкмасын өчен.
<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>
<a>
Элемент ярдәмендә инвалид төймәләр бераз башкача эш итәләр:
<a>
disabled
s атрибутны хупламый , шуңа күрә.disabled
аны визуаль яктан инвалид итеп күрсәтү өчен класс өстәргә кирәк.- Киләчәктә файдалы стильләрнең барысы
pointer-events
да якорь төймәләрендә сүндерелгән. - Кулланылган инвалид төймәләр ярдәмче технологияләргә элементның торышын күрсәтү өчен атрибутны
<a>
кертергә тиеш .aria-disabled="true"
- Кулланылган инвалид төймәләр атрибутны кертергә
<a>
тиеш түгел .href
<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg 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 кулланыгыз.
<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>
Блок төймәләре
Безнең дисплей һәм бушлык инженериясе катнашында Bootstrap 4 шикелле тулы киңлектә, "блок төймәләре" өчен җаваплы стеклар булдырыгыз. Кнопка махсус класслар урынына коммуналь хезмәтләр кулланып, без араларны, тигезләүләрне, җаваплы тәртипне күпкә зуррак контрольдә тотабыз.
<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-grid
gap-2
<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
дә урнаштырыгыз.
<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>
Өстәмә коммуналь хезмәтләр горизонталь булганда төймәләрнең тигезләнешен көйләү өчен кулланылырга мөмкин. Монда без элеккеге җаваплы мисалны алдык һәм төймәләргә уң булмаган тигезләү өчен төймәгә кайбер флекс программаларын һәм маржа ярдәмчесен өстәдек.
<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"
аның ярдәмче технологияләргә тиешенчә китерелүен тәэмин итәргә тиеш.
<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 class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
Методлар
Сез төймә конструкторы белән төймә инстанциясен булдыра аласыз, мәсәлән:
var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
Метод | Тасвирлау |
---|---|
toggle |
Күчереп тору. Кнопкага активлашкан кыяфәт бирә. |
dispose |
Элемент төймәсен җимерә. (DOM элементында сакланган мәгълүматны бетерә) |
getInstance |
DOM элементына бәйләнгән төймә инстанциясен алырга мөмкинлек бирүче статик ысул, сез аны болай куллана аласыз:bootstrap.Button.getInstance(element) |
getOrCreateInstance |
Статик ысул, ул DOM элементына бәйләнгән төймә инстанциясен кире кайтара яки башланмаган очракта яңасын булдыра. Сез аны болай куллана аласыз:bootstrap.Button.getOrCreateInstance(element) |
Мәсәлән, барлык төймәләрне алыштыру
var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
var button = new bootstrap.Button(button)
button.toggle()
})
Сасс
Variзгәрешләр
$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%;
Миксинс
Кнопкалар өчен өч миксин бар: төймә һәм төймә схемасы вариант миксиннары (икесе дә нигездә $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)
) {
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);
}
Loops
Кнопка вариантлары (регуляр һәм схема төймәләре өчен) $theme-colors
модификатор классларын булдыру өчен безнең карта белән тиешле миксиннарны кулланалар 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);
}
}