ASP.NET MVC 5 Bootstrap Template

En este tutorial vamos a explicar como personalizar una aplicación ASP.NET MVC 5 a partir de una plantilla de Bootstrap.

MVC Bootstrap Template 15

Descargar Ejemplo   

Instalar Bootstrap Bundle

En primer lugar abrimos Visual Studio 2017 en modo Administrador.

Desde la opción de menú Herramientas accedemos a Extensiones y actualizaciones

MVC Bootstrap Template 1

En Visual Studio Marketplace buscamos Bootstrap Bundle

MVC Bootstrap Template 2

El instalador de VSIX nos guiará durante el proceso de instalación de Bootstrap Bundle hasta que éste finalice.

MVC Bootstrap Template 3

Crear un proyecto Boostrap Bundle MVC Site

Ya tenemos Bootstrap Bundle instalado.

Visual Studio nos ofrece la opción de crear un proyecto de tipo Bootstrap Bundle MVC Site.

MVC Bootstrap Template 4

Seleccionando esta opción, nos aparecerá un Wizard que nos guiará para configurar el nuevo proyecto.

En primer lugar tendremos que decidir el estilo que le vamos a dar a nuestro sitio web.

En este tutorial vamos a seleccionar la opción por defecto, Bootstrap Example Layout.

MVC Bootstrap Template 5

Tendremos que decidir el estilo general que vamos a aplicar al proyecto, en base a las plantillas que nos ofrece el Wizard.

MVC Bootstrap Template 6

A continuación seleccionaremos la gama de colores que le vamos a aplicar a la plantilla.

MVC Bootstrap Template 7

El proceso finaliza con un mensaje en el que se nos ofrece la posibilidad de realizar una donación.

MVC Bootstrap Template 8

Abrimos el proyecto con el explorador de soluciones de Visual Studio 2017 y vemos que se ha creado un proyecto MVC con una serie de *.css y *.js adaptados al estilo de plantilla que hemos configurado con el Wizard.

MVC Bootstrap Template 9

Actualizar a Bootstrap 3.4.0 desde el NuGet

Una vez creado el proyecto, podemos comprobar fácilmente que versión de Bootstrap tenemos instalada en el template.

Abriendo el archivo bootstrap.css podemos ver fácilmente sobre que versión estamos trabajando:

MVC Bootstrap Template 10

Recomendamos leer nuestro artículo sobre Bootstrap 3.4.0, que es la versión a la que debemos evolucionar si trabajamos en Bootstrap 3.x

Desde el NuGet podemos instalar la versión Bootstrap 3.4.0

MVC Bootstrap Template 11

Actualizar a jQuery 3.3.1 desde el NuGet

Podemos comprobar que el archivo BundleConfig.cs no está.

En su lugar encontramos Startup.Auth.cs

MVC Bootstrap Template 12

¿Cómo se está cargando la librería jQuery?

La tenemos en el _Layout.cshtml pero cargado desde el CDN de Google Apis:

MVC Bootstrap Template 13

Tenemos dos opciones:

·  Evolucionar la versión desde el CDN
·  Instalar la versión 3.3.1 desde el NuGet y cargarla creando el archivo BundleConfig.cs

Es preferible decantarse por la segunda opción.

Una vez instalado el paquete de jQuery 3.3.1 desde el NuGet, en el exlorador de soluciones vemos que se ha agregado la carperta Scripts, en la que podemos encontrar las librerías recién instaladas.

MVC Bootstrap Template 14

Recomendamos añadir el archivo BundleConfig.cs e inicializarlo desde el Global.asax.cs como en una aplicación MVC convencional.

Miguel

Ingeniero en Informática | Arquitecto .NET

Experto en Desarrollo Web y consultoría SEO.

  miguel@amgrafic.com
  91 527 86 97

Sigue aprendiendo con nuestro Blog de SEO

Qué es Bootstrap

Bootstrap es un framework de desarrollo web que permite desarrollar interfaces atractivas y responsive.

Bootstrap 3.4.0

Nueva versión de Bootstrap. Tras una larga espera de más de 2 años, en este artículo te contamos las novedades sobre la versión 3.4.0

Tutorial SignalR ASP.NET MVC 5

¿Quieres crear un Chat en MVC? En este tutorial te explicamos como utilizar SignalR para desarrollar un Chat.