Awọn bọtini
Lo awọn ara bọtini aṣa Bootstrap fun awọn iṣe ni awọn fọọmu, awọn ijiroro, ati diẹ sii pẹlu atilẹyin fun awọn titobi pupọ, awọn ipinlẹ, ati diẹ sii.
Awọn apẹẹrẹ
Bootstrap pẹlu ọpọlọpọ awọn aza bọtini asọye, ọkọọkan n ṣiṣẹ idi itumọ tirẹ, pẹlu awọn afikun diẹ ti a sọ sinu fun iṣakoso diẹ sii.
<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>Gbigbe itumo si awọn imọ-ẹrọ iranlọwọ
Lilo awọ lati ṣafikun itumọ nikan n pese itọkasi wiwo, eyiti kii yoo gbe lọ si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ - gẹgẹbi awọn oluka iboju. Rii daju pe alaye ti o tọka si nipasẹ awọ jẹ eyiti o han gbangba lati inu akoonu funrararẹ (fun apẹẹrẹ ọrọ ti o han), tabi pẹlu pẹlu awọn ọna omiiran, gẹgẹbi afikun ọrọ ti o farapamọ pẹlu .visually-hiddenkilasi naa.
Mu ọrọ murasilẹ kuro
Ti o ko ba fẹ ki ọrọ bọtini naa di ipari, o le ṣafikun .text-nowrapkilasi naa si bọtini. Ni Sass, o le ṣeto $btn-white-space: nowraplati mu ipari ọrọ ṣiṣẹ fun bọtini kọọkan.
Awọn aami bọtini
Awọn .btnkilasi jẹ apẹrẹ fun lilo pẹlu <button>eroja. Sibẹsibẹ, o tun le lo awọn kilasi wọnyi lori <a>tabi <input>awọn eroja (botilẹjẹpe diẹ ninu awọn aṣawakiri le lo adaṣe ti o yatọ diẹ).
Nigbati o ba nlo awọn kilasi bọtini lori <a>awọn eroja ti a lo lati ma nfa iṣẹ ṣiṣe oju-iwe (bii akoonu ti n ṣubu), dipo sisopọ si awọn oju-iwe tuntun tabi awọn apakan laarin oju-iwe lọwọlọwọ, awọn ọna asopọ wọnyi yẹ ki o fun ni role="button"lati sọ idi wọn ni deede si awọn imọ-ẹrọ iranlọwọ gẹgẹbi iboju onkawe.
<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">Awọn bọtini itọka
Ṣe o nilo bọtini kan, ṣugbọn kii ṣe awọn awọ isale hefty ti wọn mu? Rọpo awọn kilasi iyipada aiyipada pẹlu awọn .btn-outline-*eyi lati yọ gbogbo awọn aworan abẹlẹ ati awọn awọ kuro lori bọtini eyikeyi.
<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>Awọn iwọn
Fancy tobi tabi kere bọtini? Fikun -un .btn-lgtabi .btn-smfun awọn iwọn afikun.
<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>Ipo alaabo
Jẹ ki awọn bọtini dabi aiṣiṣẹ nipa fifi disabledabuda Boolean kun si eyikeyi <button>eroja. Awọn bọtini alaabo ti pointer-events: nonelo si, idilọwọ gbigbọn ati awọn ipinlẹ ti nṣiṣe lọwọ lati ma nfa.
<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>Awọn bọtini alaabo nipa lilo <a>eroja naa huwa diẹ ti o yatọ:
<a>s ko ṣe atilẹyin abuda naadisabled, nitorinaa o gbọdọ ṣafikun.disabledkilasi naa lati jẹ ki oju han ni alaabo.- Diẹ ninu awọn aza ore-ọjọ iwaju wa pẹlu lati mu gbogbo rẹ kuro
pointer-eventslori awọn bọtini oran. - Awọn bọtini alaabo yẹ ki o pẹlu
aria-disabled="true"abuda lati tọka ipo ti nkan si awọn imọ-ẹrọ iranlọwọ.
<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>Asopọ iṣẹ caveat
Kilasi naa .disablednlo pointer-events: nonelati gbiyanju lati mu iṣẹ ọna asopọ ṣiṣẹ ti <a>s, ṣugbọn ohun-ini CSS ko tii ni idiwọn. Ni afikun, paapaa ninu awọn aṣawakiri ti o ṣe atilẹyin pointer-events: none, lilọ kiri keyboard ko ni ipa, afipamo pe awọn olumulo keyboard ti o rii ati awọn olumulo ti awọn imọ-ẹrọ iranlọwọ yoo tun ni anfani lati mu awọn ọna asopọ wọnyi ṣiṣẹ. Nitorinaa lati wa ni ailewu, ni afikun si aria-disabled="true", tun pẹlu abuda kan tabindex="-1"lori awọn ọna asopọ wọnyi lati ṣe idiwọ wọn lati gbigba idojukọ keyboard, ati lo JavaScript aṣa lati mu iṣẹ ṣiṣe wọn ṣiṣẹ lapapọ.
Awọn bọtini idilọwọ
Ṣẹda awọn akopọ idahun ti iwọn ni kikun, “awọn bọtini idilọwọ” bii awọn ti o wa ninu Bootstrap 4 pẹlu akojọpọ ifihan wa ati awọn ohun elo aafo. Nipa lilo awọn ohun elo dipo bọtini awọn kilasi kan pato, a ni iṣakoso pupọ julọ lori aye, titete, ati awọn ihuwasi idahun.
<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>Nibi a ṣẹda iyatọ idahun, bẹrẹ pẹlu awọn bọtini tolera ni inaro titi aaye mdfifọ, nibiti o ti .d-md-blockrọpo .d-gridkilasi naa, nitorinaa sọ ohun gap-2elo naa di asan. Ṣe atunto ẹrọ aṣawakiri rẹ lati rii pe wọn yipada.
<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>O le ṣatunṣe iwọn awọn bọtini bulọọki rẹ pẹlu awọn kilasi iwọn iwe akoj. Fun apẹẹrẹ, fun “bọtini ìdènà” ibú idaji, lo .col-6. Laarin rẹ nâa pẹlu .mx-auto, ju.
<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>Awọn ohun elo afikun le ṣee lo lati ṣatunṣe titete awọn bọtini nigbati petele. Nibi a ti mu apẹẹrẹ idahun iṣaaju wa ati ṣafikun diẹ ninu awọn ohun elo irọrun ati ohun elo ala kan lori bọtini lati ṣe deede awọn bọtini ọtun nigbati wọn ko ba tolera mọ.
<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>Ohun itanna bọtini
Ohun itanna bọtini gba ọ laaye lati ṣẹda awọn bọtini toggle titan/pa ti o rọrun.
Yipada awọn ipinlẹ
Ṣafikun data-bs-toggle="button"lati yi ipo bọtini kan pada active. Ti o ba n yi bọtini kan ṣaju, o gbọdọ fi ọwọ kun .activekilasi naa ati aria-pressed="true" lati rii daju pe o ti gbejade ni deede si awọn imọ-ẹrọ iranlọwọ.
<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>Awọn ọna
O le ṣẹda apẹẹrẹ bọtini kan pẹlu oluṣe bọtini, fun apẹẹrẹ:
var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
| Ọna | Apejuwe |
|---|---|
toggle |
Toggles titari ipinle. Yoo fun bọtini naa hihan ti o ti muu ṣiṣẹ. |
dispose |
Pa bọtini eroja run. (Yọ data ti o fipamọ sori nkan DOM kuro) |
getInstance |
Ọna aimi eyiti o fun ọ laaye lati gba apẹẹrẹ bọtini ti o ni nkan ṣe pẹlu nkan DOM, o le lo bii eyi:bootstrap.Button.getInstance(element) |
getOrCreateInstance |
Ọna aimi eyiti o da apẹẹrẹ bọtini pada ti o ni nkan ṣe pẹlu nkan DOM tabi ṣẹda ọkan tuntun ni ọran ti ko ṣe ipilẹṣẹ. O le lo bi eleyi:bootstrap.Button.getOrCreateInstance(element) |
Fun apẹẹrẹ, lati yi gbogbo awọn bọtini pada
var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
var button = new bootstrap.Button(button)
button.toggle()
})
Sass
Awọn oniyipada
$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
Awọn apopọ mẹta wa fun awọn bọtini: bọtini ati bọtini itọka iyatọ iyatọ (mejeeji ti o da lori $theme-colors), pẹlu idapọ iwọn bọtini kan.
@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);
}
Yipo
Awọn iyatọ bọtini (fun deede ati awọn bọtini itọka) lo awọn akojọpọ oniwun wọn pẹlu $theme-colorsmaapu wa lati ṣe agbekalẹ awọn kilasi modifier ni 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);
}
}