Bootstrap

Componentes

Bootstrap facilita la creación de los contenidos y componentes típicos de un interfaz web mediante el uso de clases específicas sobre los elementos HTML. Algunas de estas clases son luego procesadas mediante JavaScript para dar comportamiento. A continuación, se muestran algunos componentes basados puramente en el CSS de Bootstrap.

Cabecera y pie
<body>
  <nav class="navbar navbar-expand bg-dark" data-bs-theme="dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#"><i class="bi bi-lightbulb-fill"></i> Nombre de la web</a>
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Sección 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Sección 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Sección 3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Sección 4</a>
        </li>
      </ul>
    </div>
  </nav>
  <main></main>
  <footer class="fixed-bottom">
    <p class="border-top pt-3 text-center text-muted">© 2024 Nombre de la web</p>
  </footer>
</body>
html { font-size: 50%; }

Listas
<body>
<ul class="list-group list-group-numbered">
  <li class="list-group-item">Elemento normal</li>
  <li class="list-group-item list-group-item-info">Elemento con color</li>  
  <li class="list-group-item active" aria-current="true">Elemento activado</li> 
  <li class="list-group-item disabled" aria-disabled="true">Elemento desactivado</li>
  <li class="list-group-item list-group-item-action">Elemento interactivo</li>
</ul>
</body>
html { font-size: 75%; padding: 2rem; }

Tablas
<body>
<table class="table table-striped table-hover table-responsive">
  <caption>Estilos de tablas en Bootstrap</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Tipos</th>
      <th scope="col">Clase</th>
      <th scope="col">Ejemplo</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Con colores</td>
      <td><code>table-{color}</code></td>
      <td><code>&lt;tr class="table-info"></code></td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Con franjas</td>
      <td><code>table-striped</code></td>
      <td><code>&lt;table class="table table-striped"></code></td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Interactiva</td>
      <td><code>table-hover</code></td>
      <td><code>&lt;table class="table table-hover"></code></td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td>Sin bordes</td>
      <td><code>table-borderless</code></td>
      <td><code>&lt;table class="table table-borderless"></code></td>
    </tr>
    <tr>
      <th scope="row">5</th>
      <td>Responsiva</td>
      <td><code>table-responsive</code></td>
      <td><code>&lt;table class="table table-responsive"></code></td>
    </tr>
  </tbody>
</table>
</body>
html { font-size: 50%; padding: 2rem; }

Formularios
<body>
  <form class="row g-3">
    <div class="col-md-12">
      <label for="usuario" class="form-label">Usuario</label>
      <div class="input-group">
        <input type="text" class="form-control" id="usuario" required="">
        <span class="input-group-text" id="inputGroupPrepend">@gmail.com</span>
      </div>
    </div>
    <div class="col-md-12 form-floating">
      <textarea class="form-control" placeholder="Añade un comentario" id="comment" style="height: 70px"></textarea>
      <label for="comment">Comentario</label>
    </div>
    <div class="col-12">
      <div class="row justify-content-end">
        <div class="col-auto">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" value="" id="notificacion" checked="">
            <label class="form-check-label" for="notificacion">Notificar</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" value="" id="importante">
            <label class="form-check-label" for="importante">Importante</label>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12">
      <button class="btn btn-primary" type="submit">Enviar</button>
    </div>
  </form>
</body>
html { font-size: 75%; padding: 2rem; }

Tarjetas
<body>
  <div class="card">
  <div class="card-header">Destacado</div>
  <div class="card-body row">
    <div class="col">
      <h5 class="card-title">Título tarjeta</h5>
      <p class="card-text">Descripción de la tarjeta. Hay muchas más versiones de tarjetas que puedes consultar en la documentación de Bootstrap.</p>
      <a href="https://getbootstrap.com/docs/5.3/examples/cheatsheet/#card" class="btn btn-primary">Documentación</a>
    </div>
    <figure class="col-auto px-4 text-center">
      <i class="bi bi-file-earmark-image" style="font-size: 4rem; color:gray;"></i>
      <figcaption>Imagen</figcaption>
    </figure>
  </div>
  <div class="card-footer text-muted">Pie</div>
</div>
</body>
html { font-size: 75%; padding: 2rem; }