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
1: <!DOCTYPE html>
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head>
4: <title></title>
5: </head>
6: <body>
7: <div>
8: <h1>Title A</h1>
9: <p>
10: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
11: </p>
12: </div>
13: <div>
14: <h1>Title B</h1>
15: <p>
16: Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
17: Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
18: </p>
19: </div>
20: <div>
21: <h1>Title C</h1>
22: <p>
23: Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.
24: Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.
25: </p>
26: </div>
27: </body>
28: </html>
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.
Update: en un post me han comentado que desde la versión 3 Bootstrap es responsive by default, con el que eliminaré los pasos innecesarios !!!
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, 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 “col-md-4” para identificar el mismo. (en otro post explico como funciona el modo GRID de bootstrap o si quieres puedes ver la ayuda oficial aquí)
1: <!DOCTYPE html>
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head>
4: <title></title>
5: <meta name="viewport" content="width=device-width, initial-scale=1.0">
6: <link href="Content/bootstrap/bootstrap.css" rel="stylesheet">
7: <link href="Content/bootstrap/bootstrap-responsive.css" rel="stylesheet">
8: </head>
9: <body>
10: <div class="container">
11: <div class="row">
12: <div class="col-md-4">
13: <h1>Title A</h1>
14: <p>
15: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
16: </p>
17: </div>
18: <div class="col-md-4">
19: <h1>Title B</h1>
20: <p>
21: Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
22: Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
23: </p>
24: </div>
25: <div class="col-md-4">
26: <h1>Title C</h1>
27: <p>
28: Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.
29: Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.
30: </p>
31: </div>
32: </div>
33: </div>
34: <script src="scripts/jquery-1.9.1.js"></script>
1:
2: <script src="scripts/bootstrap.js">
</script>
35: </body>
36: </html>
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
 |
 |
 |
El Bruno 
puedes hacer un articulo sobre mvc 5 y que cosas nuevas trae thx
LikeLike
Estoy usando Bootstrap para un sitio, locamente funciona perfecto. Mi problema es que no sé cómo publicarlo en un IIS externo (que tengo en otra pc) y que funcione. ¿Me podrás dar una mano?
LikeLike
Pues una vez que tienes creado tu sitio, lo que necesitas hacer es crear un site en IIS y luego copias los archivos.
Este link y los tutoriales dentro pueden ayudar https://msdn.microsoft.com/es-es/library/ckk1e6z4(v=vs.80).aspx
Saludos
LikeLike
Estoy haciendo un sitio con Bootstrap, me funciona perfecto localmente pero no tengo idea de cómo publicarlo en IIS sin que de errores. ¿Me podrás dar una mano?
LikeLike
Muchas gracias por lo simple y concreto. es perfecto este tutorial.
podrias decirme como lo impacto para que mi sitio (web form o MVC) en mobile muestre una grilla que tiene datos de una base SQL. si uso datagridview me da error al mostrarla en mobile y funciona correctamente en el sitio.
Gracias de todas formas
LikeLike
Hola Morfeo!
Gracias por pasarte por aquí. Dime, qué error te da?
Saludos
-Bruno
LikeLike