Nupud
Kasutage Bootstrapi kohandatud nupustiile vormides, dialoogides ja muudes toimingutes koos mitme suuruse, oleku ja muu toega.
Näited
Bootstrap sisaldab mitut eelmääratletud nupustiili, millest igaüks täidab oma semantilist eesmärki ja millele on lisatud mõned lisad, et paremini juhtida.
<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>
Abitehnoloogiate tähenduse edasiandmine
Värvi kasutamine tähenduse lisamiseks annab ainult visuaalse viite, mida ei edastata abitehnoloogiate (nt ekraanilugejate) kasutajatele. .visually-hidden
Veenduge, et värviga tähistatud teave oleks kas sisust endast ilmne (nt nähtav tekst) või kaasatud alternatiivsete vahenditega, näiteks klassiga peidetud lisatekst .
Keela teksti murdmine
Kui te ei soovi, et nupu tekst murtaks, saate .text-nowrap
klassi lisada nupule. Sassis saate määrata$btn-white-space: nowrap
keelata iga nupu teksti murramise.
Nuppude sildid
Klassid on mõeldud .btn
kasutamiseks koos <button>
elemendiga. Siiski saate neid klasse kasutada ka elementide <a>
või <input>
elementide puhul (kuigi mõned brauserid võivad rakendada veidi erinevat renderdamist).
Kui kasutate nuppude klasse <a>
elementidel, mida kasutatakse lehesisese funktsionaalsuse käivitamiseks (nt sisu kokkutõmbamine), selle asemel, et linkida praeguse lehe uutele lehtedele või jaotistele, tuleks nendele linkidele role="button"
anda nende eesmärk asjakohaselt edastada abitehnoloogiatele, näiteks ekraanilugejad.
<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">
Kontuurinupud
Kas vajate nuppu, kuid mitte nende pakutavaid kopsakaid taustavärve? Asendage vaikimisi modifikaatoriklassid klassidega .btn-outline-*
, et eemaldada kõik taustpildid ja värvid mis tahes nupult.
<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>
Suurused
Kas soovite suuremaid või väiksemaid nuppe? Lisa .btn-lg
või .btn-sm
lisasuuruste jaoks.
<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>
Puudega olek
Muutke nupud passiivseks, lisades mis tahes elemendile disabled
tõeväärtuse atribuudi . <button>
Keelatud nupud on pointer-events: none
rakendunud, takistades hõljumise ja aktiivsete olekute käivitumist.
<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 kasutavad keelatud nupud <a>
käituvad veidi erinevalt:
<a>
s ei toeta sedadisabled
atribuuti, seega peate.disabled
klassi lisama, et see visuaalselt keelatud.- Kaasas on mõned tulevikusõbralikud stiilid, et kõik
pointer-events
ankurnuppudel keelata. - Kasutatavad keelatud nupud
<a>
peaksid sisaldamaaria-disabled="true"
atribuuti, mis näitab abitehnoloogiate jaoks elemendi olekut. - Keelatud nupud
<a>
ei tohikshref
atribuuti sisaldada .
<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>
Lingi funktsionaalsuse hoiatus
Juhtude katmiseks, kui peate href
atribuuti hoidma keelatud lingil, püüab .disabled
klass s-i lingifunktsiooni keelata. Pange tähele, et see CSS-i atribuut pole veel HTML-i jaoks standarditud, kuid kõik kaasaegsed brauserid toetavad seda. Lisaks jääb klaviatuuriga navigeerimine muutumatuks isegi brauserites, mis toetavad , mis tähendab, et nägemisega klaviatuurikasutajad ja abitehnoloogiate kasutajad saavad neid linke siiski aktiveerida. Ohutuse huvides lisage nendele linkidele lisaks atribuutidele ka atribuut, mis takistab neil klaviatuuri fookuse saamist, ja kasutage nende funktsioonide täielikuks keelamiseks kohandatud JavaScripti.pointer-events: none
<a>
pointer-events: none
aria-disabled="true"
tabindex="-1"
<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>
Blokeerimisnupud
Looge meie kuvari ja vaheutiliitide seguga tundlike täislaiuste "blokeerimisnuppude" virnad nagu Bootstrap 4-s. Kasutades nuppude spetsiifiliste klasside asemel utiliite, on meil palju suurem kontroll vahekauguste, joonduse ja reageerimiskäitumise üle.
<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>
Siin loome tundliku variatsiooni, alustades vertikaalselt virnastatud nuppudest kuni md
katkestuspunktini, kus .d-md-block
asendab .d-grid
klassi, tühistades seega gap-2
utiliidi. Nende muutumise nägemiseks muutke oma brauseri suurust.
<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>
Saate reguleerida ploki nuppude laiust ruudustiku veeru laiuse klassidega. Näiteks poole laiuse blokeerimisnupu jaoks kasutage .col-6
. Keskendage see horisontaalselt ka nupuga .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>
Horisontaalsete nuppude joonduse reguleerimiseks saab kasutada täiendavaid utiliite. Siin oleme võtnud oma eelmise reageeriva näite ja lisanud nupule mõned paindlikud utiliidid ja veerisutiliidi, et nuppe paremale joondada, kui need pole enam virnastatud.
<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>
Nupu pistikprogramm
Nuppude pistikprogramm võimaldab luua lihtsaid sisse/välja lülitusnuppe.
Lülitage olekuid
Lisa data-bs-toggle="button"
nupu active
oleku vahetamiseks. Kui lülitate nuppu eelnevalt ümber, peate .active
klassi käsitsi lisama ja aria-pressed="true"
tagama, et see edastatakse abitehnoloogiatele õigesti.
<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>
meetodid
Nupueksemplari saate luua nupukonstruktoriga, näiteks:
var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
meetod | Kirjeldus |
---|---|
toggle |
Lülitab tõukeoleku sisse. Annab nupule välimuse, nagu see oleks aktiveeritud. |
dispose |
Hävitab elemendi nupu. (Eemaldab DOM-elemendile salvestatud andmed) |
getInstance |
Staatiline meetod, mis võimaldab teil saada DOM-i elemendiga seotud nupu eksemplari, saate seda kasutada järgmiselt:bootstrap.Button.getInstance(element) |
getOrCreateInstance |
Staatiline meetod, mis tagastab DOM-i elemendiga seotud nupueksemplari või loob uue, kui seda ei lähtestatud. Saate seda kasutada järgmiselt:bootstrap.Button.getOrCreateInstance(element) |
Näiteks kõigi nuppude ümberlülitamiseks
var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
var button = new bootstrap.Button(button)
button.toggle()
})
Sass
Muutujad
$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%;
Segud
Nuppude jaoks on kolm mixini: nupu ja nupu kontuuri variandi mixinid (mõlemad põhinevad $theme-colors
), pluss nupu suuruse mixin.
@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);
}
Silmused
Nuppude variandid (tavaliste ja kontuurinuppude jaoks) kasutavad meie $theme-colors
kaardiga vastavaid miksineid, et genereerida modifikaatoriklassid 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);
}
}