[#VS2013] HowTo: Crear un website con Bootstrap

image

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.

image

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”

image

Esta acción nos crea un website limpio

image

2. Agregamos una página HTML y la llamamos index.html

image

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

image

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”.

image

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.

image

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

Bootstrapsample

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

image image image Google

Un comentario en “[#VS2013] HowTo: Crear un website con Bootstrap”

Deja un comentario

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