Umi botón rehegua

Eipuru Bootstrap estilo botón jeporupyre rehegua tembiaporãme g̃uarã formulario, ñe’ẽñemi ha hetave mba’épe pytyvõ reheve heta tuichakue, estado ha hetave mba’épe g̃uarã.

Ko páhinape

Tembiecharã

Bootstrap oguereko heta estilo botón oñembohekopyréva, peteĩteĩva oservíva ipropósito semántico, mbovymi extra oñemombóva ipype control hetave hag̃ua.

html rehegua

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

Ombohasávo he’iséva umi tecnología oipytyvõvape

Oipurúvo saꞌi omoĩ hag̃ua heꞌiséva omeꞌe peteĩ jehechaukarãnte, noñembohasamoꞌãiva umi oiporúvape umi tecnología oipytyvõva – haꞌeháicha umi pantalla moñeꞌerã. Ejesareko marandu ojehechaukáva saꞌi rupive ojehecha porãha pe contenido-gui voi (techapyrã, jehaipyre ojehecháva), térã oikeha ambue tape rupive, haꞌeháicha jehaipyre adicional oñeñomivaꞌekue .visually-hiddenmboꞌepy ndive.

Embogue jehaipyre ñembohysýi

Ndereipotáiramo pe botón jehaipyre oñembojere, ikatu emoĩ pe .text-nowrapmbo’esyry pe botón-pe. Sass-pe, ikatu emohenda $btn-white-space: nowrapembogue hag̃ua jehaipyre ñembohysýi peteĩteĩva mboajepyrévape g̃uarã.

Etiquetas de botón rehegua

Umi .btnmboꞌepy ojejapo ojepuru hag̃ua <button>elemento ndive. Ha katu, ikatu avei eipuru ko’ã mbo’esyry <a>térã <input>elemento rehe (jepémo oĩ kundahára ikatúva omoĩ peteĩ ñe’ẽmondo iñambue’imiva).

Oipurúvo mboꞌepy botón rehegua umi <a>elemento ojeporúva omoñepyrũ hag̃ua mbaꞌeporã página ryepýpe (contenido oñemboguejývaicha), oñembojoaju rangue página térã sección pyahúpe página koꞌag̃agua ryepýpe, koꞌã joajuha oñemeꞌevaꞌerã peteĩ role="button"ombohasa hag̃ua hekopete hembipotápe umi tecnología oipytyvõvape haꞌeháicha umi moñe’ẽrã pantalla rehegua.

Joajuha

html rehegua

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

Umi botón esquema rehegua

¿Oikotevẽ peteĩ botón, ha katu ndaha’éi umi colores de fondo hefty oguerúva hikuái? Emyengovia umi clase modificador por defecto .btn-outline-*umi oipeꞌa hag̃ua opaite taꞌãngamýi ha saꞌi tapykuegua oimeraẽva botón rehe.

html rehegua

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

Oĩ umi estilo botón rehegua oipurúva peteĩ color primer plano relativamente tesape, ha ojepuruvaꞌerã peteĩ fondo iñypytũvape añoite ikatu hag̃uáicha oguereko suficiente contraste.

Tuichakuéra

¿Reipotaiterei umi botón tuichavéva térã michĩvéva? Oñemoĩve .btn-lgtérã .btn-smumi tamaño adicional-pe g̃uarã.

html rehegua

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

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

Ikatu voi embojere nde mba’ekuaarã tee CSS mba’ekuaarã reheve:

html rehegua

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

Estado discapacitado rehegua

Ejapo umi botón ojehecha hag̃ua inactivo emoĩvo disabledatributo booleano oimeraẽ <button>elemento-pe. Umi botón pointer-events: noneoñemboykéva ojeporu, ojokóva hover ha estado activo oñemboguata hag̃ua.

html rehegua

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

Umi botón oñemboykéva oipurúva <a>elemento oñekomporta iñambue’imi:

<a>s ndoipytyvõi disabledatributo, upévare emoĩva’erã .disabledmbo’esyry ojehecha hag̃ua ojehechaháicha oñemboykéva.
Oĩ estilo futuro-pe g̃uarã oñemboguapýva oñemboyke hag̃ua opaite pointer-eventsumi botón anclaje-pe.
Umi botón oñemboykéva oiporúva <a>oguerekovaꞌerã aria-disabled="true"atributo ohechauka hag̃ua elemento estado umi tecnología oipytyvõvape.
Umi botón oñemboykéva oiporúva ndoikéiva’erã <a> atributohref .

Enlace primario rehegua Joajuha

html rehegua

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

Enlace funcionalidad rehegua advertencia

Ojejahoꞌi hag̃ua umi káso oñeñongatuvaꞌerãhápe hrefatributo peteĩ joajuha oñemboykévape, .disabledmboꞌepy oipuru pointer-events: noneoñehaꞌã hag̃ua oñembogue hag̃ua joajuha rembiaporã <a>s rehegua. Eñamindu’u ko CSS mba’ekuaarã ne’ĩra gueteri oñemboheko HTML-pe g̃uarã, ha katu opaite kundahára ko’ag̃agua oipytyvõ. Avei, umi kundahárape jepe oipytyvõva pointer-events: none, teclado jeguata opyta ndojehúi mba’eve, he’iséva umi teclado ohecháva ha umi tecnología oipytyvõva oipurúva ikatúta gueteri omomba’apo ko’ã joajuha. Upéicha reime hag̃ua seguro, además de aria-disabled="true", emoĩ avei peteĩ tabindex="-1"atributo ko’ã enlace-pe ani hag̃ua ohupyty teclado enfoque, ha eipuru JavaScript personalizado embogue hag̃ua hembiaporãite.

