Componentes principales

En esta página vamos a dar un repaso a algunos de los componentes predefinidos que podemos añadir en nuestras páginas.

1. Barras de navegación

Las barras de navegación son un componente importante en el diseño de cualquier página. Contienen un conjunto de enlaces que nos permiten visitar las páginas más relevantes del sitio. Bootstrap ofrece una amplia gama de selectores de clase que podemos utilizar para definir un estilo personalizado en nuestras barras. Podemos consultar toda la información disponible aquí.

Por ejemplo, así podemos definir una barra de navegación con tres apartados: Inicio, Noticias y Contacto. Dentro de Noticias definimos un dropdown menu (menú desplegable) con las diferentes categorías de noticias que podemos consultar.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Mi Web</a>
        <button class="navbar-toggler" type="button" 
            data-bs-toggle="collapse" data-bs-target="#navbarScroll" 
            aria-controls="navbarScroll" aria-expanded="false" 
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarScroll">
            <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" 
            style="--bs-scroll-height: 100px;">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" 
                    href="inicio.html">Inicio</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" 
                    id="navbarScrollingDropdown" role="button" 
                    data-bs-toggle="dropdown" aria-expanded="false">
                        Noticias
                    </a>
                    <ul class="dropdown-menu" 
                    aria-labelledby="navbarScrollingDropdown">
                        <li><a class="dropdown-item" 
                            href="economia.html">Economía</a></li>
                        <li><a class="dropdown-item" 
                            href="deportes.html">Deportes</a></li>
                        <li><a class="dropdown-item" 
                            href="sociedad.html">Sociedad</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link" aria-current="page" 
                    href="contacto.html">Contacto</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

El aspecto visual sería éste, ya que hemos elegido el tema dark:

Nota

Es IMPORTANTE tener en cuenta que, para que algunas funcionalidades como el dropdown funcionen, será necesario cargar el componente JavaScript de Bootstrap en la página, como se ha visto en los ejemplos anteriores (normalmente al final de la página).

2. Alertas e insignias

Dos componentes muy sencillos de utilizar son las alertas (alert) y las insignias (badges). Los primeros permiten mostrar mensajes con un color de fondo particular en ciertas partes de la web. Pueden resultar útiles para mostrar mensajes de error o de advertencia en algunos puntos. Por ejemplo, un error en un formulario:

<form action="mipagina.php" method="post">
    <label class="form-label" for="nombre">Introduce tu nombre:</label>
    <input class="form-control" type="text" name="nombre" id="nombre" size="20">
    <div class="alert alert-danger">Error: el nombre no puede estar vacío</div>

que se vería de este modo:

Existen diferentes colores para las alertas, similares a los colores para los botones vistos antes (primary, secondary, success, warning, info...).

En cuanto a las insignias o badges, permiten mostrar un pequeño texto resaltado en ciertas partes de la web. Podemos utilizarlo, por ejemplo, para indicar contenido nuevo:

<p>
    Ya a la venta nuestro nuevo curso de diseño web para principiantes
    <span class="badge badge-warning">Nuevo!</span>
</p>

3. Más componentes

Existe una amplia variedad de componentes ofrecidos por Bootstrap. Desde elementos simples como migas de pan o listas, hasta elementos más complejos como carruseles de diapositivas o ventanas modales. Puedes consultar información sobre todos ellos en la documentación oficial.