Botones Bootstrap 5

Estilo de botón

Bootstrap 5 ofrece diferentes estilos de botones：

Ejemplo

<button type="button" class="btn">Básico</button>
<button type="button" class="btn btn-primary">Principal</button>
<button type="button" class="btn btn-secondary">Secundario</button>
<button type="button" class="btn btn-success">Éxito</button>
<button type="button" class="btn btn-info">Información</button>
<button type="button" class="btn btn-warning">Advertencia</button>
<button type="button" class="btn btn-danger">Peligroso</button>
<button type="button" class="btn btn-dark">Oscuro</button>
<button type="button" class="btn btn-light">Claro</button>
<button type="button" class="btn btn-link">Enlace</button>

Pruebe personalmente

La clase de botón se puede usar para <a>、<button> o <input> Elemento：

Ejemplo

<a href="#" class="btn btn-success">Botón de enlace</a>
<button type="button" class="btn btn-success">Botón</button>
<input type="button" class="btn btn-success" value="Botón de entrada">
<input type="submit" class="btn btn-success" value="Botón de envío">
<input type="reset" class="btn btn-success" value="Botón de restablecimiento">

Pruebe personalmente

¿Por qué escribimos un # en la propiedad href del enlace?}

Dado que no tenemos ninguna página a la que enlazar y no queremos recibir un mensaje "404", utilizamos # como enlace. En la vida real, debería ser la URL real de la página "Buscar".

Contorno de los botones

Bootstrap 5 también ofrece ocho botones de contorno/borde.

Al pasar el ratón sobre ellos, se puede ver el efecto adicional de "paso":

Ejemplo

<button type="button" class="btn btn-outline-primary">Principal</button>
<button type="button" class="btn btn-outline-secondary">Secundario</button>
<button type="button" class="btn btn-outline-success">Éxito</button>
<button type="button" class="btn btn-outline-info">Información</button>
<button type="button" class="btn btn-outline-warning">Advertencia</button>
<button type="button" class="btn btn-outline-danger">Peligroso</button>
<button type="button" class="btn btn-outline-dark">Oscuro</button>
<button type="button" class="btn btn-outline-light text-dark">Claro</button>

Pruebe personalmente

Tamaño de los botones

para botones grandes .btn-lg Clase, para usar en botones pequeños .btn-sm Clase:

Ejemplo

<button type="button" class="btn btn-primary btn-lg">Grande</button>
<button type="button" class="btn btn-primary">Predeterminado</button>
<button type="button" class="btn btn-primary btn-sm">Pequeño</button>

Pruebe personalmente

Botón de bloque

Si desea crear un botón de bloque que abarque toda la anchura del elemento padre, utilice .d-grid Clase "helper":

Ejemplo

<div class="d-grid">
  <button type="button" class="btn btn-primary btn-block">Botón de ancho completo</button>
</div>

Pruebe personalmente

Si tienes muchos botones de bloques, puedes usar .gap-* La clase controla el espacio entre ellas:

Ejemplo

<div class="d-grid gap-3">
  <button type="button" class="btn btn-primary btn-block">Botón de ancho completo</button>
  <button type="button" class="btn btn-primary btn-block">Botón de ancho completo</button>
  <button type="button" class="btn btn-primary btn-block">Botón de ancho completo</button>
</div>

Pruebe personalmente

Botón activo/deshabilitado

Los botones se pueden configurar como estado activo (mostrado como presionado) o deshabilitado (no clickeable):

la clase .active hace que el botón se muestre como presionado, mientras que deshabilitado La propiedad hace que el botón no sea clickeable. Tenga en cuenta que el elemento <a> no admite la propiedad disabled, por lo que debe usar .disabled La clase la hace visible visualmente como deshabilitada.

Ejemplo

<button type="button" class="btn btn-primary active">Primario activo</button>
<button type="button" class="btn btn-primary" disabled>Primario deshabilitado</button>
<a href="#" class="btn btn-primary disabled">Enlace deshabilitado</a>

Pruebe personalmente

Botón de cargador

Puedes agregar "spinner" a los botones, aprenderás más sobre nuestro tutorial de BS5 Spinner:

Ejemplo

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
  Cargando...
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Cargando...
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  Cargando...
</button>

Pruebe personalmente