En este tutorial vamos a explicar como personalizar una aplicación ASP.NET MVC 5 a partir de una plantilla de Bootstrap.
En primer lugar abrimos Visual Studio 2017 en modo Administrador.
Desde la opción de menú Herramientas accedemos a Extensiones y actualizaciones
En Visual Studio Marketplace buscamos Bootstrap Bundle
El instalador de VSIX nos guiará durante el proceso de instalación de Bootstrap Bundle hasta que éste finalice.
Ya tenemos Bootstrap Bundle instalado.
Visual Studio nos ofrece la opción de crear un proyecto de tipo Bootstrap Bundle MVC Site.
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.
Tendremos que decidir el estilo general que vamos a aplicar al proyecto, en base a las plantillas que nos ofrece el Wizard.
A continuación seleccionaremos la gama de colores que le vamos a aplicar a la plantilla.
El proceso finaliza con un mensaje en el que se nos ofrece la posibilidad de realizar una donación.
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.
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:
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
Podemos comprobar que el archivo BundleConfig.cs no está.
En su lugar encontramos Startup.Auth.cs
¿Cómo se está cargando la librería jQuery?
La tenemos en el _Layout.cshtml pero cargado desde el CDN de Google Apis:
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.
Recomendamos añadir el archivo BundleConfig.cs e inicializarlo desde el Global.asax.cs como en una aplicación MVC convencional.
Ingeniero en Informática | Arquitecto .NET
Experto en Desarrollo Web y consultoría SEO.
miguel@amgrafic.com
91 527 86 97
Bootstrap es un framework de desarrollo web que permite desarrollar interfaces atractivas y responsive.
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
¿Quieres crear un Chat en MVC? En este tutorial te explicamos como utilizar SignalR para desarrollar un Chat.