Khawm

Siv Bootstrap cov kev cai khawm style rau kev ua hauv cov ntawv, sib tham, thiab ntau ntxiv nrog kev txhawb nqa rau ntau qhov ntau thiab tsawg, xeev, thiab ntau dua.

Ntawm nplooj ntawv no

Piv txwv

Bootstrap suav nrog ntau lub pob khawm ua ntej, txhua tus ua haujlwm rau nws tus kheej lub hom phiaj, nrog ob peb yam ntxiv pov rau hauv kev tswj hwm ntau dua.

html

<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>

Qhia lub ntsiab lus rau kev pab technologies

Siv cov xim los ntxiv cov ntsiab lus tsuas yog muab qhov pom kev pom, uas yuav tsis raug xa mus rau cov neeg siv cov thev naus laus zis pab - xws li cov ntawv nyeem. Xyuas kom meej tias cov ntaub ntawv qhia los ntawm cov xim yog pom tseeb los ntawm cov ntsiab lus nws tus kheej (xws li cov ntawv pom), lossis suav nrog lwm txoj kev, xws li cov ntawv ntxiv zais nrog cov .visually-hiddenchav kawm.

Disable text wrapping

Yog tias koj tsis xav kom lub pob ntawv qhwv, koj tuaj yeem ntxiv cov .text-nowrapchav kawm rau lub pob. Hauv Sass, koj tuaj yeem teeb tsa $btn-white-space: nowrapkom kaw cov ntawv sau rau txhua lub pob.

Khawm tag

Cov .btnchav kawm yog tsim los siv nrog lub <button>ntsiab. Txawm li cas los xij, koj tuaj yeem siv cov chav kawm no <a>los yog<input> cov ntsiab lus (txawm tias qee qhov browsers yuav siv qhov sib txawv me ntsis).

Thaum siv cov chav kawm khawm ntawm <a>cov ntsiab lus uas tau siv los ua kom muaj kev ua haujlwm hauv nplooj ntawv (xws li kev sib tsoo cov ntsiab lus), tsis yog txuas mus rau nplooj ntawv tshiab lossis ntu hauv nplooj ntawv tam sim no, cov kev sib txuas no yuav tsum tau muab role="button"rau kom tsim nyog qhia lawv lub hom phiaj rau kev pabcuam thev naus laus zis xws li screen nyeem ntawv.

Txuas

html

<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">

Taw qhia cov nyees khawm

Xav tau ib lub pob, tab sis tsis yog cov xim tom qab hnyav lawv nqa? Hloov cov chav kawm hloov pauv hloov pauv nrog cov .btn-outline-*uas yuav tshem tawm tag nrho cov duab tom qab thiab xim ntawm ib lub pob.

html

<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>

Qee yam ntawm cov pob khawm siv cov xim zoo nkauj rau pem hauv ntej, thiab yuav tsum tsuas yog siv rau tom qab tsaus nti kom muaj qhov sib txawv txaus.

Qhov ntau thiab tsawg

Xav tau cov nyees khawm loj lossis me dua? Ntxiv .btn-lglossis .btn-smrau qhov ntau thiab tsawg.

html

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

html

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Koj tuaj yeem dov koj tus kheej kev cai sizing nrog CSS variables:

html

<button type="button" class="btn btn-primary"
        style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
  Custom button
</button>

Lub xeev tsis taus

Ua kom cov nyees khawm zoo li tsis ua haujlwm los ntawm kev ntxiv tus disabledcwj pwm boolean rau txhua <button>lub caij. Cov nyees khawm xiam oob khab tau pointer-events: nonesiv rau, tiv thaiv hover thiab lub xeev nquag los ntawm kev tshwm sim.

html

<button type="button" class="btn btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary" disabled>Button</button>
<button type="button" class="btn btn-outline-primary" disabled>Primary button</button>
<button type="button" class="btn btn-outline-secondary" disabled>Button</button>

Cov khawm xiam oob qhab siv lub <a>caij coj txawv me ntsis:

<a>s tsis txhawb tus disabledcwj pwm, yog li koj yuav tsum ntxiv cov .disabledchav kawm kom nws pom qhov tsis taus.
Qee qhov kev nyiam yav tom ntej yog suav nrog los cuam tshuam tag nrhopointer-events ntawm cov nyees khawm thauj tog rau nkoj.
Cov nyees khawm uas siv <a>tsis tau yuav tsum suav nrog tus aria-disabled="true"cwj pwm los qhia txog lub xeev ntawm cov khoom siv rau kev pabcuam.
Cov khawm tsis siv neeg siv <a> yuav tsum tsis suav nrog tus hrefcwj pwm.

Thawj qhov txuas Txuas

html

<a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>

Link functionality caveat

