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.
asp.net-mvc
twitter-bootstrap
asp.net-mvc-5
bootswatch
Peter Loudon
fuente
fuente
.csstema y en su App_Start BundleConfig.cs, reemplácelo~/Content/bootstrap.csscon~/Content/yourtheme.bootstrap.cssRespuestas:
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, ybootstrap.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
csstema que le gustaría aplicar. Para este ejemplo, usaré Bootswatch's Flatly . Incluya lo descargadoflatly.bootstrap.cssyflatly.bootstrap.min.cssen laContentcarpeta (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.
fuente
@Styles.Render("//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cerulean/bootstrap.min.css")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 AdminLteMvcNB: 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/carpetafuente
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
fuente
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
fuente
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.
fuente
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
fuente