martes, 5 de febrero de 2013

Herramientas de programación web: Bootstrap

Bootstrap Bootstrap es un framework HTML5, CSS3 y Javascript creado por el equipo de desarrollo de Twitter. Es una herramienta que facilita el desarrollo de aplicaciones y sitios web de forma rápida y flexible. Además Bootstrap fomenta las buenas prácticas de desarrollo y la aplicación de estándares W3C y permite diseñar webs que se visualicen correctamente en múltiples dispositivos (PCs, tabletas, teléfonos móviles, etc.).

Bootstrap proporciona estilos predefinidos para una gran cantidad de de elementos de uso común en los sitios webs modernos (botones, tablas, formularios, tipografías, ...) y permite maquetar las páginas web de forma sencilla, con resultados profesionales y reduciendo el tiempo necesario de desarrollo. Además todos los estilos son personalizables. También incorpora varios plug-ins javascript basados en jQuery para realizar diseños avanzados.

Además Bootstrap se ofrece con licencia de código abierto y apto para todo tipo de proyectos tanto personales como profesionales.


Primeros pasos

Lo primero que se necesita es descargar Bootstrap desde el sitio web oficial y copiar el contenido de la carpeta bootstrap en la raíz del proyecto. Si se van a usar los plug-ins javascript, también será necesario descargar la librería jQuery y copiarla en otra carpeta del proyecto (por ejemplo /js). La estructura típica de un archivo HTML que incluya Bootstrap es la siguiente:

<!DOCTYPE html>
<html>
<head>
<title>Título del documento</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
[...]
<script src="/js/jquery-last.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>

Estructura básica: Diseño adaptable.

La estructura básica de una página HTML formateada con Bootstrap consiste en un grid (parrilla o cuadrícula) de hasta 12 casillas de ancho fijo (container) o proporcional al espacio disponible (container-fluid). Cada fila (row o row-fluid) puede tener una o varias columnas de diversos anchos (span1, span2, span3, ..., span12). También podemos dejar columnas en blanco con (offset2, offset2, offset3, ...). Las columna de ancho fijo siempre miden lo mismo. En cambio el ancho de las columnas proporcionales será un porcentaje del ancho disponible.

<div class="container">
    <div class="row">
        <div class="span12">[...]</div">
    </div">
    <div class="row">
        <div class="span4">[...]</div">
        <div class="span4">[...]</div">
        <div class="span4">[...]</div">
    </div">
    <div class="row">
        <div class="span8 offset2">[...]</div">
    </div">
</div">

La estructura anterior se corresponde a una página web con una fila de cabecera que ocupa todo el ancho disponible (span12), seguido de otra ficha dividida en tres columnas de ancho 4 (span4) y una última fila de ancho 8 centrada (span8 offset2). Se incluye aquí únicamente a modo de ejemplo.

<div class="container">
    <div class="row">
        <div class="span4">
            [...]
        </div">
        <div class="span8">
            <div class="row-flexible">
                <div class="span6">[...]</div">
                <div class="span6">[...]</div">
            </div">
        </div">
    </div">
</div">

En este otro ejemplo se ha usado una estructura de columnas anidada. Las columnas pueden anidarse tantas veces como sea necesario, incluso mezclando columnas de ancho fijo con columnas de ancho flexible. Leer más sobre el diseño adaptable de Bootstrap.


CSS Básico y componentes.

En Bootstrap usaremos los tags HTML5 comunes, pero éstos tendrán formatos predefinidos: títulos (<h1>, <h2>, ..., <h6>), párrafos (<p>), listas de elementos (<ul>, <ol>, <li>), listas de definiciones (<dl>, <dt>, <dd>), texto en negrita o cursiva (<strong>, <em>, <b>, <i>), abreviaturas (<abbr>), direcciones (<address>), citas y referencias (<blockquote>), código fuente (<code>, <pre>), tablas (<table>, <thead>, <tbody>, <tr>, <td>, <th>, <caption>), etc.

También podremos usar una serie de estilos predefinidos como .lead que muestra una letra grande (a modo de presentación de una web); .muted, texto de color clarito; .text-warning, para mensajes de aviso (color amarillo); .text-error para mensajes de error (color rojo); .text-info, para mensajes informativos (color azul); .text-success para mensajes de éxito (color verde); entre otros.

Bootstrap tiene estilos predefinidos para todo tipo de elementos: tipografías, tablas, formularios, botones, imágenes, etc. También proporciona decenas de componentes predefinidos construidos para ayudar en la navegación, mostrar alertas y mucho más: menús desplegables, botones de grupo, barras de navegación, puntos de navegación (breadcrumbs), paginación de listas, etiquetas e insignias, miniaturas de imágenes, alertas, barras de progreso, entre otros. Por último Bootstrap proporciona varios plugins jQuery que no voy a enumerar ahora.


Enlaces y referencias

No hay comentarios:

Publicar un comentario