20/9/2017 Personalización de plantillas ASP.

NET MVC Bootstrap - CodeProject

13,140,591
Sign up formembers (55,124
our free online)
weekly Web Developer Newsletter. Member 12718015
×
408   Sign out

Search for articles, questions, tips

articles Q&A forums lounge

Personalización de plantillas ASP.NET MVC Bootstrap

syed shanu , 23 feb 2017

   4,59 (21 votos) Tarifa:

En este artículo, veremos en detalle sobre las formas en que podemos personalizar nuestra aplicación ASP.ENT MVC. Aquí, en este artículo, veremos tres métodos para
personalizar nuestras plantillas ASP.NET MVC Bootstrap.

Is your email address OK? You are signed up for our newsletters but your email address is either unconfirmed, or has not been reconfirmed in a long
time. Please click here to have a confirmation email sent so we can confirm your email address and start sending you newsletters again.
Alternatively, you can update your subscriptions.

Download sample - 1.5 MB

Introduction
In this article, we will see in detail about the ways we can customize our ASP.ENT MVC Application. Here, in this article, we will see three
methods to customize our ASP.NET MVC Bootstrap templates.
1. Using ASP.NET MVC Bootstrap Bundle template
2. Using the Bootstrap Bundle Template CSS in our MVC Application
3. Uso de Bootswatch Temas gratis para Bootstrap ASP.NET MVC.

Uso del código

Instalación del paquete Bootstrap

Primero, necesitamos descargar e instalar la plantilla del paquete Bootstrap. Para instalar la plantilla del paquete Bootstrap Abra Visual Studio 2015> Haga clic en
Herramientas> Haga clic en Extensiones y actualizaciones

Desde el tipo de búsqueda "Bootstrap Bundle" y busque.

https://www.codeproject.com/Articles/1170333/Customizing-ASP-NET-MVC-Bootstrap-Templates 1/15
20/9/2017 Personalización de plantillas ASP.NET MVC Bootstrap - CodeProject

Haga clic en Descargar desde el paquete Bootstrap.

Haga clic en Instalar para instalar la plantilla Bootstrap Bundle.

Para empezar con la plantilla de paquete de Bootstrap cierre el Visual Studio y vuelva a abrir Visual Studio 2015.

Creación de la aplicación Bootstrap Bundle MVC:

Haga clic en Bootstrap Bundle desde la plantilla izquierda. Seleccione Bootstrap Bundle MVC Site, seleccione la ruta del proyecto y escriba el nombre de su aplicación y
haga clic en Aceptar.

https://www.codeproject.com/Articles/1170333/Customizing-ASP-NET-MVC-Bootstrap-Templates 2/15
20/9/2017 Personalización de plantillas ASP.NET MVC Bootstrap - CodeProject
Aquí podemos ver que la plantilla Bootstrap Bundle tiene 2 estilos como "Bootstrap Example Layouts" y "Start Bootstrap Templates".

Aquí primero veremos cómo empezar con "Bootstrap Example Layouts"

Método 1: Estilo de paquete de Bootstrap utilizando diseños de ejemplo Bootstrap

Seleccione las presentaciones de ejemplo de Bootstrap y haga clic en el botón Siguiente.

Seleccione su estilo de diseño maestro. Aquí hemos seleccionado el diseño de "Jumbotron Estrecho" y pulsamos el botón Siguiente.

Ahora tenemos que seleccionar Tema para nuestro Layout. Aquí podemos ver el grupo de Tema se ha enumerado en lista desplegable.

Aquí hemos seleccionado el tema "Darkly" para nuestro sitio web.

https://www.codeproject.com/Articles/1170333/Customizing-ASP-NET-MVC-Bootstrap-Templates 3/15
20/9/2017 Personalización de plantillas ASP.NET MVC Bootstrap - CodeProject

Haga clic en Siguiente e introduzca su nombre de sitio en el cuadro de texto y haga clic en Siguiente.

