¿Cómo puedo implementar un tema de bootswatch o wrapbootstrap en un proyecto MVC 5?

Question 1

Estoy a punto de crear una nueva aplicación web ASP.Net MVC5. Me gustaría usar un tema de bootswatch o wrapbootstrap en la aplicación, pero no puedo encontrar un conjunto de instrucciones sobre cómo hacerlo.

Question 2

Los pasos para aplicar un tema son bastante simples. Para comprender realmente cómo funciona todo en conjunto, deberá comprender qué proporciona la plantilla ASP.NET MVC 5 lista para usar y cómo puede personalizarla para sus necesidades.

_{Nota: Si tiene un conocimiento básico de cómo funciona la plantilla MVC 5, desplácese hacia abajo hasta la sección de temas.}

Plantilla ASP.NET MVC 5: cómo funciona

Este tutorial explica cómo crear un proyecto MVC 5 y lo que está sucediendo debajo del capó . Vea todas las características de la plantilla MVC 5 en este blog .

Crea un nuevo proyecto. En Plantillas, elija Web > Aplicación Web ASP.NET . Ingrese un nombre para su proyecto y haga clic en OK.
En el siguiente asistente, elija MVC y haga clic en OK. Esto aplicará la plantilla MVC 5.
La plantilla MVC 5 crea una aplicación MVC que usa Bootstrap para proporcionar características de diseño y temática receptivas. Bajo el capó, la plantilla incluye un 3. paquete Nuget * arranque que instala archivos 4: bootstrap.css, bootstrap.min.css, bootstrap.js, y bootstrap.min.js.

Bootstrap está incluido en su aplicación mediante la función de optimización web. Inspeccionar Views/Shared/_Layout.cshtmly buscar

@Styles.Render("~/Content/css")

y

@Scripts.Render("~/bundles/bootstrap")

Estas dos rutas se refieren a paquetes configurados en App_Start/BundleConfig.cs:

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
    "~/Scripts/bootstrap.js",
    "~/Scripts/respond.js"));

bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/bootstrap.css",
    "~/Content/site.css"));

Esto es lo que hace posible ejecutar su aplicación sin ninguna configuración por adelantado. Intente ejecutar su proyecto ahora.

Aplicación de temas de Bootstrap en ASP.NET MVC 5

Este tutorial cubre cómo aplicar temas de arranque en un proyecto MVC 5

Primero, descargue el csstema que le gustaría aplicar. Para este ejemplo, usaré Bootswatch's Flatly . Incluya lo descargado flatly.bootstrap.cssy flatly.bootstrap.min.cssen la Contentcarpeta (asegúrese de incluir también en el proyecto).

Abra App_Start/BundleConfig.csy cambie lo siguiente:

bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/bootstrap.css",
    "~/Content/site.css"));

para incluir su nuevo tema:

bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/flatly.bootstrap.css",
    "~/Content/site.css"));

Si está utilizando el predeterminado _Layout.cshtmlincluido en la plantilla MVC 5, puede saltar al paso 4. Si no es así, como mínimo, incluya estas dos líneas en su diseño junto con su plantilla HTML Bootstrap :

En tu <head>:
```
@Styles.Render("~/Content/css")
```
Última línea antes del cierre </body>:
```
@Scripts.Render("~/bundles/bootstrap")
```
Intente ejecutar su proyecto ahora. Debería ver su aplicación recién creada ahora usando su tema.

Recursos

Consulte esta increíble guía de 30 días de James Chambers para obtener más información, tutoriales, consejos y trucos sobre cómo usar Twitter Bootstrap con ASP.NET MVC 5.

Question 3

Esto puede ser un poco tarde; pero alguien lo encontrará útil.

Hay un paquete Nuget para integrar AdminLTE, una popular plantilla de Bootstrap, en MVC5

Simplemente ejecute este comando en su consola de Visual Studio Package Manager

Install-Package AdminLteMvc

NB: La instalación puede llevar un tiempo porque descarga todos los archivos necesarios y crea vistas de muestra completas y parciales (archivos .cshtml) que pueden guiarlo a medida que desarrolla. _AdminLteLayout.cshtmlTambién se proporciona un archivo de diseño de muestra .

Encontrarás los archivos en la ~/Views/Shared/carpeta

Question 4

Primero, si puede localizar su

archivo bootstrap.css

y

archivo bootstrap.min.js

en su computadora, entonces lo que acaba de hacer es

Primero descargue su tema favorito, es decir, desde http://bootswatch.com/

Copiar los descargados bootstrap.css y bootstrap.min.js archivos

Luego, en su computadora, busque los archivos existentes y reemplácelos con los nuevos archivos descargados.

NOTA: asegúrese de que los archivos descargados cambien el nombre a lo que está en su carpeta

es decir

Entonces, ya puedes irte.

a veces el resultado puede no mostrarse inmediatamente. es posible que deba ejecutar el css en su navegador como una forma de actualizar

Question 5

Tengo un artículo sobre MSDN: creación de ASP.NET MVC con un tema / diseño de arranque personalizado utilizando VS 2012, VS 2013 y VS 2015, también tengo una muestra de código de demostración adjunta. Consulte el enlace a continuación. https://code.msdn.microsoft.com/ASPNET-MVC-application-62ffc106

Question 6

Todo lo que tiene que hacer es seleccionar y descargar los archivos bootstrap.css y bootstrap.js del sitio web de Bootswatch, y luego reemplazar los archivos originales con ellos.

Por supuesto, debe agregar las rutas a su página de diseño después de la ruta jQuery, eso es todo.

Question 7

Bootswatch es una buena alternativa, pero también puede encontrar varios tipos de plantillas gratuitas creadas para ASP.NET MVC que usan MDBootstrap (un marco de front-end construido sobre Bootstrap) aquí:

Plantillas ASP.NET MVC MDB