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) |