Haga clic en Finalizar, podemos ver nuestra aplicación MVC se ha creado, presione F5 para ejecutar nuestra aplicación, podemos ver nuestra aplicación MVC con nueva
plantilla de bootstrap.

Método 2: Estilo de paquete de Bootstrap utilizando plantillas Bootstrap de inicio

Seleccione las plantillas de inicio de plantillas Bootstrap y haga clic en el botón Siguiente.

https://www.codeproject.com/Articles/1170333/Customizing-ASP-NET-MVC-Bootstrap-Templates 4/15
20/9/2017 Personalización de plantillas ASP.NET MVC Bootstrap - CodeProject
A continuación, debemos seleccionar nuestro tema para nuestra aplicación web MVC. Aquí seleccionamos "Negocio moderno" y pulsamos el botón Siguiente.

A continuación, podemos agregar nuevos controladores personalizados o Ver seleccionando en la casilla de verificación. Después de la selección, haga clic en el
siguiente botón.

Aquí hemos seleccionado algunos controladores y vistas para ser agregados en nuestra aplicación MVC, Haga clic en Siguiente después de la selección.

Aquí hemos seleccionado el tema "Predeterminado" para nuestro sitio web.

https://www.codeproject.com/Articles/1170333/Customizing-ASP-NET-MVC-Bootstrap-Templates 5/15
20/9/2017 Personalización de plantillas ASP.NET MVC Bootstrap - CodeProject

Haga clic en Siguiente e introduzca su nombre de sitio en el cuadro de texto y haga clic en Siguiente.

Haga clic en Finalizar, podemos ver nuestra aplicación MVC se ha creado, presione F5 para ejecutar nuestra aplicación, podemos ver nuestra aplicación MVC con nueva
plantilla de bootstrap.

2) Uso de la Plantilla de Paquetes de Bootstrap css en nuestra Aplicación MVC

Método 3: Personalización de la aplicación ASP.NET MVC mediante Bootstrap Bundle Templates

Ahora creamos nuestra aplicación ASP.NET MVC y añadimos las plantillas Bootstrap Bundle en nuestra aplicación MVC. El primer paso es crear nuestro ASP.NET MVC
application.Open Visual Studio 2015> Haga clic en Web> Seleccionar ASP.NET Web Application (.Net Framework)

https://www.codeproject.com/Articles/1170333/Customizing-ASP-NET-MVC-Bootstrap-Templates 6/15
20/9/2017 Personalización de plantillas ASP.NET MVC Bootstrap - CodeProject

Seleccione MVC y haga clic en Aceptar para crear nuestra aplicación ASP.NET MVC.

Después de crear la aplicación MVC, ejecute para ver la plantilla de inicio predeterminada de MVC.

Ahora vamos a añadir nuestro Bootstrap Bundle "Modern Business" Plantilla para nuestra aplicación MVC. Desde nuestro paquete web Bootstrap "Modern Business"
seleccione la carpeta CSS y debemos pegar la carpeta CSS en nuestro nuevo proyecto de aplicación web MVC.

Pegue la carpeta CSS copiada en nuestra aplicación web

https://www.codeproject.com/Articles/1170333/Customizing-ASP-NET-MVC-Bootstrap-Templates 7/15
20/9/2017 Personalización de plantillas ASP.NET MVC Bootstrap - CodeProject

A continuación, en nuestro archivo _Layout.cshtml necesitamos agregar el estilo "css" del paquete Bootstrap para cambiar nuestra plantilla.

Abra la carpeta Vistas> Abra la carpeta compartida y abra _Layout.cshtml.

Abra el archivo _Layout.cshtml para cambiar el css predeterminado a nuevo diseño de paquete de Bootstrap css.

Abra el archivo "_Layout.cshtml." Del paquete Bootstrap y compruebe si hay nombres css.

Comente el css predeterminado existente y agregue la plantilla de paquete Bootstrap Bundle CSS.

Ejecute la aplicación y podemos ver que nuestra aplicación ASP.NET MVC se ha aplicado con la nueva plantilla de paquete de Bootstrap.

