Primeros pasos con Bootstrap¶

Bootstrap es un popular framework de diseño web. Puede utilizarse tanto descargando el framework desde su web, como enlazándolo directamente desde algún repositorio online. Veremos en este documento estas dos formas de trabajar con él y los primeros pasos de prueba.

1. Descarga y/o instalación¶

Como hemos comentado, existen dos formas de utilizar Bootstrap: descargando los archivos e incorporándolos a nuestra web, o enlazarlos directamente desde su repositorio original. Veamos como hacer cada cosa...

1.1. Descargar Bootstrap¶

Si queremos descargar Bootstrap, tenemos varias opciones para ello. Una opción bastante sencilla consiste en descargarlo de su web oficial, a través de la documentación (Docs), en el apartado de Download. Por ejemplo, aquí tenemos las descargas para la versión 5.3.

Podemos descargar la versión ya compilada y preparada para usar (es menos modificable pero podemos empezar a trabajar con ella) o el código fuente de CSS y Javascript (es menos eficiente, pero lo podemos modificar mejor). Si no tenemos previsto modificar nada, es preferible la versión compilada.

Una vez descargado el archivo comprimido, veremos dentro varios archivos y carpetas, divididos en dos grandes bloques:

css: con los diferentes archivos CSS de estilos que podemos utilizar
js: con los distintos archivos JavaScript necesarios para algunas funcionalidades

En nuestro caso, basta con que copiemos estas dos carpetas en nuestra web (o bien en la carpeta inicial, o bien en alguna subcarpeta como bootstrap, por ejemplo). Después, simplemente tenemos que enlazar con el archivo bootstrap.min.css de la subcarpeta css. Por ejemplo:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Ejemplo Bootstrap</title>
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    </head>
    ...

Opcionalmente (aunque suele ser habitual) podemos enlazar también con el archivo JavaScript al final del cuerpo del documento, para cargar las funcionalidades añadidas:

        ...
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>

1.2. Enlazar con Bootstrap desde una fuente externa¶

Alternativamente, podemos no descargar Bootstrap y enlazar con alguna versión oficial en Internet. En este caso, los enlaces al CSS y al JavaScript pueden quedar como sigue (modificando la URL en función de la versión de Bootstrap que queramos usar), tal y como puede verse en la documentación oficial.

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Ejemplo Bootstrap</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" 
         integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" 
         rel="stylesheet" crossorigin="anonymous">
    </head>
    <body>
        ...
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js" 
        integrity="sha384-7qAoOXltbVP82dhxHAUje59V5r2YsVfBafyUDxEdApLPmcdhBPg1DKg1ERo0BZlK" 
        crossorigin="anonymous"></script>
    </body>
</html>

Nota

Como veremos más adelante, algunos componentes de Bootstrap ofrecen algunos efectos como desplegables (dropdown) o popups. Para que esto pueda ser posible se debe añadir también la librería JavaScript popper, además de la anterior (justo antes de ella):

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>

2. Uso de Bootstrap junto con estilos propios¶

Tras el paso anterior, ya podríamos ver que el contenido de nuestra página tiene un aspecto diferente al que tiene por defecto en un navegador, gracias a los estilos de Bootstrap. Por ejemplo, se habrá cambiado el tipo de fuente por defecto. Sin embargo, en ocasiones puede que nos interese modificar ese estilo predefinido, y aportar algo propio: colores de fondo, bordes a algunos componentes, etc. En este caso, podemos incluir nuestra propia hoja de estilos CSS, que deberá ubicarse siempre después de haber incorporado los estilos de Bootstrap, para evitar problemas si hubiera algún conflicto con algún estilo:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Ejemplo Bootstrap</title>
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/estilos.css">
    </head>
    ...

Nota

En el ejemplo anterior, se asume que todo el contenido de Bootstrap está en una subcarpeta bootstrap de nuestro proyecto, y los estilos propios están en una carpeta css, externa a Bootstrap.