Ver índice de contenidos del libro

1.3. La primera plantilla Bootstrap

Si eres nuevo en Bootstrap, puedes empezar con la plantilla HTML básica que se muestra a continuación o puedes echar un vistazo a los ejemplos de plantillas que hemos preparado. La idea de estos ejemplos es que los utilices como punto de partida para crear tus propios diseños.

El siguiente código HTML muestra una plantilla muy sencilla creada con Bootstrap:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Plantilla básica de Bootstrap</title>
 
    <!-- CSS de Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
 
    <!-- librerías opcionales que activan el soporte de HTML5 para IE8 -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>¡Hola mundo!</h1>
 
    <!-- Librería jQuery requerida por los plugins de JavaScript -->
    <script src="http://code.jquery.com/jquery.js"></script>
 
    <!-- Todos los plugins JavaScript de Bootstrap (también puedes
         incluir archivos JavaScript individuales de los únicos
         plugins que utilices) -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

1.3.1. Ejemplos de plantillas creadas con Bootstrap

Partiendo de la primera plantilla básica mostrada anteriormente se pueden crear muchos otros diseños de página. La siguiente lista muestra cómo crear algunos de los diseños más utilizados en los sitios web actuales.

Ejemplos básicos

Imagen Nombre Descripción
Plantilla básica Solamente contiene los archivos CSS y JavaScript compilados y un elemento .container
Tema de Bootstrap Página que utiliza el tema opcional de Bootstrap para mejorar la experiencia de los usuarios
Rejilla Varios ejemplos de rejillas con diferente división en columnas, anidamientos, etc.
Jumbotron Contiene un elemento muy destacado llamado jumbotron, un menú de navegación y varias columnas
Jumbotron estrecho Similar a la anterior, pero con un diseño personalizado más estrecho del habitual

Ejemplos con barras de navegación

Imagen Nombre Descripción
Barra de navegación Ejemplo muy sencillo de cómo crear una barra de navegación
Navegación estática Similar al anterior, pero la barra de navegación ocupa toda la anchura de la página
Navegación fija Similar al anterior, pero la barra de navegación permanece fija cuando se hace scroll en la página

Páginas con componentes propios

Imagen Nombre Descripción
Portada Plantilla para crear portadas sencillas y bonitas
Carrusel Página con un carrusel y una barra de navegación personalizados
Blog Página a dos columnas con cabecera y navegación personalizadas, ideal para un blog
Dashboard Diseño para crear paneles de control utilizados en el backend de los sitios web. El diseño a dos columnas incluye una barra lateral fija.
Login Página de login con un formulario sencillo para introducir usuario y contraseña
Navegación personalizada Página con una barra de navegación personalizada (y que no funciona del todo bien en los navegadores que utilizan WebKit)
Pie de página fijo El pie de página se muestra fijo en la parte inferior de la página
Navegación y pie de página fijos Similar al ejemplo anterior, pero ahora demás la página tiene una barra de navegación fija en la parte superior

Diseños experimentales

Imagen Nombre Descripción
Sin responsive Página con todas las características responsive de Bootstrap 3 desactivadas
Navegación fuera de página El menú de navegación es lateral y se oculta en dispositivos estrechos (cuenta con un botón para hacer que aparezca de nuevo)