Txhawm rau npog cov xwm txheej uas koj yuav tsum khaws tus hrefcwj pwm ntawm qhov txuas tsis taus, cov .disabledchav kawm siv pointer-events: nonelos sim lov tes taw qhov txuas ua haujlwm ntawm <a>s. Nco ntsoov tias cov cuab yeej CSS no tseem tsis tau ua qauv rau HTML, tab sis txhua qhov browsers niaj hnub txhawb nqa nws. Tsis tas li ntawd, txawm nyob rau hauv browsers uas txhawb nqa pointer-events: none, keyboard navigation tseem tsis cuam tshuam, txhais tau hais tias cov neeg siv cov keyboard pom thiab cov neeg siv thev naus laus zis tseem tuaj yeem qhib cov kev txuas no. Yog li kom muaj kev nyab xeeb, ntxiv rau aria-disabled="true", kuj suav nrog tus tabindex="-1"cwj pwm ntawm cov kev sib txuas no los tiv thaiv lawv los ntawm kev txais cov keyboard tsom, thiab siv cov kev cai JavaScript los lov tes taw lawv cov haujlwm tag nrho.

Thawj qhov txuas Txuas

html

<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

Thaiv cov nyees khawm

Tsim cov kab lus teb ntawm qhov dav-dav, "block khawm" zoo li cov hauv Bootstrap 4 nrog kev sib xyaw ntawm peb cov zaub thiab cov khoom siv sib txawv. Los ntawm kev siv cov khoom siv es tsis txhob khawm cov chav kawm tshwj xeeb, peb muaj kev tswj hwm ntau dua ntawm qhov sib nrug, kev sib dhos, thiab kev coj cwj pwm.

html

<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>

Ntawm no peb tsim ib qho kev hloov pauv, pib nrog vertically stacked nyees khawm kom txog rau thaum lub mdbreakpoint, qhov twg .d-md-blockhloov cov .d-gridchav kawm, yog li nullifying cov gap-2nqi hluav taws xob. Resize koj tus browser kom pom lawv hloov.

html

<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>

Koj tuaj yeem kho qhov dav ntawm koj cov nyees khawm thaiv nrog daim phiaj kab dav chav kawm. Piv txwv li, rau ib nrab-dav "block khawm", siv .col-6. Center nws horizontally nrog .mx-auto, ib yam nkaus.

html

<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>

Kev siv hluav taws xob ntxiv tuaj yeem siv los kho qhov kev sib tw ntawm cov nyees khawm thaum kab rov tav. Ntawm no peb tau coj peb cov piv txwv yav dhau los teb thiab ntxiv qee qhov kev siv hluav taws xob flex thiab cov khoom siv hluav taws xob ntawm lub pob kom txoj cai sib dhos cov nyees khawm thaum lawv tsis raug teeb tsa lawm.

html

<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>

Khawm plugin

Lub khawm plugin tso cai rau koj los tsim cov nyees khawm yooj yim rau / tawm toggle.

Visually, cov khawm toggle no zoo ib yam rau lub checkbox toggle nyees khawm . Txawm li cas los xij, lawv raug xa tawm txawv los ntawm kev pabcuam thev naus laus zis: lub checkbox toggles yuav raug tshaj tawm los ntawm cov neeg nyeem cov ntawv tshuaj ntsuam raws li "checked" / "tsis tau kuaj" (vim, txawm tias lawv zoo li, lawv tseem nyob hauv checkboxes), whereas cov toggle nyees khawm yuav raug tshaj tawm raws li "khawm" / "khawm nias". Qhov kev xaiv ntawm ob txoj hauv kev no yuav nyob ntawm seb hom toggle koj tab tom tsim, thiab seb qhov toggle yuav ua rau muaj kev nkag siab rau cov neeg siv thaum tshaj tawm raws li lub checkbox lossis raws li lub pob tiag.

Toggle xeev

Ntxiv data-bs-toggle="button"rau toggle khawm lub activexeev. Yog tias koj tab tom qhib lub pob ua ntej, koj yuav tsum manually ntxiv cov .activechav kawm thiab aria-pressed="true" xyuas kom meej tias nws raug xa mus rau cov cuab yeej pabcuam.

html

<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>

Toggle link Active toggle link Disabled toggle link

html

<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>

Cov txheej txheem

Koj tuaj yeem tsim ib qho piv txwv nrog lub pob tsim, piv txwv li:

const bsButton = new bootstrap.Button('#myButton')

