Fa'amau
Fa'aoga sitaili fa'aautu masani a Bootstrap mo gaioiga i fomu, talanoaga, ma isi mea fa'atasi ai ma le lagolago mo le tele o lapopoa, setete, ma isi mea.
Faataitaiga
O le Bootstrap e aofia ai le tele o sitaili faʻamaufaʻailogaina faʻamau, o loʻo faʻaogaina e taʻitasi lona lava faʻamoemoega faʻapitoa, faʻatasi ai ma nai mea faʻaopoopo e lafo i totonu mo le sili atu le pulea.
<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>Tu'uina atu le uiga i tekinolosi fesoasoani
O le fa'aogaina o le lanu e fa'aopoopo ai le uiga e na'o se fa'aaliga va'aia, e le fa'ailoa atu i tagata fa'aoga o tekonolosi fesoasoani - e pei o le au faitau mata. Ia fa'amautinoa o fa'amatalaga o lo'o fa'ailogaina i le lanu e manino mai le anotusi lava ia (fa'ata'ita'iga o tusitusiga va'aia), pe fa'aofi mai i isi auala, e pei o tusitusiga fa'aopoopo natia i le .visually-hiddenvasega.
Taofi le afifiina o tusitusiga
Afai e te le mana'o e afifi le ki, e mafai ona e fa'aopoopo le .text-nowrapvasega ile fa'amau. I le Sass, e mafai ona e seti $btn-white-space: nowrape faʻamalo le afifiina o tusitusiga mo faʻamau taʻitasi.
Fa'ailoga fa'amau
O .btnvasega ua mamanuina e faʻaaogaina ma le <button>elemene. Ae ui i lea, e mafai foʻi ona e faʻaogaina nei vasega i luga <a>poʻo <input>elemene (e ui o nisi tagata suʻesuʻe e mafai ona faʻaogaina se faʻaliliuga laʻititi).
Pe a fa'aogaina vasega fa'amau i <a>elemene e fa'aaogaina e fa'aosoina ai galuega i totonu o le itulau (pei o le malepelepe o mea), nai lo le feso'ota'i i itulau fou po'o vaega i totonu o le itulau o lo'o i ai nei, e tatau ona tu'uina atu nei feso'ota'iga a role="button"e fa'ailoa lelei ai lo latou fa'amoemoe i tekinolosi fesoasoani e pei o le lau faitau mata.
<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">Otootoga faamau
E mana'omia se fa'amau, ae le o lanu tetele o tua latou te aumaia? Suia vasega fa'aoga fa'aletonu i vasega .btn-outline-*e aveese uma ata ma lanu i luga o so'o se ki.
<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>Tele
Mana'o i fa'amau tetele pe la'ititi? Fa'aopoopo .btn-lgpe .btn-smmo isi lapopo'a.
<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>Tulaga le atoatoa
Fa'apena fa'amau fa'agaoioi e ala i le fa'aopoopoina o le disableduiga boolean i so'o se <button>elemene. Ua fa'aoga fa'amau fa'aletonu pointer-events: none, e taofia ai le fa'agasolo ma tulaga fa'agaoioia mai le fa'aosoina.
<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>O fa'amau fa'aletonu e fa'aaoga ai le <a>elemene e fai si 'ese'ese:
<a>e le lagolagoina ledisableduiga, o lea e tatau ai ona e faaopoopo le.disabledvasega ina ia foliga mai e le atoatoa.- O nisi sitaili faauo i le lumana'i o lo'o i ai e fa'amalo uma
pointer-eventsi fa'amau taula. - O faʻamau faʻaletonu e tatau ona aofia ai le
aria-disabled="true"uiga e faʻaalia ai le tulaga o le elemene i tekinolosi fesoasoani.
<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>So'otaga galuega fa'atino
E .disabledfa'aoga e le vasega pointer-events: nonee taumafai e fa'amalo le feso'ota'iga o <a>le s, ae o lena CSS meatotino e le'i fa'asalaina. E le gata i lea, e oo lava i tagata su'esu'e o lo'o lagolagoina pointer-events: none, e tumau pea le le a'afiaina o le ta'avale keyboard, o lona uiga o tagata fa'aoga keyboard ma tagata fa'aoga fesoasoani tekonolosi o le a mafai lava ona fa'agaoioia nei so'oga. O lea ina ia saogalemu, e faaopoopo atu i le aria-disabled="true", ia aofia ai foi se tabindex="-1"uiga i luga o nei soʻotaga e taofia ai i latou mai le mauaina o le keyboard taulaʻi, ma faʻaaoga le JavaScript masani e faʻamalo uma ai a latou galuega.
poloka poloka
Fausia fa'aputuga tali o le lautele-lautele, "poka poloka" pei o latou i totonu o le Bootstrap 4 fa'atasi ai ma se fa'afefiloi oa tatou fa'aaliga ma gap utilities. E ala i le fa'aogaina o mea fa'aoga ae le o fa'amau vasega fa'apitoa, e sili atu la tatou fa'atonuga i le va, fa'aogaina, ma le tali atu i amioga.
<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>O iinei tatou te fatuina ai se fesuiaiga tali, amata i faʻamau faʻapipiʻi tuʻu saʻo seʻia oʻo i le mdvaeluaga, lea .d-md-blocke sui ai le .d-gridvasega, ma faʻaumatia ai le gap-2aoga. Toe sui lau su'esu'ega e va'ai ua suia.
<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>E mafai ona e fetuutuuna'i le lautele o au poloka poloka ma vasega laina lautele laina laina. Mo se faʻataʻitaʻiga, mo le afa-lautele "poka poloka", faʻaaoga .col-6. Fa'atotonu fa'alava ma .mx-auto, fo'i.
<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>E mafai ona fa'aoga mea fa'aopoopo e fetu'una'i ai le fa'aogaina o fa'amau pe a fa'ata'atia. O lea na matou faia ai la matou fa'ata'ita'iga tali muamua ma fa'aopoopo nisi mea fa'aoga felefele ma se fa'aoga pito i luga o le ki e fa'aoga sa'o ai fa'amau pe a le toe fa'aputuina.
<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>Fa'amau fa'amau
O le fa'amau fa'apipi'i e mafai ai ona e faia fa'amau fa'aoga faigofie i luga/taoti.
Togi setete
Fa'aopoopo data-bs-toggle="button"e sui le tulaga o se faamau active. Afai o lo'o e tosoina muamua se ki, e tatau ona e fa'aopoopo ma le lima le .activevasega ma aria-pressed="true" ia mautinoa o lo'o fa'asolo lelei i tekinolosi fesoasoani.
<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>Metotia
E mafai ona e fatuina se faʻataʻitaʻiga faʻatasi ma le fau mea faʻamau, mo se faʻataʻitaʻiga:
var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
| Metotia | Fa'amatalaga |
|---|---|
toggle |
Togi le tulaga tulei. Tu'u atu i le ki le foliga mai ua fa'agaoioia. |
dispose |
Fa'aleaga le faamau o se elemene. (Ave'ese fa'amaumauga o lo'o teuina ile elemene DOM) |
getInstance |
Metotia static lea e mafai ai ona e maua le faʻataʻitaʻiga faʻamau e fesoʻotaʻi ma se elemene DOM, e mafai ona e faʻaogaina e pei o lenei:bootstrap.Button.getInstance(element) |
getOrCreateInstance |
Metotia static e toe faʻafoʻi ai se faʻataʻitaʻiga faʻapipiʻi e fesoʻotaʻi ma se elemene DOM pe fatuina se mea fou pe a leʻi amataina. E mafai ona e faʻaaogaina e pei o lenei:bootstrap.Button.getOrCreateInstance(element) |
Mo se faataitaiga, e sui uma faamau
var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
var button = new bootstrap.Button(button)
button.toggle()
})
Sass
Fuafuaga
$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
E tolu fa'afefiloi mo fa'amau: fa'afefiloi fa'afefiloi fa'avasegaga fa'amau ma fa'amau (fa'atatau uma i le $theme-colors), fa'atasi ai ma le fa'afefiloi o lapo'a fa'amau.
@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);
}
ta'amilosaga
Fa'aliliuga fa'amau (mo fa'amau masani ma fa'amaufa'ailoga) fa'aoga a latou fa'afefiloi fa'atasi ma la tatou $theme-colorsfa'afanua e fa'atupuina ai vasega fa'aliliu i 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);
}
}