Enlace primario rehegua Joajuha

html rehegua

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

Ojejoko umi botón

Ejapo pila ombohováiva ipypukukue pukukue, “botón bloqueo” umi oĩva Bootstrap 4-peguáicha peteĩ mezcla ñande jehechauka ha gap utilidad-kuéra reheve. Oipurúvo utilidad umi clase específica botón rangue, jaguereko control tuichavéva espaciado, alineación ha comportamiento ombohováiva rehe.

html rehegua

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

Koꞌape jajapo peteĩ variación ombohováiva, ñañepyrũvo umi botón oñemboguapýva verticalmente punto de mdruptura peve, .d-md-blockomyengoviahápe .d-gridclase, upéicha ñaanula pe gap-2utilidad. Emoambue ne kundahára tuichakue rehecha hag̃ua oñemoambueha hikuái.

html rehegua

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

Ikatu emohenda nde bloque botón ipekue umi clase columna cuadrícula ipekue reheve. Techapyrã, peteĩ “botón bloque” mbyte ipekue rehegua, eipuru .col-6. Ecentra horizontalmente con .mx-auto, avei.

html rehegua

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

Ikatu ojepuru ambue utilidad oñemboheko hag̃ua umi botón alineación oĩ jave horizontal. Ko’ápe rogueraha ore techapyrã ombohováiva’ekue ymave ha romoĩ peteĩ utilidad flex rehegua ha peteĩ utilidad margen rehegua pe botón-pe oñemohenda hag̃ua akatúa gotyo umi botón noñemoĩvéima jave apilado.

html rehegua

<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 de botón rehegua

Pe mboajepyréva mboajepyréva oheja ndéve rejapo hag̃ua mboajepyréva ñemboguejy/ñembogue rehegua isãsóva.

Ojehechaháicha, ko’ã mboajepyréva ojoguaite umi mboajepyréva vore’i . Ha katu, oñembohasa ambue hendáicha umi tecnología pytyvõhára rupive: umi toggle casilla de verificación oikuaaukáta umi lector pantalla-pegua “ojehecháva”/“noñembohasái” (ojehechágui, jepémo ojehecha, fundamentalmente ha’e gueteri casilla de verificación), ko’ã botón toggle katu oñemoherakuãta ha’eháicha “botón”/“botón ojepysóva”. Pe jeporavo ko’ã mokõi enfoque apytépe odependeva’erã mba’eichagua toggle rehegua remoheñóiva rehe, ha pe toggle oguerekótapa sentido térã nahániri puruhárape oñemoherakuãvo peteĩ casilla de verificación ramo térã peteĩ botón añeteguáva ramo.

Ombohasa umi estado

Emoĩve data-bs-toggle="button"emoambue hag̃ua peteĩ botón activeestado. Embohasáramo peteĩ botón, emoĩva’erã manualmente pe .activeclase ha aria-pressed="true" eñangareko hag̃ua oñembohasaha hekopete umi tecnología oipytyvõvape.

html rehegua

<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 enlace rehegua Enlace de cambio activo rehegua Ojejoko enlace toggle rehegua

html rehegua

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

Método-kuéra rehegua

Ikatu ejapo peteĩ instancia botón rehegua pe botón apoha ndive, techapyrãramo:

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

Tapereko	Techaukaha
`dispose`	Ohundi peteĩ elemento botón. (Oipeꞌa umi dato oñeñongatúva elemento DOM-pe)
`getInstance`	Método estático ohejáva ndéve rehupyty pe instancia botón rehegua ojoajúva peteĩ elemento DOM rehe, ikatu reipuru kóicha: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	Método estático ombojevýva peteĩ instancia botón rehegua ojoajúva peteĩ elemento DOM rehe térã omoheñói peteĩ pyahu oiméramo noñemoñepyrũi. Ikatu reiporu péicha: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	Ombohasa estado empuje rehegua. Ome’ẽ pe botón-pe ojehechaháicha oñemboguata hague.

Techapyrã, oñemboheko hag̃ua opaite botón

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

CSS rehegua

Variables rehegua

Oñemoĩve v5.2.0-pe

Pehẽngue ramo Bootstrap CSS mbaꞌekuaarã oñembohapévape, umi botón koꞌág̃a oipuru CSS mbaꞌekuaarã local on .btn-pe oñembotuichave hag̃ua personalización tiempo real-pe. Umi mbaꞌekuaarã CSS mbaꞌekuaarãme g̃uarã oñemohenda Sass rupive, upévare oipytyvõ gueteri Sass jeporupyre, avei.

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

Káda .btn-*clase modificador ombopyahu umi variable CSS oñemohenda porãva omboguejy hag̃ua CSS regla adicional ñande button-variant(), button-outline-variant(), ha button-size()mixin-kuéra ndive.

Ko’ápe oĩ peteĩ techapyrã ñamopu’ã hag̃ua peteĩ .btn-*mbo’esyry modificador personalizado jajapoháicha umi botón ijojaha’ỹva ñande docs-pe g̃uarã ñamohenda jeývo Bootstrap CSS mba’ekuaarã peteĩ ñembojehe’a ñande CSS ha Sass mba’ekuaarã tee reheve.

.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 mba’ekuaarã

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

Oĩ mbohapy mixin umi botón-pe g̃uarã: botón ha botón esquema variante mixin (mokõivéva oñemopyenda $theme-colors), ha avei peteĩ mixin botón tuichakue.

@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 umi bucle

Umi botón variante (botón regular ha contorno-pe g̃uarã) oipuru umi mixin orekóva ore $theme-colorsmapa ndive omoheñói hag̃ua umi clase modificador rehegua 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);
  }
}