https://www.codeproject.com/Articles/1170333/Customizing-ASP-NET-MVC-Bootstrap-Templates 8/15
20/9/2017 Personalización de plantillas ASP.NET MVC Bootstrap - CodeProject

3) Utilizando Bootswatch los temas libres para Bootstrap ASP.Net MVC.

Método 3: Personalización de la aplicación ASP.NET MVC mediante plantillas Bootswatch

Ahora creamos nuestra aplicación ASP.NET MVC y añadimos los temas Bootswatch en nuestra aplicación MVC. El primer paso es crear nuestra aplicación ASP.NET MVC.
Abra Visual Studio 2015> Haga clic en Web> Seleccione Aplicación Web ASP.NET (.Net Framework)

Seleccione MVC y haga clic en Aceptar para crear nuestra aplicación ASP.NET MVC.

Después de crear la aplicación MVC, ejecute para ver la plantilla de inicio predeterminada de MVC.

https://www.codeproject.com/Articles/1170333/Customizing-ASP-NET-MVC-Bootstrap-Templates 9/15
20/9/2017 Personalización de plantillas ASP.NET MVC Bootstrap - CodeProject

Bootswatch proporciona temas gratuitos para Bootstrap. Los temas de Bootswatch son fáciles de aplicar para nuestra aplicación Asp.NET MVC. Visita
www.bootswatch.com para ver todos los temas gratuitos para aplicaciones MVC.

Aquí hemos seleccionado "Superhero Theme" del sitio web que podemos ver en el menú superior podemos ver tanto "bootstrap.css" como "bootstrap.min.css". Este es
un código abierto y podemos copiar los códigos de estilo "bootstrap.css" y "bootstrap.min.css" y reemplazarlos por nuestros temas predeterminados de css.

Desde el "bootswatch Superhero", haga clic en el menú bootstrap.csss, copie el código de estilo CSS

enlazar.

https://www.codeproject.com/Articles/1170333/Customizing-ASP-NET-MVC-Bootstrap-Templates 10/15
20/9/2017 Personalización de plantillas ASP.NET MVC Bootstrap - CodeProject

Para aplicar el nuevo tema con nuestro CSS predeterminado. Abrimos "bootstrap.css" de la carpeta de contenido.

Reemplace el estilo del css por nuestro "estilo del super héroe del bootswatch"

https://www.codeproject.com/Articles/1170333/Customizing-ASP-NET-MVC-Bootstrap-Templates 11/15
20/9/2017 Personalización de plantillas ASP.NET MVC Bootstrap - CodeProject
Igual que esto para "bootstrap.min.css" Desde el "bootswatch Superhero" haz clic en bootstrap.min.css

menú, Copie el código de estilo CSS del

Para aplicar el nuevo tema con nuestro CSS predeterminado. Abrimos "bootstrap.min.css" de la carpeta de contenido.

Reemplace el estilo del css por nuestro "estilo del super héroe del bootswatch"

Ejecute la aplicación y podemos ver nuestra aplicación ASP.NET MVC se ha aplicado con el nuevo tema Bootswatch Superhero.

https://www.codeproject.com/Articles/1170333/Customizing-ASP-NET-MVC-Bootstrap-Templates 12/15
20/9/2017 Personalización de plantillas ASP.NET MVC Bootstrap - CodeProject

Nota: Si eres bueno en el diseño, también puedes personalizar el tema predeterminado de ASP.NET por ti mismo.

Historia
MVCSampleTemplate.zip - 2016/02/13

Licencia
Este artículo, junto con cualquier código fuente y archivos asociados, se licencia bajo la licencia CPOL (Project Open Project)

Compartir
CORREO ELECTRÓNICO GORJEO

Sobre el Autor
syed shanu
Capitan del equipo
India

