Hola !
Hoy vamos con un post cortito y espero que la 3G me funcione bien en el AVE cuando tenga que descargar el paquete NuGet. Pues eso, la de hoy es fácil:
Cómo crear un WebSite incluyendo Bootstrap en el mismo
Primero lo primero: ¿conoces Bootstrap? si no lo conoces, deberías.
Bootstrap es un framework creado por Twitter para crear interfaces y website responsives basados en HTML5 y CSS3.
Pues ya está, es un zip que tiene un par de archivos .css y .js. La forma más usual de obtener este package es acceder al site de Bootstrap y darle un click a Download Bootstrap.
El zip posee todo lo necesario para poder crear un site aprovechando las capacidades que nos brinda Bootstrap. Sin embargo hay otra forma más elegante de hacerlo que es la siguiente:
1. Crea un website con Visual Studio 2012 o 2013. Para este ejemplo he ocultado el path local y he puesto de nombre al site “BootstrapSample”
Esta acción nos crea un website limpio
2. Agregamos una página HTML y la llamamos index.html
3. Agregamos el siguiente código a la página
Nota: he puesto de ejemplo un poema en latín de mi autoría.
4. Si navegamos la página veremos lo siguiente
Increíble, hemos creamos una página HTML simple y ZERO RESPONSIVE !!!
5. A continuación agregaremos los elementos que posee Bootstrap a nuestro website para aprovechar las capacidades del mismo. En el proyecto desplegamos el menú contextual, seleccionamos la opción “Manage NuGet Packages” y buscamos por Bootstrap. Seleccionamos el correcto y clic en “Install”.
Detallazo: Bootstrap es de Twitter y es bastante obvio en los resultados de la búsqueda que el 1ro no es un producto de Twitter sino de … pues alguien. Cuidado con que agregas a tu proyecto.
6. Una vez agregados los elementos de este paquete nuestro proyecto ya posee los elementos necesarios para trabajar con Bootstrap.
7. Un detalle que ví cuando descargué este pkc es que no contiene el archivo “bootstrap-responsive.css” que es el que posee los estilos en modo responsive. Agregamos un archivo con este nombre al proyecto y el contenido lo sacamos desde http://getbootstrap.com/2.3.2/assets/css/bootstrap.css
8. Ahora toca modificar la página para que la misma aproveche algunas capacidades de Bootstrap. Modificamos el codigo teniendo en cuenta lo siguiente
- líneas 6 y 7, agregamos las referencias a los CSS de Bootstrap
- línea 10 agregamos un DIV general para contener todo el contenido de la página con la clase “container”. Este div agrega unos márgenes al contenido y ajusta el mismo de forma automática.
- línea 11, agregamos un nuevo DIV con la clase “row-fluid” que es la que contiene las 3 secciones con el contenido de la página
- línea 12, en cada DIV ponemos la clase “span4” para identificar el mismo. (en otro post explico como funciona el modo GRID de bootstrap o si quieres puedes ver la ayuda oficial aquí)
</script>
9. Listo !!!
Si ´visualizamos la página y cambiamos el tamaño de la misma veríamos algo similar a esto
En el próximo post comentaré algo más ya pasando a proyectos ASP.Net MVC y cositas ya fuera de mi nivel !
Referencias: http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem
Saludos @ AVE
El Bruno
Google
Archivado en: CSS, HTML, Visual Studio 2013