Bouton

Sèvi ak estil bouton koutim Bootstrap pou aksyon nan fòm, dyalòg, ak plis ankò ak sipò pou plizyè gwosè, eta, ak plis ankò.

Nan paj sa a

Egzanp yo

Bootstrap gen ladan plizyè estil bouton predefini, chak sèvi pwòp objektif semantik li yo, ak kèk siplemantè jete nan pou plis kontwòl.

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>

Transmèt siyifikasyon nan teknoloji asistans

Sèvi ak koulè pou ajoute siyifikasyon sèlman bay yon endikasyon vizyèl, ki pa pral transmèt bay itilizatè teknoloji asistans - tankou lektè ekran. Asire w ke enfòmasyon ki endike nan koulè a se swa evidan nan kontni an li menm (egzanp tèks vizib la), oswa yo enkli nan mwayen altènatif, tankou tèks adisyonèl kache ak .visually-hiddenklas la.

Enfim anbalaj tèks

Si ou pa vle tèks bouton an vlope, ou ka ajoute .text-nowrapklas la nan bouton an. Nan Sass, ou ka mete $btn-white-space: nowrapenfim anbalaj tèks pou chak bouton.

Tag bouton

Klas .btnyo fèt pou itilize ak <button>eleman an. Sepandan, ou ka itilize tou klas sa yo sou <a>oswa <input>eleman (menm si kèk navigatè ka aplike yon rann yon ti kras diferan).

Lè w ap itilize klas bouton sou <a>eleman ki itilize pou deklanche fonksyonalite nan paj la (tankou kontni efondre), olye ke lyen ak nouvo paj oswa seksyon nan paj aktyèl la, yo ta dwe bay lyen sa yo yon role="button"fason apwopriye transmèt objektif yo nan teknoloji asistans tankou lektè ekran yo.

Link

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

Bouton deskripsyon yo

Nan bezwen yon bouton, men se pa koulè background for yo pote? Ranplase klas modifye default yo ak sa .btn-outline-*yo pou retire tout imaj background ak koulè sou nenpòt bouton.

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>

Gen kèk nan estil bouton yo sèvi ak yon koulè premye plan relativman limyè, epi yo ta dwe itilize sèlman sou yon background nwa yo nan lòd yo gen ase kontras.

Gwosè

Anpenpan bouton ki pi gwo oswa pi piti? Ajoute .btn-lgoswa .btn-smpou gwosè adisyonèl.

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>

Ou ka menm woule pwòp gwosè koutim ou a ak varyab CSS:

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>

Eta andikape

Fè bouton parèt inaktif lè w ajoute disabledatribi boolean an nan nenpòt <button>eleman. Bouton andikape yo te pointer-events: noneaplike nan, anpeche hover ak eta aktif soti nan deklanche.

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>

Bouton andikape lè l sèvi avèk <a>eleman an konpòte yon ti jan diferan:

<a>s pa sipòte disabledatribi a, kidonk ou dwe ajoute .disabledklas la pou fè li vizyèlman parèt enfim.
Gen kèk estil zanmitay nan lavni yo enkli pou enfim tout pointer-eventssou bouton jete lank.
Lè l sèvi avèk bouton ki andikape yo <a>ta dwe gen ladan aria-disabled="true"atribi a pou endike eta a nan eleman nan teknoloji asistans.
Bouton andikape lè l sèvi avèk <a> pa ta dwe gen ladan hrefatribi a.

Prensipal lyen Link

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>

Lyen fonksyonalite opozisyon

Pou kouvri ka kote ou dwe kenbe hrefatribi a sou yon lyen ki andikape, .disabledklas la itilize pointer-events: nonepou eseye enfim fonksyonalite lyen nan <a>s. Remake byen ke pwopriyete CSS sa a poko estanda pou HTML, men tout navigatè modèn yo sipòte li. Anplis de sa, menm nan navigatè ki sipòte pointer-events: none, navigasyon klavye rete pa afekte, sa vle di ke itilizatè klavye ki wè ak itilizatè teknoloji asistans yo ap toujou kapab aktive lyen sa yo. Se konsa, yo dwe an sekirite, anplis de aria-disabled="true", enkli tou yon tabindex="-1"atribi sou lyen sa yo pou anpeche yo resevwa konsantre klavye, epi sèvi ak JavaScript koutim pou enfim fonksyonalite yo nèt.

Prensipal lyen Link

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>

