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 atributodisabled, por lo que debe agregar la class.disabledpara que aparezca visualmente deshabilitada.- Algunos estilos
future-friendlyse 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 2021-10-26. Fecha publicación el 2017-10-26. Categoría: Bootstrap. Autor: Oscar olg Mapa del sitio
