Botoiak

Erabili Bootstrap-en botoi-estilo pertsonalizatuak inprimakietan, elkarrizketa-koadroetan eta beste hainbat ekintzetarako, tamaina, egoera eta beste hainbat laguntzarekin.

Orrialde honetan

Adibideak

Bootstrap-ek aurrez zehaztutako hainbat botoi-estilo biltzen ditu, bakoitzak bere helburu semantikoa betetzen du, gehigarri batzuk kontrol gehiago izateko.

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>

Laguntza-teknologiei esanahia ematea

Kolorea esanahi gehitzeko kolorea erabiltzeak adierazgarri bisual bat baino ez du ematen, eta hori ez zaie helaraziko laguntza-teknologien erabiltzaileei, adibidez, pantaila-irakurgailuei. Ziurtatu kolorez adierazten den informazioa edukitik bertatik agerikoa dela (adibidez, ikusgai dagoen testua) edo beste bitarteko batzuen bidez sartzen dela, adibidez .visually-hiddenklasearekin ezkutatuta dagoen testu gehigarria.

Desgaitu testua biltzea

Botoiaren testua biltzea nahi ez baduzu, .text-nowrapklasea gehi diezaiokezu botoiari. $btn-white-space: nowrapSass-en, botoi bakoitzeko testu-biltzea desgaitzeko ezar dezakezu .

Botoien etiketak

Klaseak elementuarekin .btnerabiltzeko diseinatuta daude <button>. <a>Hala ere, klase hauek edo elementuetan ere erabil ditzakezu <input>(nabigatzaile batzuek errendatze apur bat desberdina aplika dezaketen arren).

Orri barruko funtzionalitateak abiarazteko erabiltzen diren elementuetan botoi-klaseak erabiltzen dituzunean <a>(esaterako, edukia tolestea), uneko orrialdeko orrialde edo atal berrietara estekatu beharrean, esteka hauek bat eman behar zaie role="button"beren helburua laguntza-teknologietara egoki helarazteko, esate baterako. pantaila-irakurgailuak.

Esteka

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

Eskema botoiak

Botoi bat behar al duzu, baina ez ekartzen dituzten atzeko planoko kolore handiak? Ordeztu modifikatzaile-klase lehenetsiak .btn-outline-*edozein botoitako atzeko planoko irudi eta kolore guztiak kentzeko dituztenekin.

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>

Botoi-estilo batzuek lehen planoko kolore argi samarra erabiltzen dute, eta hondo ilun batean bakarrik erabili behar dira kontraste nahikoa izateko.

Tamainak

Botoi handiagoak edo txikiagoak nahi dituzu? Gehitu .btn-lgedo .btn-smtamaina gehigarrietarako.

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>

Zure neurri pertsonalizatua ere egin dezakezu CSS aldagaiekin:

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>

Ezindu egoera

Egin botoiek inaktibo itxura emanez edozein elementuri disabledatributu boolearra gehituta. <button>Desgaitutako botoiak pointer-events: noneaplikatu dira, pasatzea eta egoera aktiboak abiarazteko saihestuz.

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>

Elementua erabiltzen duten desgaitutako botoiek <a>zertxobait desberdina dute:

<a>s ez dute disabledatributua onartzen, beraz, klasea gehitu behar duzu .disabledbisualki desgaituta ager dadin.
Etorkizuneko estilo batzuk sartzen dira pointer-eventsaingura-botoietan guztiak desgaitzeko.
Desgaitutako botoiek laguntza-teknologiei elementuaren egoera adierazteko atributua izan behar dute <a>.aria-disabled="true"
Erabiltzen diren desgaitutako botoiek <a> ez dute hrefatributua sartu behar.

Lotura nagusia Esteka

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>

Estekaren funtzionalitatearen oharra

hrefAtributua esteka desgaitu batean gorde behar duzun kasuak estaltzeko , .disabledklaseak s-ren pointer-events: noneesteka funtzionaltasuna desgaitzen saiatzeko erabiltzen du <a>. Kontuan izan CSS propietate hau oraindik ez dagoela HTMLrako estandarizatuta, baina arakatzaile moderno guztiek onartzen dute. Gainera, onartzen duten arakatzaileetan ere pointer-events: none, teklatuaren nabigazioa ez da eragiten, hau da, ikusmeneko teklatuaren erabiltzaileek eta laguntza-teknologien erabiltzaileek esteka hauek aktibatu ahal izango dituzte. Beraz, seguru egoteko, gehituz gain aria-disabled="true", esteka hauetan atributu bat ere sartu tabindex="-1"teklatuaren fokua jaso ez dadin, eta erabili JavaScript pertsonalizatua haien funtzionalitateak guztiz desgaitzeko.

Lotura nagusia Esteka

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>

Blokeatu botoiak

