Para los que comienzan, Bootstrap es un proyecto open source, un framework de front-end desarrollado por dos empleados de Twitter, que combinan HTML, CSS y JavaScript la cual permite agilizar el desarrollo de un proyecto, y optimizar el tiempo, también vieron que podía adaptarse a cualquier proyecto. Actualmente se encuentra en la versión 4.0

Características :

  • Maneja un Sistema de Rejillas (layout o estructura de web).
  • Tiene conjuntos de estilos CSS predefinidos.
  • Tiene la filosófia de Mobile First (Primero pensado en el desarrollo móvil para arriba).
  • Permite crear proyectos web RWD (Responsive Web Design).
  • Conjunto de funcionalidades como plugin en javascript con jQuery.
  • Soporte a muchos navegadores.
  • La curva de aprendizaje  es fácil y sencilla.
  • Comunicación efectiva sobre el sistema de columnas o rejillas entre el diseñador y programador

¿Que podemos hacer con BootStrap?

Multitud de paginas de proyectos pequeños a grandes, paginas web totalmente responsivas o adaptables a cualquier tamaño de pantalla en dispositivo móviles o tablets. Podemos ver ejemplos de pagina que utilizan bootstrap en mediaqueri.es.

Lo pueden descargar desde su pagina oficial aquí.

Recursos para el Sistema de Rejillas con BootStrap

  • PSD Wrangler : Un plugin de rejillas para Photoshop o Ilutrator,  que sirve como guía para crear las composiciones y personalizarlo como numero de rejillas, espacio entre columnas, etc. Con esto se obtiene un mejor coordinación de rejillas entre el área de diseño para que también utilizaren en el área de desarrollo en la maquetación.
  • Layoutit : Una excelente herramienta para el Sistema de diseño visual online, podemos crear maquetaciones o prototipos rápidamente de Bootstrap con la simplesa de Drag and Drop. Par posteriormente descargarlo con el código generado.
  • GuideGuide : Extensión para Photoshop para generación de grupos de guías y sistemas de rejillas de mucha utilidad y muy popular.

Pagina base para el uso de BootStrap

Una vez descargado los archivos de distribución de BootStrap, ya podemos comenzar a desarrollar nuestro proyecto.

[code language=»html»]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prueba de Bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>

<h1>HOla Mundo</h1>

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

Recordar que por defecto BootStrap viene con 12 columnas y las filosofía Mobile First que primero para móviles.

Así funciona el sistema de rejillas de Bootstrap

Veremos como responde ante cualesquier tamaño de dispositivo desde móvil hasta un pantalla de escritorio.

Gestión de columnas Responsivas en Bootstrap

  • Por defecto usa 12 columnas, y sigue la filosofia Mobile First (primero el desarrollo desde el móvil).
  • Tiene tres reglas para anidar con clases predeterminada: las columnas con prefijos (.col-xs . col-sm .col-md .col-lg) dentro de las filas (.row) y este a su vez dentro de un contenedor (.container).
  • Las columnas tienen que sumar 12 respectivamente su prefijo(.col-xs . col-sm .col-md .col-lg).
  • Primero respeta el tamaño mas pequeño .col-xs luego si existe la clase superior va escalando el ancho.

Veamos un ejemplo :

[code language=»html»]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prueba de Bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<style type="text/css">
.columna {
background-color: orange;
border: 1px solid #333;
}
</style>
<body>

<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1 columna">Primero</div>
<div class="col-xs-12 col-sm-5 col-md-6 col-lg-7 columna">Segundo</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 columna">Tercero</div>
</div>
</div>

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

Como resultado de .col-xs-12 tenemos :

Y usando el mas superior de columnas para pantallas grandes .col-lg