Para los que comienzan, Bootstrap es un proyecto open source, un framework de Front-End desarrollado por dos empleados de Twitter, que combinan estas tecnologías HTML, CSS y JavaScript la cual permite agilizar el desarrollo de un proyecto Web, y optimizar el tiempo y ser mas productivo, también vieron que podía adaptarse a cualquier proyecto web.

Actualmente se encuentra en la versión 4.3

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 en el tema de compatibilidad.
  • La curva de aprendizaje es fácil y sencilla.
  • Hace la comunicación efectiva mas fácil sobre el sistema de columnas o rejillas entre el diseñador y programador.

¿Que podemos hacer con BootStrap?

Multitud de Páginas 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 paginas 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 una 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 simpleza de Drag and Drop. Para 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.

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

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

NOTA

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 CSS 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 :

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

Como resultado de .col-xs-12 tenemos :

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