Sortu zabalera osoko "blokeatu botoi" multzo sentikorrak Bootstrap 4-n bezalakoak, gure pantaila eta hutsuneen erabilgarritasunen nahasketa batekin. Botoi espezifikoen klaseen ordez utilitateak erabiliz, askoz ere kontrol handiagoa dugu tartearen, lerrokatzearen eta erantzuteko jokabideen gainean.

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>

Hemen aldaera sentikor bat sortzen dugu, bertikalean pilatutako botoietatik hasita mdeten-puntura arte, non klasea .d-md-blockordezkatzen duen .d-grid, eta horrela erabilgarritasuna baliogabetzen du gap-2. Aldatu zure arakatzailea aldatzen ikusteko.

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>

Zure bloke-botoien zabalera doi dezakezu sareko zutabeen zabalera klaseekin. Adibidez, zabalera erdiko "blokeatu botoia" baterako, erabili .col-6. Zentratu horizontalean .mx-autoere.

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>

Utilitate gehigarriak erabil daitezke botoien lerrokatzea horizontalean doitzeko. Hemen gure aurreko sentikorren adibidea hartu dugu eta malgu-utilitate batzuk eta marjina-erabilgarritasun bat gehitu ditugu botoian botoiak eskuinera lerrokatzeko jada pilatuta ez daudenean.

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>

Botoiaren plugina

Botoien pluginak pizteko/desaktibatzeko botoi errazak sortzeko aukera ematen du.

Ikusmenean, txandakatzeko botoi hauek kontrol- laukiaren txandakatzeko botoien berdinak dira . Hala ere, laguntza-teknologiek modu ezberdinean transmititzen dute: kontrol-laukien txandaketak pantaila-irakurleek "markatuta"/"markatuta ez" gisa iragarriko dituzte (izan ere, itxura izan arren, funtsean kontrol-laukiak dira), eta txandakatze-botoi hauek bezala iragarriko dira. "botoia"/"botoia sakatuta". Bi ikuspegi hauen artean aukeratzea sortzen ari zaren etengailu motaren araberakoa izango da, eta etengailuak zentzua izango duen edo ez erabiltzaileentzat kontrol-lauki gisa edo benetako botoi gisa iragartzen denean.

Aldatu estatuak

Gehitu data-bs-toggle="button"botoi baten activeegoera aldatzeko. Botoi bat aldez aurretik txandakatzen ari bazara, eskuz gehitu behar duzu .activeklasea eta aria-pressed="true" laguntza-teknologietara egoki transmititzen dela ziurtatzeko.

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>

Aldatu esteka Txandakatzeko esteka aktiboa Desgaitu egin da txandakatzeko esteka

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>

Metodoak

Botoi-instantzia bat sor dezakezu botoiaren eraikitzailearekin, adibidez:

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

Metodoa	Deskribapena
`dispose`	Elementu baten botoia suntsitzen du. (DOM elementuan gordetako datuak kentzen ditu)
`getInstance`	DOM elementu bati lotutako botoiaren instantzia lortzeko aukera ematen duen metodo estatikoa, honela erabil dezakezu: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	Metodo estatikoa DOM elementu bati lotutako botoi-instantzia itzultzen duena edo berri bat sortzen du hasieratu ez bazen. Honela erabil dezakezu: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	Bultza-egoera aktibatzen du. Botoiari aktibatuta dagoen itxura ematen dio.

Adibidez, botoi guztiak aldatzeko

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

CSS

Aldagaiak

v5.2.0-n gehitua

Bootstrap-en CSS aldagaien bilakaeraren ikuspegiaren zati gisa, botoiek orain CSS aldagai lokalak erabiltzen dituzte aktibatuta .btndenbora errealean pertsonalizatzeko. CSS aldagaien balioak Sass bidez ezartzen dira, beraz, Sass pertsonalizazioa ere onartzen da oraindik ere.

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

Mugatzaile-klase bakoitzak .btn-*CSS aldagai egokiak eguneratzen ditu CSS arau gehigarriak minimizatzeko gure button-variant(), button-outline-variant(), eta button-size()mixinekin.

Hona hemen modifikatzaile klase pertsonalizatu bat eraikitzeko adibide bat .btn-*gure dokumentuetarako esklusiboak diren botoietarako egiten dugun bezala Bootstrap-en CSS aldagaiak gure CSS eta Sass aldagaien nahasketa batekin berriro esleituz.

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

$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

Botoientzako hiru nahasketa daude: botoiaren eta botoien eskema-aldaeraren mixin-ak (biak oinarritutakoak $theme-colors), gehi botoien tamainako mixin bat.

@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

Botoien aldaerek (botoi arruntetarako eta eskemarako) dagozkien nahasketak erabiltzen dituzte gure $theme-colorsmaparekin modifikatzaile-klaseak sortzeko 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);
  }
}