Bootstrap - Botones

Este capítulo cubre la edad de uso del botón Bootstrap con ejemplos. Cualquier cosa que tenga una clase de.btnheredará el aspecto predeterminado de un botón gris con esquinas redondeadas. Sin embargo, Bootstrap proporciona algunas opciones para diseñar botones, que se resumen en la siguiente tabla:

No Señor.	Clase y descripción
1	btn Botón predeterminado / estándar.
2	btn-primary Proporciona un peso visual adicional e identifica la acción principal en un conjunto de botones.
3	btn-success Indica una acción exitosa o positiva.
4	btn-info Botón contextual para mensajes de alerta informativos.
5	btn-warning Indica que se debe tener precaución con esta acción.
6	btn-danger Indica una acción peligrosa o potencialmente negativa.
7	btn-link Restar énfasis a un botón haciéndolo parecer un enlace mientras se mantiene el comportamiento del botón.

El siguiente ejemplo demuestra todas las clases de botones anteriores:

<!-- Standard button -->
<button type = "button" class = "btn btn-default">Default Button</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type = "button" class = "btn btn-primary">Primary Button</button>

<!-- Indicates a successful or positive action -->
<button type = "button" class = "btn btn-success">Success Button</button>

<!-- Contextual button for informational alert messages -->
<button type = "button" class = "btn btn-info">Info Button</button>

<!-- Indicates caution should be taken with this action -->
<button type = "button" class = "btn btn-warning">Warning Button</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type = "button" class = "btn btn-danger">Danger Button</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type = "button" class = "btn btn-link">Link Button</button>

Tamaño del botón

La siguiente tabla resume las clases utilizadas para obtener botones de varios tamaños:

No Señor.	Clase y descripción
1	.btn-lg Esto aumenta el tamaño del botón.
2	.btn-sm Esto hace que el tamaño del botón sea pequeño.
3	.btn-xs Esto hace que el tamaño del botón sea más pequeño.
4	.btn-block Esto crea botones de nivel de bloque, aquellos que abarcan todo el ancho de un padre.

El siguiente ejemplo demuestra esto:

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Large Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg">
      Large button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary">
      Default size Primary button
   </button>
   
   <button type = "button" class = "btn btn-default">
      Default size button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-sm">
      Small Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-sm">
      Small button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-xs">
      Extra small Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-xs">
      Extra small button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg btn-block">
      Block level Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg btn-block">
      Block level button
   </button>
</p>

Estado del botón

Bootstrap proporciona clases que le permiten cambiar el estado de los botones como activo, deshabilitado, etc., cada uno de los cuales se describe en las siguientes secciones.

Estado activo

Los botones aparecerán presionados (con un fondo más oscuro, un borde más oscuro y una sombra insertada) cuando estén activos. La siguiente tabla resume las clases utilizadas para activar los elementos de botón y los elementos de anclaje:

Elemento	Clase
Elemento de botón	Utilizar .active class para mostrar que está activado.
Elemento de ancla	Utilizar .active class a los botones <a> para mostrar que está activado.

El siguiente ejemplo demuestra esto:

<p>
   <button type = "button" class = "btn btn-default btn-lg ">
      Default Button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg active">
      Active Button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Primary button
   </button>
   
   <button type = "button" class = "btn btn-primary btn-lg active">
      Active Primary button
   </button>
</p>

Estado discapacitado

Cuando deshabilita un botón, se desvanecerá en color en un 50% y perderá el degradado.

La siguiente tabla resume las clases utilizadas para desactivar el elemento de botón y el elemento de anclaje:

Elemento	Clase
Elemento de botón	Añade el disabled atributo a los botones <button>.
Elemento de ancla	Añade el disabled class a los botones <a>. Note- Esta clase solo cambiará la apariencia de <a>, no su funcionalidad. Debe utilizar JavaScript personalizado para deshabilitar los enlaces aquí.

El siguiente ejemplo demuestra esto:

<p>
   <button type = "button" class = "btn btn-default btn-lg">
      Default Button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg" disabled = "disabled">
      Disabled Button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Primary button
   </button>
   
   <button type = "button" class = "btn btn-primary btn-lg" disabled = "disabled">
      Disabled Primary button
   </button>
</p>

<p>
   <a href = "#" class = "btn btn-default btn-lg" role = "button">
      Link
   </a>
   
   <a href = "#" class = "btn btn-default btn-lg disabled" role = "button">
      Disabled Link
   </a>
</p>

<p>
   <a href = "#" class = "btn btn-primary btn-lg" role = "button">
      Primary link
   </a>
   
   <a href = "#" class = "btn btn-primary btn-lg disabled" role = "button">
      Disabled Primary link
   </a>
</p>

Etiquetas de botón

Puede usar clases de botones con el elemento <a>, <button> o <input>. Pero se recomienda que lo use con elementos <button> principalmente para evitar problemas de inconsistencia entre navegadores.

El siguiente ejemplo demuestra esto:

<a class = "btn btn-default" href = "#" role = "button">Link</a>
<button class = "btn btn-default" type = "submit">Button</button>
<input class = "btn btn-default" type = "button" value = "Input">
<input class = "btn btn-default" type = "submit" value = "Submit">

↰ Previous page Next page ↱