asp.net mvc - theme - ¿Cómo puedo implementar un tema de bootswatch o wrapbootstrap en un proyecto de MVC 5?

plantillas para asp net mvc (5)

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

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

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

Install-Package AdminLteMvc

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

Encontrarás los archivos en ~/Views/Shared/ folder

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

Los pasos para aplicar un tema son bastante simples. Para comprender realmente cómo funciona todo junto, tendrá que comprender lo que la plantilla de ASP.NET MVC 5 proporciona de inmediato y cómo puede personalizarlo para sus necesidades.

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

Plantilla ASP.NET MVC 5: cómo funciona

Este recorrido detalla cómo crear un proyecto de MVC 5 y lo que sucede bajo el capó . Vea todas las características de MVC 5 Template 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 Aceptar .
En el siguiente asistente, elija MVC y haga clic en Aceptar . Esto aplicará la plantilla MVC 5.
La plantilla MVC 5 crea una aplicación MVC que usa Bootstrap para proporcionar un diseño receptivo y características de tematización. Debajo del capó, la plantilla incluye un paquete bootstrap 3. * nuget que instala 4 archivos: bootstrap.css , bootstrap.min.css , bootstrap.js y bootstrap.min.js .
Bootstrap se incluye en su aplicación mediante la función de optimización web. Inspecciona Views/Shared/_Layout.cshtml y busca
@Styles.Render("~/Content/css")
y
@Scripts.Render("~/bundles/bootstrap")
Estas dos rutas hacen referencia a los 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 configuración previa. Intenta ejecutar tu proyecto ahora.

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

Este recorrido abarca cómo aplicar temas bootstrap en un proyecto MVC 5

Primero, descargue el css del tema que desea aplicar. Para este ejemplo, usaré Flatly de Flatly . Incluya los archivos descargados flatly.bootstrap.css y flatly.bootstrap.min.css en la carpeta de Content (asegúrese de incluir también en Project).
Abra App_Start/BundleConfig.cs y cambie lo siguiente:
bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css"));
para incluir tu nuevo tema:
bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/flatly.bootstrap.css", "~/Content/site.css"));
Si está utilizando el _Layout.cshtml predeterminado incluido en la plantilla de MVC 5, puede saltear el paso 4. Si no es así, como mínimo, incluya estas dos líneas en su diseño junto con su plantilla de HTML de Bootstrap :
En tu <head> :
@Styles.Render("~/Content/css")
Última línea antes de cerrar </body> :
@Scripts.Render("~/bundles/bootstrap")
Intenta ejecutar tu proyecto ahora. Debería ver su aplicación recién creada ahora usando su tema.

Recursos

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

Primero, si puede ubicar su

archivo bootstrap.css

archivo bootstrap.min.js

en tu computadora, entonces lo que acabas de hacer es

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

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

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

NOTA: asegúrese de que sus archivos descargados se renombren a lo que está en su carpeta

es decir

Entonces, ya puedes irte.

a veces el resultado puede no mostrarse de inmediato. Es posible que tenga que ejecutar el CSS en su navegador como una forma de actualizar

Tengo un artículo en MSDN: Crear ASP.NET MVC con diseño / tema de arranque personalizado usando VS 2012, VS 2013 y VS 2015, también tiene un ejemplo de código de demostración adjunto. Consulte el siguiente enlace. https://code.msdn.microsoft.com/ASPNET-MVC-application-62ffc106

Todo lo que tiene que hacer es seleccionar y descargar los archivos bootstrap.css y bootstrap.js del sitio web 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 de jQuery que es todo.