Txoj kev	Kev piav qhia
`dispose`	Ua kom lub ntsiab lub khawm. (Tshem cov ntaub ntawv khaws cia ntawm DOM lub caij)
`getInstance`	Txoj kev zoo li qub uas tso cai rau koj kom tau txais lub khawm piv txwv cuam tshuam rau DOM lub caij, koj tuaj yeem siv nws zoo li no: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	Txoj kev zoo li qub uas rov qab ib qho piv txwv cuam tshuam rau DOM lub caij lossis tsim ib qho tshiab yog tias nws tsis tau pib. Koj tuaj yeem siv nws li no: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	Toggles thawb lub xeev. Muab lub pob kom pom tias nws tau qhib.

Piv txwv li, toggle tag nrho cov nyees khawm

document.querySelectorAll('.btn').forEach(buttonElement => {
  const button = bootstrap.Button.getOrCreateInstance(buttonElement)
  button.toggle()
})

CSS

Hloov pauv

Ntxiv hauv v5.2.0

Raws li ib feem ntawm Bootstrap qhov hloov pauv CSS hloov pauv mus kom ze, cov nyees khawm tam sim no siv cov CSS hauv zos hloov pauv rau .btnkev txhim kho lub sijhawm hloov kho. Cov txiaj ntsig rau CSS qhov sib txawv tau teeb tsa ntawm Sass, yog li Sass customization tseem txhawb nqa, ib yam nkaus.

  --#{$prefix}btn-padding-x: #{$btn-padding-x};
  --#{$prefix}btn-padding-y: #{$btn-padding-y};
  --#{$prefix}btn-font-family: #{$btn-font-family};
  @include rfs($btn-font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-font-weight: #{$btn-font-weight};
  --#{$prefix}btn-line-height: #{$btn-line-height};
  --#{$prefix}btn-color: #{$body-color};
  --#{$prefix}btn-bg: transparent;
  --#{$prefix}btn-border-width: #{$btn-border-width};
  --#{$prefix}btn-border-color: transparent;
  --#{$prefix}btn-border-radius: #{$btn-border-radius};
  --#{$prefix}btn-hover-border-color: transparent;
  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
  --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);

Txhua .btn-*chav hloov kho hloov kho qhov tsim nyog CSS hloov pauv kom txo qis cov cai CSS ntxiv nrog peb button-variant(), button-outline-variant(), thiab button-size()mixins.

Nov yog ib qho piv txwv ntawm kev tsim cov .btn-*chav kawm hloov kho kev cai zoo li peb ua rau cov nyees khawm tshwj xeeb rau peb cov ntaub ntawv los ntawm reassigning Bootstrap's CSS variables nrog kev sib xyaw ntawm peb tus kheej CSS thiab Sass variables.

.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet);
  --bs-btn-border-color: var(--bd-violet);
  --bs-btn-border-radius: .5rem;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}

Sass variables

$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:              var(--#{$prefix}link-color);
$btn-link-hover-color:        var(--#{$prefix}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%;

Sib tov

Muaj peb lub mixins rau cov nyees khawm: khawm thiab khawm cov qauv sib txawv mixins (ob qho tib si raws li $theme-colors), ntxiv rau lub pob loj 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)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-bg: #{$background};
  --#{$prefix}btn-border-color: #{$border};
  --#{$prefix}btn-hover-color: #{$hover-color};
  --#{$prefix}btn-hover-bg: #{$hover-background};
  --#{$prefix}btn-hover-border-color: #{$hover-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$disabled-color};
  --#{$prefix}btn-disabled-bg: #{$disabled-background};
  --#{$prefix}btn-disabled-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)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-border-color: #{$color};
  --#{$prefix}btn-hover-color: #{$color-hover};
  --#{$prefix}btn-hover-bg: #{$active-background};
  --#{$prefix}btn-hover-border-color: #{$active-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$color};
  --#{$prefix}btn-disabled-bg: transparent;
  --#{$prefix}btn-disabled-border-color: #{$color};
  --#{$prefix}gradient: none;
}

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  --#{$prefix}btn-padding-y: #{$padding-y};
  --#{$prefix}btn-padding-x: #{$padding-x};
  @include rfs($font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-border-radius: #{$border-radius};
}

Sass loops

Khawm variants (rau cov nyees khawm tsis tu ncua thiab cov duab kos) siv lawv cov kev sib xyaw nrog peb $theme-colorsdaim ntawv qhia los tsim cov chav kawm hloov kho hauv scss/_buttons.scss.

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @if $color == "light" {
      @include button-variant(
        $value,
        $value,
        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
        $active-background: shade-color($value, $btn-active-bg-shade-amount),
        $active-border: shade-color($value, $btn-active-border-shade-amount)
      );
    } @else if $color == "dark" {
      @include button-variant(
        $value,
        $value,
        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
        $active-background: tint-color($value, $btn-active-bg-tint-amount),
        $active-border: tint-color($value, $btn-active-border-tint-amount)
      );
    } @else {
      @include button-variant($value, $value);
    }
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}