Bootstrap: Componentes

Bootstrap CSS 5.3 ofrece una amplia gama de componentes que facilitan el desarrollo de interfaces web. En esta guía, exploraremos algunos de los componentes más utilizados y cómo implementarlos correctamente en tus proyectos.

Botones

Los botones en Bootstrap CSS 5.3 son elementos esenciales para la interacción del usuario. Puedes personalizarlos mediante clases predefinidas.

<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">Éxito</button>
<button type="button" class="btn btn-danger">Peligro</button>
<button type="button" class="btn btn-warning">Advertencia</button>
<button type="button" class="btn btn-info">Información</button>
<button type="button" class="btn btn-light">Claro</button>
<button type="button" class="btn btn-dark">Oscuro</button>

Formularios

Los formularios en Bootstrap CSS 5.3 son altamente personalizables y accesibles. A continuación, se muestra un ejemplo de un formulario básico.

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Dirección de correo electrónico</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">Nunca compartiremos tu correo con nadie más.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Contraseña</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Recuérdame</label>
  </div>
  <button type="submit" class="btn btn-primary">Enviar</button>
</form>

Tarjetas

Las tarjetas son contenedores flexibles y extensibles que incluyen opciones para cabeceras, pies de página, contenido multimedia y más.

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Título de la tarjeta</h5>
    <p class="card-text">Texto de ejemplo rápido para construir en el título de la tarjeta y rellenar el contenido de la tarjeta.</p>
    <a href="#" class="btn btn-primary">Ir a algún lugar</a>
  </div>
</div>

Alertas

Las alertas son útiles para mostrar mensajes importantes al usuario. Bootstrap CSS 5.3 ofrece varias clases para diferentes tipos de alertas.

<div class="alert alert-primary" role="alert">
  Alerta primaria: Este es un mensaje de alerta primaria.
</div>
<div class="alert alert-secondary" role="alert">
  Alerta secundaria: Este es un mensaje de alerta secundaria.
</div>
<div class="alert alert-success" role="alert">
  Alerta de éxito: Este es un mensaje de alerta de éxito.
</div>
<div class="alert alert-danger" role="alert">
  Alerta de peligro: Este es un mensaje de alerta de peligro.
</div>
<div class="alert alert-warning" role="alert">
  Alerta de advertencia: Este es un mensaje de alerta de advertencia.
</div>
<div class="alert alert-info" role="alert">
  Alerta informativa: Este es un mensaje de alerta informativa.
</div>
<div class="alert alert-light" role="alert">
  Alerta clara: Este es un mensaje de alerta clara.
</div>
<div class="alert alert-dark" role="alert">
  Alerta oscura: Este es un mensaje de alerta oscura.
</div>

Navegación

Bootstrap CSS 5.3 proporciona componentes de navegación que se pueden personalizar fácilmente.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Inicio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Características</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Precios</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Deshabilitado</a>
      </li>
    </ul>
  </div>
</nav>

Estos son solo algunos ejemplos de los componentes que ofrece Bootstrap CSS 5.3. Para más detalles y opciones avanzadas, consulta la documentación oficial.