[#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
Advertisements

6 thoughts on “[#VS2013] HowTo: Crear un website con Bootstrap

  1. 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?

    Like

  2. 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?

    Like

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

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s