Nā pihi
E hoʻohana i nā ʻano pihi maʻamau a Bootstrap no nā hana ma nā ʻano, nā kamaʻilio, a me nā mea hou aʻe me ke kākoʻo no nā nui he nui, nā mokuʻāina, a me nā mea hou aʻe.
Nā laʻana
Loaʻa i ka Bootstrap kekahi mau ʻano pihi i koho mua ʻia, e lawelawe ana kēlā me kēia me kāna kumu semantic ponoʻī, me kekahi mau mea hou i hoʻolei ʻia no ka mana hou aku.
<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>
Ka hōʻike ʻana i ka manaʻo i nā ʻenehana kōkua
ʻO ka hoʻohana ʻana i ke kala e hoʻohui i ka manaʻo e hāʻawi wale i kahi hōʻailona ʻike, ʻaʻole e hāʻawi ʻia i nā mea hoʻohana i nā ʻenehana kōkua - e like me nā mea heluhelu pale. E hōʻoia i ka ʻike i hōʻike ʻia e ke kala i ʻike ʻia mai ka ʻike ponoʻī (e laʻa i ke kikokikona ʻike ʻia), a i ʻole e hoʻokomo ʻia ma o nā ala ʻē aʻe, e like me nā kikokikona hou i hūnā ʻia me ka .visually-hidden
papa.
Hoʻopaʻa i ka ʻōwili kikokikona
Inā 'a'ole 'oe makemake i ka kikokikona pihi e 'ōwili, hiki iā 'oe ke ho'ohui i ka .text-nowrap
papa i ke pihi. Ma Sass, hiki iā ʻoe ke hoʻonohonoho $btn-white-space: nowrap
i ka hoʻopau ʻana i ka hoʻopili kikokikona no kēlā me kēia pihi.
Nā lepili pihi
Hoʻolālā .btn
ʻia nā papa e hoʻohana me ka <button>
mea. Eia nō naʻe, hiki iā ʻoe ke hoʻohana i kēia mau papa ma luna a i <a>
ʻole <input>
nā mea (ʻoiai e hoʻohana paha kekahi mau polokalamu kele i kahi unuhi ʻokoʻa).
I ka hoʻohana ʻana i nā papa pihi ma <a>
nā mea i hoʻohana ʻia e hoʻāla i ka hana i loko o ka ʻaoʻao (e like me ka hāʻule ʻana o ka maʻiʻo), ma mua o ka hoʻopili ʻana i nā ʻaoʻao hou a i ʻole nā ʻāpana i loko o ka ʻaoʻao o kēia manawa, pono e hāʻawi ʻia kēia mau loulou e hoʻopuka role="button"
kūpono i kā lākou kumu i nā ʻenehana kōkua e like me mea heluhelu pale.
<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">
Nā pihi outline
Pono ʻoe i kahi pihi, ʻaʻole naʻe nā kala hefty kā lākou e lawe mai ai? E hoʻololi i nā papa hoʻololi paʻamau me nā .btn-outline-*
mea e wehe i nā kiʻi hope a me nā kala ma kekahi pihi.
<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>
Nui
Makemake i nā pihi nui a liʻiliʻi paha? Hoʻohui a i .btn-lg
ʻole .btn-sm
no nā nui ʻē aʻe.
<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>
Mokuʻāina kīnā
E hana i nā pihi me ka ʻole o ka hoʻohui ʻana i ke disabled
ʻano boolean i kekahi <button>
mea. Ua hoʻohana ʻia nā pihi hoʻopaʻa pointer-events: none
ʻole, e pale ana i ka hover a me nā kūlana hana mai ka hoʻomaka ʻana.
<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>
ʻOkoʻa ka ʻano o nā pihi hoʻopaʻa ʻia e hoʻohana ana i ka <a>
element:
<a>
ʻAʻole kākoʻo ʻo s i kadisabled
ʻano, no laila pono ʻoe e hoʻohui i ka.disabled
papa i mea e ʻike ʻia ai ke kīnā.- Hoʻokomo ʻia kekahi mau ʻano hoʻokipa e hiki mai ana e hoʻopau i nā mea āpau
pointer-events
ma nā pihi heleuma. - Pono nā pihi i hoʻopaʻa ʻole ʻia e hoʻokomo i ke
aria-disabled="true"
ʻano e hōʻike i ke kūlana o ka mea i nā ʻenehana kōkua.
<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>
Hoʻopaʻa hana loulou
Hoʻohana ka .disabled
papa pointer-events: none
e hoʻāʻo e hoʻopau i ka hana loulou o <a>
s, akā ʻaʻole i hoʻohālikelike ʻia kēlā waiwai CSS. Eia kekahi, ʻoiai i loko o nā polokalamu kele pūnaewele e kākoʻo ana, ʻaʻole i hoʻopilikia ʻia pointer-events: none
ka hoʻokele keyboard, ʻo ia hoʻi, hiki i nā mea hoʻohana keyboard ʻike a me nā mea hoʻohana i nā ʻenehana kōkua ke hoʻāla i kēia mau loulou. No laila, i mea e palekana ai, ma waho aʻe o aria-disabled="true"
, e hoʻokomo pū i kahi tabindex="-1"
hiʻohiʻona ma kēia mau loulou e pale aku iā lākou mai ka loaʻa ʻana o ka manaʻo keyboard, a hoʻohana i ka JavaScript maʻamau e hoʻopau i kā lākou hana.
Paʻa pihi
E hana i nā pūʻulu pane o ka laulā piha, "nā pihi poloka" e like me nā mea ma Bootstrap 4 me kahi hui o kā mākou hōʻike a me nā pono āpau. Ma ka hoʻohana ʻana i nā pono hana ma kahi o nā papa kikoʻī, ua ʻoi aku ka nui o ka mana ma luna o ka spacing, alignment, a me nā ʻano pane.
<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>
Maanei mākou e hana ai i ka hoʻololi pane, e hoʻomaka ana me nā pihi i hoʻopaʻa ʻia a hiki i ka md
breakpoint, kahi .d-md-block
e pani ai i ka .d-grid
papa, no laila e hoʻopau i ka gap-2
pono. E hoʻololi i kāu polokalamu kele pūnaewele e ʻike iā lākou e loli.
<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>
Hiki iā ʻoe ke hoʻololi i ka laula o kāu mau pihi poloka me nā papa ākea kolamu. No ka laʻana, no ka hapalua-ākea "pā pihi", hoʻohana .col-6
. E hoʻokaʻawale iā ia me ka .mx-auto
, pū kekahi.
<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>
Hiki ke hoʻohana ʻia nā pono hana hou no ka hoʻoponopono ʻana i ka hoʻopololei ʻana o nā pihi i ka wā e pae ana. Ma ʻaneʻi ua lawe mākou i kā mākou hiʻohiʻona pane mua a hoʻohui i kekahi mau pono pono a me kahi pono palena ma ke pihi e hoʻolike pono i nā pihi ke ʻole lākou i hoʻopaʻa hou ʻia.
<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>
Pākuʻi pihi
Hāʻawi ka plugin pihi iā ʻoe e hana i nā pihi hoʻololi maʻalahi.
E hoʻololi i nā mokuʻāina
Hoʻohui data-bs-toggle="button"
e hoʻololi i ke kūlana o kahi pihi active
. Inā ʻoe e hoʻololi mua i kahi pihi, pono ʻoe e hoʻohui lima i ka .active
papa a aria-pressed="true"
e hōʻoia i ka lawe ʻia ʻana o ia mea i nā ʻenehana kōkua.
<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>
Nā ʻano hana
Hiki iā ʻoe ke hana i kahi laʻana pihi me ka mea hana pihi, no ka laʻana:
var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
Kaʻina hana | wehewehe |
---|---|
toggle |
Hoʻololi i ke kūlana pana. Hāʻawi ke pihi i ke ʻano i hoʻāla ʻia. |
dispose |
Hoʻopau i ke pihi o kahi mea. (Wehe i ka ʻikepili i mālama ʻia ma ka mea DOM) |
getInstance |
ʻO ke ala static e hiki ai iā ʻoe ke kiʻi i ke pihi pihi pili i kahi mea DOM, hiki iā ʻoe ke hoʻohana e like me kēia:bootstrap.Button.getInstance(element) |
getOrCreateInstance |
ʻO ke ʻano static e hoʻihoʻi i kahi laʻana pihi pili i kahi mea DOM a i ʻole hana i kahi mea hou inā ʻaʻole i hoʻomaka ʻia. Hiki iā ʻoe ke hoʻohana e like me kēia:bootstrap.Button.getOrCreateInstance(element) |
No ka laʻana, e hoʻololi i nā pihi āpau
var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
var button = new bootstrap.Button(button)
button.toggle()
})
Sass
Nā mea hoʻololi
$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%;
Mea huikau
ʻEkolu hui ʻana no nā pihi: pihi a me ke pihi outline mixins ʻano like ʻole (ma muli o lāua ma $theme-colors
), a me kahi hui nui pihi.
@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);
}
Lope
Hoʻohana nā ʻano ʻokoʻa (no nā pihi maʻamau a outline) i kā lākou hui pū ʻana me kā mākou $theme-colors
palapala ʻāina e hana i nā papa hoʻololi 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);
}
}