Bootstrap
Páginas: 12 (2839 palabras)
Publicado: 3 de octubre de 2012
Uno de los principales quebraderos de cabeza con los que se encuentra un desarrollador a la hora de iniciar un nuevo proyecto web, es la creación de un layout básico sobre el que trabajar.
Adicionalmente, si queremos que nuestro diseño sea capaz de adaptarse a los distintos navegadores, configuraciones o incluso dispositivos, la selección de un framework de apoyo puede ahorrarnos mucho tiempo yesfuerzo.
Por desgracia, en la actualidad sigue siendo necesario un profundo conocimiento de los distintos estándares y de como estos se aplican en cada navegador. De nuevo, la adopción de un framework que nos guie en la aplicación del conjunto necesario de buenas prácticas, puede ser crucial.
Con el fin de cubrir estas necesidades surgen frameworks como 960gs o Bootstrap. En este artículo noscentraremos en este último, el cual ha sido desarrollado por Twitter y cuya versión 2.0 ha sido liberada recientemente.
Funcionalidades disponibles
Bootstrap 2.0 es un framework diseñado para simplificar el proceso de creación de diseños web. Para ello nos ofrece una serie de plantillas CSS y de ficheros JavaScript, los cuales nos permiten conseguir:
* Interfaces que funcionen de manerabrillante en los navegadores actuales, y correcta en los no tan actuales.
* Un diseño que pueda ser visualizado de forma correcta en distintos dispositivos y a distintas escalas y resoluciones.
* Una mejor integración con tus las librerías que sueles usar habitualmente, como por ejemplo jQuery.
* Un diseño sólido basado en herramientas actuales y potentes como LESS o estándares comoCSS3/HTML5
Estructura básica de nuestro proyecto
Una vez descargada la distribución de Bootstrap desde la página principal del proyecto, podemos centrarnos en crear un esqueleto básico sobre el que empezar a trabajar:
-------------------------------------------------
<!DOCTYPE html>
-------------------------------------------------
<html lang="es">-------------------------------------------------
<head>
-------------------------------------------------
<meta charset="utf-8">
-------------------------------------------------
<title>Nuevo proyecto con Bootstrap 2.0</title>
-------------------------------------------------
<metaname="description" content="Artículo en GenbetaDev sobre Bootstrap 2.0">
-------------------------------------------------
<meta name="author" content="Ricardo Borillo">
-------------------------------------------------
<!—[if lt IE 9]>
-------------------------------------------------
<scriptsrc="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-------------------------------------------------
<![endif]—>
-------------------------------------------------
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
-------------------------------------------------
<style>-------------------------------------------------
body { padding-top: 60px; }
-------------------------------------------------
</style>
-------------------------------------------------
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
-------------------------------------------------
</head>-------------------------------------------------
<body>
-------------------------------------------------
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-------------------------------------------------
<script src="bootstrap/js/bootstrap.min.js"></script>...
Adicionalmente, si queremos que nuestro diseño sea capaz de adaptarse a los distintos navegadores, configuraciones o incluso dispositivos, la selección de un framework de apoyo puede ahorrarnos mucho tiempo yesfuerzo.
Por desgracia, en la actualidad sigue siendo necesario un profundo conocimiento de los distintos estándares y de como estos se aplican en cada navegador. De nuevo, la adopción de un framework que nos guie en la aplicación del conjunto necesario de buenas prácticas, puede ser crucial.
Con el fin de cubrir estas necesidades surgen frameworks como 960gs o Bootstrap. En este artículo noscentraremos en este último, el cual ha sido desarrollado por Twitter y cuya versión 2.0 ha sido liberada recientemente.
Funcionalidades disponibles
Bootstrap 2.0 es un framework diseñado para simplificar el proceso de creación de diseños web. Para ello nos ofrece una serie de plantillas CSS y de ficheros JavaScript, los cuales nos permiten conseguir:
* Interfaces que funcionen de manerabrillante en los navegadores actuales, y correcta en los no tan actuales.
* Un diseño que pueda ser visualizado de forma correcta en distintos dispositivos y a distintas escalas y resoluciones.
* Una mejor integración con tus las librerías que sueles usar habitualmente, como por ejemplo jQuery.
* Un diseño sólido basado en herramientas actuales y potentes como LESS o estándares comoCSS3/HTML5
Estructura básica de nuestro proyecto
Una vez descargada la distribución de Bootstrap desde la página principal del proyecto, podemos centrarnos en crear un esqueleto básico sobre el que empezar a trabajar:
-------------------------------------------------
<!DOCTYPE html>
-------------------------------------------------
<html lang="es">-------------------------------------------------
<head>
-------------------------------------------------
<meta charset="utf-8">
-------------------------------------------------
<title>Nuevo proyecto con Bootstrap 2.0</title>
-------------------------------------------------
<metaname="description" content="Artículo en GenbetaDev sobre Bootstrap 2.0">
-------------------------------------------------
<meta name="author" content="Ricardo Borillo">
-------------------------------------------------
<!—[if lt IE 9]>
-------------------------------------------------
<scriptsrc="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-------------------------------------------------
<![endif]—>
-------------------------------------------------
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
-------------------------------------------------
<style>-------------------------------------------------
body { padding-top: 60px; }
-------------------------------------------------
</style>
-------------------------------------------------
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
-------------------------------------------------
</head>-------------------------------------------------
<body>
-------------------------------------------------
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-------------------------------------------------
<script src="bootstrap/js/bootstrap.min.js"></script>...
Leer documento completo
Regístrate para leer el documento completo.