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ã.
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-hidden
mboꞌepy ndive.
Embogue jehaipyre ñembohysýi
Ndereipotáiramo pe botón jehaipyre oñembojere, ikatu emoĩ pe .text-nowrap
mbo’esyry pe botón-pe. Sass-pe, ikatu emohenda $btn-white-space: nowrap
embogue hag̃ua jehaipyre ñembohysýi peteĩteĩva mboajepyrévape g̃uarã.
Etiquetas de botón rehegua
Umi .btn
mboꞌ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.
<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>
Tuichakuéra
¿Reipotaiterei umi botón tuichavéva térã michĩvéva? Oñemoĩve .btn-lg
térã .btn-sm
umi 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 disabled
atributo booleano oimeraẽ <button>
elemento-pe. Umi botón pointer-events: none
oñ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õidisabled
atributo, upévare emoĩva’erã.disabled
mbo’esyry ojehecha hag̃ua ojehechaháicha oñemboykéva.- Oĩ estilo futuro-pe g̃uarã oñemboguapýva oñemboyke hag̃ua opaite
pointer-events
umi botón anclaje-pe. - Umi botón oñemboykéva oguerekovaꞌerã
aria-disabled="true"
atributo ohechauka hag̃ua elemento estado umi tecnología oipytyvõvape.
<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>
Enlace funcionalidad rehegua advertencia
Pe .disabled
mbo’esyry oipuru pointer-events: none
oñeha’ã hag̃ua ombogue <a>
s joajuha rembiaporã, ha katu upe CSS mba’ekuaarã ne’ĩra gueteri oñemboheko. 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.
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 md
ruptura peve, .d-md-block
omyengoviahápe .d-grid
clase, upéicha ñaanula pe gap-2
utilidad. 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.
Ombohasa umi estado
Emoĩve data-bs-toggle="button"
emoambue hag̃ua peteĩ botón active
estado. Embohasáramo peteĩ botón, emoĩva’erã manualmente pe .active
clase 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>
<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 href="#" class="btn btn-primary disabled" tabindex="-1" 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 en caso 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-colors
mapa 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);
}
}