in English

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.

<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

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

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

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

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.

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

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

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

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

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

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.

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

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

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

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

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

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

var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)

Tapereko	Techaukaha
`toggle`	Ombohasa estado empuje rehegua. Ome’ẽ pe botón-pe ojehechaháicha oñemboguata hague.
`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 pé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 reipuru péicha:`bootstrap.Button.getOrCreateInstance(element)`

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

var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
  var button = new bootstrap.Button(button)
  button.toggle()
})

Sass rehegua

Variables rehegua

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

Mixin-kuéra 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)
) {
  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);
}

Lazos rehegua

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} {
    @include button-variant($value, $value);
  }
}

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