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


79

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.


2
Puede que esto no sea lo que estás buscando, pero es bastante simple. En su carpeta de contenido, incluya el .csstema y en su App_Start BundleConfig.cs, reemplácelo ~/Content/bootstrap.csscon~/Content/yourtheme.bootstrap.css
Carrie Kendall

Gracias Carrie. Esa es una respuesta elegante. ¿Qué haces con la página de diseño real? ¿Simplemente reemplace el cuerpo con html de la muestra? Quiero estar seguro de que no hay GitHub u otro procedimiento automatizado para esto. Marcaré esto como respondido si no se reciben más comentarios al día siguiente.
Peter Loudon

En cuanto a la página de diseño, creo que es la plantilla predeterminada . Funcionará de inmediato con otros temas. En pocas palabras, un tema son versiones de bootstrap con colores / estilos diferentes. Por lo tanto, los botones pueden ser de diferentes colores y algunos componentes pueden tener un radio de borde diferente, pero el estilo general real será más o menos el mismo. Puede aplicar diferentes diseños , simplemente reemplace las inclusiones con los paquetes.
Carrie Kendall

1
Más adelante proporcionaré una respuesta bien escrita con más detalles:]
Carrie Kendall

Gracias @Carrie. ¿Tiene experiencia en el uso de temas premium de Wrapbootstrap y el principio es el mismo?
Peter Loudon

Respuestas:


185

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 .

  1. Crea un nuevo proyecto. En Plantillas, elija Web > Aplicación Web ASP.NET . Ingrese un nombre para su proyecto y haga clic en OK.

  2. En el siguiente asistente, elija MVC y haga clic en OK. Esto aplicará la plantilla MVC 5.

    Ejemplo de elección de la plantilla MVC

  3. 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.

    Ejemplo de css y js instalados

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

    y

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

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

    Aplicación predeterminada en ejecución


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

  1. 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).
  2. Abra App_Start/BundleConfig.csy cambie lo siguiente:

    para incluir su nuevo tema:

  3. 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>:

    Última línea antes del cierre </body>:

  4. Intente ejecutar su proyecto ahora. Debería ver su aplicación recién creada ahora usando su tema.

    Plantilla predeterminada con tema plano


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.


3
No sugeriría usar una CDN principalmente porque pierde mucha optimización que está integrada en la agrupación (como la minificación ). Dicho esto, simplemente cambiaría los enlaces en la vista en el paso n. ° 4 para reflejar los de la CDN, es decir@Styles.Render("//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cerulean/bootstrap.min.css")
Carrie Kendall

1
Hice esto (pero con el tema cyborg) y ahora obtengo "Se produjo una excepción del tipo 'System.IndexOutOfRangeException' en WebGrease.dll" cuando intento ejecutar. El error ocurre en Styles.Render ("~ / Content / css")
HitLikeAHammer

2
Nunca usaré una CDN pública por la única razón de que no tengo el control de la caja o las prácticas de seguridad implementadas . En cualquier caso, esta conversación no es realmente el tema de este post, por lo que si desea continuar la conversación me consideran unirse en el chat :)
Carrie Kendall

1
@SixOThree No le daría mucho valor a las capturas de pantalla, las saqué de uno de los artículos vinculados solo como ejemplo visual. Espero la ayuda :)
Carrie Kendall

1
Acabo de encontrar la solución: estaba usando temas de bootstrap v4 mientras que mi versión de bootstrap era 3.x. Una vez que usé un tema para la versión correcta, todo funcionó sin problemas. @ CarrieKendall, creo que podría ser muy útil para los próximos lectores si agrega este punto a su respuesta.
41686d6564

17

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


1
¡Este `AdminLteMvc Nuget es bastante bueno! Revisé la vista previa hace un momento en almsaeedstudio.com/preview Tiene como ... todo lo que uno necesitaría en una plantilla de sitio web de administración :)
Shiva

3

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

ingrese la descripción de la imagen aquí

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



0

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.


0

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.