BOOTSTRAP
Es un frameworok HTML, CSS y JS que facilita el desarrollo de proyectos responsive, está pensado primero para el móvil (mobile first). Es fácil de usar, y es compatible con las últmas vesiones de todos los browsers.
Descargar en: getbootstrap.com
Al descomprimir el archivo se crean tres carpetas: js, css y fonts:
bootstrap/
css/
bootstrap.css
bootstrap.css.map
bootstrap.min.css
bootstrap-theme.css
bootstrap-theme.css.map
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
glyphicons-halflings-regular.woff2
Hay plantillas de Bottstrap que puedes descargar
En la cabecera HTML, deberemos tener estos tres enlaces:
<!--Bootstrap CSS -->
<link rel="stylesheet"href="css/bootstrap.min.css">
<!--jQuery -->
<scriptsrc="jquery.min.js"></script>
<!--Bootstrap JavaScript -->
<scriptsrc="js/bootstrap.min.js"></script>
Debemos asegurarnos de incluir el inicio HTML5:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mi título</title>
</head>
<body>
</body>
</html>
Al ser un entorno Mobile first, tendremos que corregir la escala y ancho de inicio:
<meta name="viewport" content="width=device-width, initial-scale=1">
Clases
En Bootstrap hay dos clases de estructura:
1. La clase .container es responsive con un contenedor de ancho fijo
2. La clase .container-fluid es un contenedor del ancho de la pantalla de visualización.
Mi primer ejemplo de página bootstrap:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mi primera página Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Mi primera página Bootstrap</h1>
<p>Ejemplo de texto dentro de una caja contenedor fluido</p>
</div>
</body>
</html>
Grid
El sistema de Grid de bootstrap se basa en una rejilla de 12 columnas, que se puede agrupar.
Ver templates en:
https://www.behance.net/gallery/10563669/Bootstrap-Grid-PSD-Templates
Ejemplo de posibilidades de composición con grid de 12 columnas.
El grid tiene 4 tipos de distribución
- xs (teléfonos <768px)
- sm (tabletas ≥768px)
- md (escritoro ≥992px)
- lg (escritorios grandes (≥1200px)
El número de columnas que ocupa cada división, se hacen div de columnas dentro de un div de fila ROW, la suma debe ser 12, 4,4 y 4 o 4 y 8…
<div class="row">
<div class="col-#"></div>
</div>
<div class="row">
<div class="col-#"></div>
<div class="col-#"></div>
<div class="col-#"></div>
</div>
<div class="row">
...
</div>
Se definen columnas para cada tipo de distribución con los prefijos: .col-xs- .col-sm- .col-md- .col-lg-
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div>
<div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div>
</div>