Bouton blòk yo

Kreye pil reponn ak tout lajè, "bouton blòk" tankou sa yo ki nan Bootstrap 4 ak yon melanj de ekspozisyon nou yo ak sèvis piblik espas. Lè nou sèvi ak sèvis piblik olye de klas espesifik bouton yo, nou gen pi gwo kontwòl sou espas, aliyman, ak konpòtman reponn.

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>

Isit la nou kreye yon varyasyon reponn, kòmanse ak bouton vètikal anpile jouk pwen mdrupture a, kote .d-md-blockranplase .d-gridklas la, konsa anile gap-2sèvis piblik la. Redimensionner navigatè ou a pou wè yo chanje.

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>

Ou ka ajiste lajè bouton blòk ou yo ak klas lajè kolòn kadriyaj la. Pou egzanp, pou yon "bouton blòk" mwatye lajè, sèvi ak .col-6. Santre li orizontal ak .mx-auto, tou.

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>

Lòt sèvis piblik yo ka itilize pou ajiste aliyman bouton lè orizontal. Isit la nou te pran egzanp repons anvan nou an epi ajoute kèk sèvis piblik fleksib ak yon sèvis piblik Marge sou bouton an a dwat aliman bouton yo lè yo pa anpile ankò.

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>

Plugin bouton

Plugin bouton an pèmèt ou kreye senp bouton aktive on/off.

Vizyèlman, bouton deklanchman sa yo idantik ak bouton deklanchman kaz . Sepandan, teknoloji asistans yo transmèt yo yon fason diferan: lektè ekran yo pral anonse kazye yo kòm "tcheke"/"pa tcheke" (piske, malgre aparans yo, yo fondamantalman toujou kaz), tandiske bouton sa yo pral anonse kòm. "bouton"/"bouton peze". Chwa ki genyen ant de apwòch sa yo pral depann de ki kalite baskil w ap kreye a, epi si wi ou non baskil la pral fè sans pou itilizatè yo lè yo anonse kòm yon kaz oswa kòm yon bouton aktyèl.

Chanje eta yo

Ajoute data-bs-toggle="button"pou chanje eta bouton an active. Si w ap chanje yon bouton davans, ou dwe ajoute .activeklas la manyèlman epi aria-pressed="true" asire w ke li transmèt yon fason apwopriye nan teknoloji asistans.

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>

Aktive lyen Aktif baskile lyen Enfim aktive lyen

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>

Metòd

Ou ka kreye yon egzanp bouton ak konstrukteur bouton an, pou egzanp:

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

Metòd	Deskripsyon
`dispose`	Detwi bouton yon eleman. (Retire done ki estoke sou eleman DOM)
`getInstance`	Metòd estatik ki pèmèt ou jwenn egzanp bouton ki asosye ak yon eleman DOM, ou ka itilize li tankou sa a: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	Metòd estatik ki retounen yon egzanp bouton ki asosye ak yon eleman DOM oswa kreye yon nouvo nan ka li pa te inisyalize. Ou ka itilize li tankou sa a: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	Baskile pouse eta a. Bay bouton an aparans ke li te aktive.

Pa egzanp, pou activer tout bouton

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

CSS

Varyab

Te ajoute nan v5.2.0

Kòm yon pati nan apwòch Bootstrap a evolye varyab CSS, bouton yo itilize kounye a varyab CSS lokal yo .btnpou amelyore personnalisation an tan reyèl. Valè pou varyab CSS yo mete atravè Sass, kidonk personnalisation Sass toujou sipòte tou.

  --#{$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);

Chak .btn-*klas modifye mete ajou varyab CSS ki apwopriye yo pou minimize règ CSS adisyonèl ak button-variant(), button-outline-variant(), ak button-size()mixin nou yo.

Men yon egzanp pou konstwi yon .btn-*klas modifye koutim tankou nou fè pou bouton ki inik nan dokiman nou yo lè nou reyajije varyab CSS Bootstrap yo ak yon melanj pwòp CSS ak Sass nou yo.

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

$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%;

Sass mixins

Gen twa mixin pou bouton: bouton ak deskripsyon bouton mixin variant (tou de baze sou $theme-colors), plis yon mixin gwosè bouton.

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

Variant bouton (pou bouton regilye ak bouton deskripsyon) itilize mixin respektif yo ak $theme-colorskat nou an pou jenere klas modifikatè yo nan 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);
  }
}