Microsoft MVP 2016 Mi entrevista en Microsoft TechNet Wiki Ninja Link Su Blog Syed Shanu es básicamente de Madurai, Tamil Nadu, India.Ha estado
trabajando en Corea del Sur durante los últimos 8 años. Comenzó a programar con lenguaje básico y lenguaje C de su escuela secundaria en 1999. En 2005
completó su Master of Computer Application. Comenzó su carrera profesional desde diciembre de 2004 con ASP. Tiene más de 10 años de experiencia en
Microsoft Technologies. Su experiencia de trabajo con Lenguaje y Tecnología comienza desde ASP y SQL Server, luego VB.NET y C # para aplicaciones PDA,
desarrollo de aplicaciones de pantalla táctil, aplicaciones de escritorio, desarrollo de aplicaciones web ASP.NET, MVC y WPF.

https://www.codeproject.com/Articles/1170333/Customizing-ASP-NET-MVC-Bootstrap-Templates 13/15
20/9/2017 Personalización de plantillas ASP.NET MVC Bootstrap - CodeProject

Le encanta trabajar con la tecnología de Microsoft, ya que comenzó a trabajar en. Net Frame versión de trabajo de 1,0 a 4,5.

Había trabajado con programas HMI (Human Machine Interface) como PLC, Nutrunner Tools, programas Sensor, programas RFID, programas de código de barras y
etc.

Usualmente usa su tiempo libre para pasar con su familia y salir de excursión. Le encanta la fotografía y el senderismo.

Artículo de ASP.NET del día

1) Título: Dibuje el gráfico de barras de ASP.NET usando HTML5 y jQuery Fecha: 8 de julio de 2015
2) Título: Herramienta de edición de la foto del Web de ASP.NET usando HTML 5 Fecha: 8 de julio de 2015
3) Título : MVC AngularJS y WCF Rest Service Para el examen del lector de la mente Fecha: 18 de mayo de 2015
4) Título: AngularJS Carrito de la compra usando el servicio del resto de MVC y de WCF Fecha: 10 de abril de 2015
5) Título: Insertar seleccione actualización de borrar en asp.net con registro de simple
6) Título: Proyecto de planificación usando ASP.Net GridView Fecha: 26 Diciembre, 2014
7) Título: ASP.NET herramienta de pintura Web utilizando HTML 5 Fecha: 16 de septiembre 2014

Usted también podría estar interesado en...

Asp.net MVC Banner de advertencia utilizando Bootstrap y Generar y agregar variaciones de palabras clave mediante la API
Bootstrap AngularUI de AdWords

Aplicación ASP.NET MVC con el tema Bootstrap personalizado - Complementos de ventana (WndTabs) para DevStudio
VS 2012, VS 2013 y VS 2015

SAPrefs - Diálogo Preferencias de Netscape OLE DB - Primeros pasos

Comentarios y discusiones
 

  Buscar Comentarios   Ir
Añadir comentario o pregunta 

Primero Anterior Siguiente

Dónde encontrar Bootstrap Bundle

PauloRicFerr 24-Feb-17 8:10

Mi voto de 4
Karthik Bangalore 14-Feb-17 23:57

Mi voto de 5
Tokinabo 14-Feb-17 6:20

Mi voto de 4
Klaus Luedenscheidt 12-Feb-17 23:52

Refrescar 1

General    Noticias    Sugerencia    Pregunta    Bug    Respuesta    Chiste    Praise    Rant    Admin   

Utilice Ctrl + Izquierda / Derecha para cambiar de mensajes, Ctrl + Arriba / Abajo para cambiar hilos, Ctrl + Mayús + Izquierda / Derecha para cambiar de página.
https://www.codeproject.com/Articles/1170333/Customizing-ASP-NET-MVC-Bootstrap-Templates 14/15
20/9/2017 Personalización de plantillas ASP.NET MVC Bootstrap - CodeProject

Permalink | Publicidad | Privacidad | Términos de Uso | Mobile Artículo Copyright 2017 by syed shanu
Seleccionar idioma ▼
Web02 | 2.8.170915.1 | Última actualización 23 Feb 2017 Todo lo demás Copyright © CodeProject , 1999-2017
Diseño: fijo | fluido

https://www.codeproject.com/Articles/1170333/Customizing-ASP-NET-MVC-Bootstrap-Templates 15/15