Bootstrap 2.3.2: Guía inicial

Logo Twitter Bootstrap

Bootstrap es un framework CSS que se ha popularizado muchísimo por toda la red. Sus estilos responsive se dejan ver por las redes sociales Tuenti y Twitter. El uso de este nos ahorra muchísimo tiempo a la hora de desarrollar una aplicación web ya que nos evita todo el trabajo y esfuerzo que supone crear un estilo de página limpio y apto para todos los dispositivos. Consultando los estilos utilizados en este framework, nos daremos cuenta de que nos resultan familiares, pues hoy en día muchas webs lo han implementado.

La Estructura

Imagen de la estructura de Bootstrap

Estructura Fluida de Bootstrap

Para que nuestra web sea accesible desde móviles y tablets tendremos que utilizar la estructura fluida que nos ofrece Bootstrap. El uso de esta estructura es muy sencillo, todo se basa en elementos span que nos ayudarán a maquetar nuestro diseño web. Posteriormente, cuando accedamos a este diseño desde un smartphone o tablet, este se adaptara automáticamente a dicho dispositivo mejorando considerablemente la calidad de navegación. Usaremos los span con clases en divisiones lógicas dentro de la estructura fluida, es decir:

<div class="row-fluid">
   <div class="span2">Contenido</div>
</div>

Donde el número 2 representa el tamaño del span. Cada fila contiene el espacio suficiente como para 12 spans de tamaño 1, o 2 de tamaño 6, esto pueden distribuirlo a su gusto. Una vez sobrepasado el espacio de una fila se bajará a la siguiente automáticamente, permitiéndonos utilizar un span de tamaño 12 para crear un salto de línea. Si quisiéramos saltarnos algún span a la hora de crear uno, es decir, empezar a partir del 4 span, y aplicarle un tamaño de 3, utilizaríamos este código:

<div class="span2 offset4">Contenido</div>

Esto permite a la división saltar cuatro spans antes de mostrar el contenido. Esto lo podemos utilizar a nuestro libre albedrío, saltándonos lo que queramos con nuestro código.

Saltando spans con la clase offset

Saltando spans con la clase offset

Diseño diferente para cada dispositivo

Imagen con las clases de exclusividad para dispositivos Bootstrap

Clases CSS para diferenciar cada dispositivo

Para aplicar un diferente diseño para cada tipo de dispositivo le diremos a cada división lógica para que dispositivo esta orientada, usando las siguientes clases:

De esta manera podremos mostrar con la misma URL un diseño totalmente diferente para cada dispositivo.

Botones

Botones de Colores

Lista de botones ofrecidos por Bootstrap

Bootstrap nos ofrece un limpio repertorio de botones de colores, su uso es muy sencillo:

<a class="btn btn-success" href="URL">
   Nombre del Botón
</a>

Donde btn btn-success hace referencia al color del botón, para cambiarlo, solo tendremos que sustituirlo por las clases mostradas en la imagen anterior.

Instalando Bootstrap

Para la instalación de este framework CSS, descargaremos el zip desde el enlace que dejaré al final del post, y escribiremos el siguiente código en el head de nuestro archivo HTML.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="./css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/bootstrap.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>

Una vez nos hemos asegurado de que los archivos CSS y JS están en la misma carpeta que nuestro fichero HTML, podremos empezar a diseñar nuestra web responsive.

Más información – Validación de Formularios

Descarga – Bootstrap: Framework CSS

¿Necesitas contratar un hosting para tu web?
En SiteGround tienes disponible una amplia oferta de hostings para todo tipo de bolsillos y necesidades. Encuentra el hosting que estás buscando al mejor precio, con las últimas tecnologías en velocidad y seguridad web y soporte en español 24h:
HostingHosting WordPress

Categorías

Diseño Web

Sergio Ródenas

Con 16 años, autodidacta y con cierta experiencia a la espalda, Sergio Ródenas, conocido en la web como Rodenastyle, es un joven español cuya... Ver perfil ›

Un comentario

  1.   alejandra dijo

    No tienen mas tutoriales sobre este framework???

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *