Primeros pasos
En este capitulo vamos a dar nuestros primeros pasos con Bootstrap, como descargarlo, como usarlo, plantillas básicas, etc.
Descargarlo
La versión actual de Bootstrap es la v3.3.7. La podemos descargar de varias maneras pero la recomendada por ahora es la descarga directa o agregarlo por medio de los CDN (content delivery network) disponibles incluyendo el siguiente código.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Lo que se incluye
Al descargar los archivos podemos encontrar los siguientes directorios y archivos, que agrupan lógicamente los recursos comunes y proveen variaciones compiladas y minimizadas.
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff
En este caso se incluyen los archivos CSS y JavaScript necesarios para el funcionamiento de la página. Además de las tipografías que se usan para crear los iconos que provee Bootstrap y una hoja de estilo que funciona como tema por defecto.
Plantilla básica
A continuación se presenta el código HTML base para iniciar con una página web.
<!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>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Antes de continuar
Antes de comenzar a darle uso a Bootstrap es muy importante reconocer algunos puntos.
Doctype de HTML5
Bootstrap hace uso de elementos de HTML y propiedades de CSS que requieren del doctype de HTML5. Debemos incluirlo siempre en nuestros proyectos.
<!DOCTYPE html>
<html lang="en">
...
</html>
Mobile First
A diferencia de versiones anteriores de Bootstrap, a partir de la versión 3.0 se incluyen desde el núcleo del sistema estilos compatibles con dispositivos moviles, en lugar de incluirse por aparte. Esto hace que esta versión sea Mobile First.
Para asegurarnos de que se presente correctamente y funcione el zoom en dispositivos mobiles debemos agregar el siguiente código en nuestro <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">
Normalize.css
Para mejorar la experiencia a traves de los distintos navegadores Bootstrap incluye el normalize.css, creado por Nicolas Gallagher y Jonathan Neal.
Contenedores
Bootstrap necesita un elemento contenedor para envolver el contenido del sitio y servir de referencia para nuestra cuadrilla o grid. Podemos escoger de dos contenedores que tenemos disponibles para nuestros proyectos. Es muy importante que estos contenedores no debemos anidarlos en otro elemento que forme parte de la cuadrilla.
La clase .container nos permite crear un contenedor con restricción en su ancho.
<div class="container">
...
</div>
La clase .container-fluid nos permite crear un contenedor sin restricción en su ancho. Esto nos permite crear páginas web que cubran el 100% del espacio disponible en la ventana del navegador.
<div class="container-fluid">
...
</div>