bokotra
Mampiasà fomba bokotra mahazatra an'ny Bootstrap ho an'ny hetsika amin'ny endrika, fifanakalozan-kevitra, ary maro hafa miaraka amin'ny fanohanana ny habe, fanjakana ary maro hafa.
OHATRA
Ny Bootstrap dia misy karazana bokotra maromaro efa voafaritra mialoha, samy manana ny tanjony manokana, miaraka amin'ny fanampiny vitsivitsy natsipy mba hifehezana bebe kokoa.
<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>Fampitaovana ny dikan'ny teknôlôjia manampy
Ny fampiasana loko hanampiana dikany dia manome famantarana hita maso ihany, izay tsy hampitaina amin'ireo mpampiasa teknolojia manampy - toy ny mpamaky efijery. Ataovy azo antoka fa ny fampahalalana voatondro amin'ny loko dia na miharihary amin'ny atiny (ohatra ny lahatsoratra hita maso), na ampidirina amin'ny fomba hafa, toy ny lahatsoratra fanampiny miafina miaraka amin'ny .visually-hiddenkilasy.
Atsaharo ny famonosana lahatsoratra
Raha tsy tianao ny bokotra soratra dia azonao atao ny manampy ny .text-nowrapkilasy amin'ny bokotra. Ao amin'ny Sass, azonao atao $btn-white-space: nowrapny manafoana ny famonosana lahatsoratra ho an'ny bokotra tsirairay.
Tags bokotra
Ny .btnkilasy dia natao hampiasaina amin'ny <button>singa. Na izany aza, azonao atao koa ny mampiasa ireo kilasy <a>na <input>singa ireo (na dia mety hampihatra fandikana hafa kely aza ny navigateur sasany).
Rehefa mampiasa kilasin'ny bokotra amin'ny <a>singa ampiasaina hanesorana ny fampiasa ao anaty pejy (toy ny votoaty mirodana), fa tsy mampifandray amin'ny pejy na fizarana vaovao ao anatin'ny pejy ankehitriny, dia tokony omena ireto rohy ireto role="button"mba hampita ny tanjony amin'ny teknolojia manampy toy ny mpamaky efijery.
<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">Bokotra misongadina
Mila bokotra, fa tsy ny lokon'ny lamosina mahery vaika entin'izy ireo? Soloy amin'ireo kilasy fanovàna .btn-outline-*mahazatra ireo mba hanesorana ny sary sy loko rehetra amin'ny bokotra rehetra.
<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>habe
Mitady bokotra lehibe kokoa na kely kokoa? Ampio .btn-lgna .btn-smhabe fanampiny.
<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>Fanjakana kilemaina
Ataovy toy ny tsy mavitrika ny bokotra amin'ny fampidirana ny disabledtoetra boolean amin'ny <button>singa rehetra. Ny bokotra kilemaina dia pointer-events: nonenampiharina tamin'ny, manakana ny hover sy ny fanjakana mavitrika tsy hivezivezy.
<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>Ny bokotra kilemaina mampiasa ilay <a>singa dia somary hafa ihany ny fitondrantena:
<a>s tsy manohana nydisabledtoetra, noho izany dia tsy maintsy ampidirinao ny.disabledkilasy mba hahatonga azy ho kilemaina.- Misy endrika sariaka amin'ny ho avy ampidirina mba hanesorana ny
pointer-eventsbokotra vatofantsika rehetra. - Ny bokotra kilemaina ampiasaina
<a>dia tokony ahitana nyaria-disabled="true"toetra hanondro ny toetran'ilay singa amin'ny teknolojia manampy. - Ny bokotra kilemaina ampiasaina
<a>dia tsy tokony ahitana nyhreftoetra.
<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>Fampitandremana momba ny fiasa rohy
Mba handrakofana ireo tranga izay tsy maintsy itazonanao ny hreftoetra amin'ny rohy kilemaina, ny .disabledkilasy dia mampiasa pointer-events: noneny hanandrana manafoana ny fiasan'ny rohy an'ny <a>s. Mariho fa ity fananana CSS ity dia tsy mbola manara-penitra ho an'ny HTML, fa ny navigateur maoderina rehetra dia manohana azy. Fanampin'izany, na dia ao amin'ny mpitety tranonkala manohana aza pointer-events: none, dia mbola tsy misy fiantraikany ny fitetezana kitendry, izany hoe mbola afaka manetsika ireo rohy ireo ny mpampiasa klavier sy ny mpampiasa ny teknolojia mpanampy. Noho izany, mba ho azo antoka, ankoatra ny aria-disabled="true", dia ampidiro ihany koa ny tabindex="-1"toetra iray ao amin'ireo rohy ireo mba hisakanana azy ireo tsy hahazo fifantohana amin'ny fitendry, ary ampiasao ny JavaScript manokana mba hanesorana tanteraka ny fampiasany.
<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>Bokotra sakana
Mamorona antontam-panentanana feno, "bokotra sakana" toy ny ao amin'ny Bootstrap 4 miaraka amin'ny fifangaroan'ny fampiratiana sy ny banga. Amin'ny alàlan'ny fampiasana fitaovana fa tsy kilasy manokana amin'ny bokotra, dia manana fifehezana bebe kokoa momba ny elanelana, ny fampifanarahana ary ny fihetsika mandray andraikitra.
<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>Eto isika dia mamorona fiovaovana mamaly, manomboka amin'ny bokotra mitsangana mitsangana mandra-pahatongan'ny teboka md, izay .d-md-blockmanolo ny .d-gridkilasy, ka manafoana ny gap-2fitaovana. Hanova ny haben'ny mpitety tranonkalanao mba hahitana azy ireo miova.
<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>Azonao atao ny manitsy ny sakan'ny bokotra sakana miaraka amin'ny kilasy sakan'ny tsanganana grid. Ohatra, ho an'ny "bokotra sakana" ny antsasaky ny sakany, ampiasao .col-6. Aforeto mitsivalana miaraka amin'ny .mx-auto, koa.
<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>Ny fitaovana fanampiny dia azo ampiasaina hanitsiana ny fampifanarahana ny bokotra rehefa mitsivalana. Eto izahay dia naka ny ohatra noraisinay teo aloha ary nampiana fitaovana flex sy fampiasa amin'ny sisiny eo amin'ny bokotra hanitsiana havanana ny bokotra rehefa tsy tafapetraka intsony.
<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>Plugin bokotra
Ny plugin bokotra dia ahafahanao mamorona bokotra toggle on/off tsotra.
Toggle fanjakana
Ampio data-bs-toggle="button"mba hanova ny toetry ny bokotra active. Raha toa ianao ka manodina bokotra mialoha, dia tsy maintsy ampidirinao amin'ny tanana ny .activekilasy ary aria-pressed="true" mba hahazoana antoka fa ampita tsara amin'ny teknolojia manampy izany.
<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>fomba
Azonao atao ny mamorona ohatra bokotra miaraka amin'ny mpamorona bokotra, ohatra:
var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
| FOMBA | Description |
|---|---|
toggle |
Manova ny toetry ny fanosehana. Manome ny bokotra ny endrika fa efa navitrika. |
dispose |
Manimba ny bokotra singa iray. (Esory ny angona voatahiry amin'ny singa DOM) |
getInstance |
Fomba static izay ahafahanao mahazo ny ohatra bokotra mifandray amin'ny singa DOM, azonao ampiasaina toy izao:bootstrap.Button.getInstance(element) |
getOrCreateInstance |
Fomba static izay mamerina ohatra bokotra mifandray amin'ny singa DOM na mamorona vaovao raha toa ka tsy natomboka izany. Azonao atao ny mampiasa azy toy izao:bootstrap.Button.getOrCreateInstance(element) |
Ohatra, hamindra ny bokotra rehetra
var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
var button = new bootstrap.Button(button)
button.toggle()
})
Sass
hiovaova
$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
Misy mixins telo ho an'ny bokotra: mixins variant outline ny bokotra (samy mifototra amin'ny $theme-colors), miampy mixin habe bokotra.
@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
Ny variana bokotra (ho an'ny bokotra mahazatra sy tsipika) dia mampiasa ny fifangaroan'izy ireo miaraka amin'ny $theme-colorssari-tany mba hamoronana ny kilasy modifier amin'ny 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);
}
}