Como hacer nuestra primera web con bootstrap

Antes de empezar a trabajar con Bootstrap puedes echar un vistazo a la entrada BootStrap un framework de twitter y descargarte los archivos necesarios para su utilización. Una vez descargados dichos archivos y copiados a nuestro sitio web ya estamos listos para empezar a crear nuestra primera página web.

Lo primero que tenemos que saber es que trabaja con HTML5, con lo que la primera línea que usaremos son las siguientes etiquetas para indicarle que estamos trabajando con HTML5 y en idioma español.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">

A continuación tenemos que tener en cuenta que utiliza un diseño responsive, el cual se puede adaptar a todos los dispositivos móviles como tablet y teléfonos móviles, indicándole la siguiente línea:

 <meta name="viewport" content="width=device-width, initial-scale=1">

Lo siguiente que haremos sera ponerle los estilos css que vamos a usar y maximizar la compatibilidad con los navegadores antiguos añadiendo:

 <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <![endif]-->

Con esto ya estamos preparados para crear nuestra primera página web. Lo primero es indicarle si queremos que nuestro web se centre en el navegador o que ocupe todo el navegador, para esto añadiremos a nuestro código la clase container o container-fluid. Bootstrap define la clase .row que se usa para agrupar los contenidos horizontalmente y esta clase únicamente debe contener elementos con la clase columna.

Bootstrap trabaja con una rejilla de 12 columnas, las clases para las columnas empieza por:

col-xs- (para dispositivos muy pequeños, resolución inferior a 768px)

col-sm- (para dispositivos tipo tables con resolución superior a 768px)

col-md- (para dispositivos medianos con una resolución mayor a 992px)

col-lg- (para ordenadores de gran resolución, superior a 1200px)

Seguido de un numero que indica el tamaño de la columna, por ejemplo col-md-4 indicara que se trata de una clase para ordenador con 4 columnas. Si queremos que se adapte a los distintos dispositivos pondremos las clases de los correspondientes dispositivos. Por ejemplo si queremos una web centrada con 3 columnas de igual ancho en todos los dispositivos usaremos el siguiente código:

<div class="container">
 <div class="row">
    <div class="col-xs-4">contenido1</div>
    <div class="col-xs-4 ">contenido2</div>
    <div class="col-xs-4">contenido3</div>
 </div>    
</div>

Podemos indicarle también distintos anchos para distintos dispositivos, por ejemplo:

<div class="container">
 <div class="row">
    <div class="col-xs-12 col-sm-9 col-md-4">contenido1</div>
    <div class="col-xs-6 col-sm-3 col-md-4">contenido2</div>
    <div class="col-xs-6 col-sm-12 col-md-4">contenido3</div>
 </div>
</div>