BUTTONS EN BOOTSTRAP 4

Utilice los estilos de botones personalizados Bootstrap para acciones en formularios, dialogos y mas. Incluye soporte para un monton de variaciones contextuales, tamaños, estados y mas.

Ejemplo de buttons

<button type="button" class="btn btn-primary"<Primario</button<
<button type="button" class="btn btn-secondary"<Secundario</button<
<button type="button" class="btn btn-success"<Exito</button<
<button type="button" class="btn btn-info"<Informacion</button<
<button type="button" class="btn btn-warning"<Warning</button<
<button type="button" class="btn btn-danger"<Peligro</button<
<button type="button" class="btn btn-link"<Enlace</button<

Activar un buttons con active

Los botones activados apareceran presionados (con un fondo mas oscuro, un borde mas oscuro y una sombra insertada). No hay necesidad de agregar una clase a button, ya que utiliza una pseudo-clase. Sin embargo, todavia puede forzar el mismo aspecto activo con .active (debe incluir el atributo aria-pressed="true") si necesita replicar el estado mediante programacion.

Ejemplo de botones activados

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true"<Link principal</a<
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true"<Link secundario</a<

Desactivar un buttons con disabled

Haga que los botones parezcan inactivos agregando el atributo booleano disabled a cualquierelemento <buttona< Los botones desactivados que utilizan el elemento <a< se comportan de diferente manera:
  • <a< no admiten el atributo disabled, por lo que debe agregar la class .disabled para que aparezca visualmente deshabilitada.
  • Algunos estilos future-friendly se incluyen para desactivar todos los eventos de puntero en los botones de anclaje. En los navegadores que admiten esa propiedad, no vera el cursor desactivado en alt.
  • Los botones desactivados deben incluir el atributo aria-disabled="true" para indicar el estado del elemento a las tecnologias de asistencia.

plugin

Crear grupos de botones para mas componentes como barras de herramientas.

Etiquetas

Las class .btn estan diseñadas para usarse con el elemento <buttona<. Sin embargo, tambien puede usar estas clases en elementos <aa< o <inputa< (aunque algunos navegadores pueden aplicar un renderizado ligeramente diferente).

Cuando se usan clases de botones en <aa< elementos que se usan para activar la funcionalidad dentro de la pagina (como colapsar contenido), en lugar de vincular a nuevas paginas o secciones dentro de la pagina actual, estos enlaces deben tener un rol="boton" que transmiten su proposito a las tecnologias de ayuda, como los lectores de pantalla.

Ejemplo

<a class="btn btn-primary" href="#" role="button">Link</a<
<button class="btn btn-primary" type="submit">Boton</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"<

Outline

¿Necesita un boton, pero no con colores tan fuertes de fondo que traen? Reemplace las clases predeterminadas por las de .btn-outline-* para eliminar todas las imagenes y colores de fondo de cualquier boton.

Ejemplo

<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-info"<Info</button<
<button type="button" class="btn btn-outline-warning"<Warning</button<
<button type="button" class="btn btn-outline-danger"<Danger</button<

Sizes

¿Te gustan los botones mas grandes o mas pequeños? Agregue .btn-lg o .btn-sm para tamaños adicionales

Ejemplo

<button type="button" class="btn btn-primary btn-lg"<Boton Largo</button<
<button type="button" class="btn btn-secondary btn-lg"<Boton Largo</button<
<button type="button" class="btn btn-primary btn-sm"<Boton pequeño</button<
<button type="button" class="btn btn-secondary btn-sm"<Boton pequeño</button<

Metodo Buttons

$().button('toggle') Activa el estado toggle. Da al boton la apariencia de que se ha activado

Fecha actualización el 2017-10-26. Fecha publicación el 2017-10-26. Categoría: Bootstrap. Autor: Oscar olg Mapa del sitio
componente Buttons