BOOTSTRAP EN ASPNET

Vista previa del material en texto

HERRAMIENTAS DE DESARROLLO 
WEB (ASP.NET)
Alex Pacheco Moya
alex.pacheco.moya@gmail.com
BOOTSTRAP CON ASP.NET
SEMANA 15
Agregar Bootstrap en ASP.NET
• Visual Studio permite agregar Bootstrap 
en ASP.NET desde el administrador de 
paquetes NuGet, sin recurrir a la página 
oficial del framework.
• Bootstrap es instalado en los proyectos 
web con ASP.Net tanto en WebForm o 
MVC, de los proyectos más populares.
Instalar Bootstrap en ASP.NET
• Abrimos o creamos un 
proyecto web en WebForm o 
MVC (en el ejemplo se 
utilizará WebForm) desde 
Visual Studio.
• Sobre el nombre del 
proyecto hacemos clic 
derecho, de las opciones de 
la lista seleccionamos 
Manage Nuget Packages.
NuGet
• Accedemos a la 
pestaña Browse de la 
página que aparece, 
en el buscador 
escribimos Bootstrap, 
seleccionamos el 
primer registro 
Bootstrap.
Instalamos Bootstrap
• Al seleccionar el paquete 
veremos en el lado 
izquierdo todos los 
detalles, seleccionamos la 
versión e instalamos.
• Antes de instalar revisa 
bien la versión para tu 
proyecto para evitar 
conflictos con otras 
librerías.
Carpetas Generadas
La instalación genera dos 
carpetas en el proyecto.
• Content, que contiene hojas 
de estilo o css.
• Scripts, que contiene archivos 
javascript.
Referenciar Bootstrap
• Por último, para terminar con la implementación de Bootstrap 
en ASP, necesitamos agregar las referencias para utilizarlo.
• Para utilizar el framework en todo el proyecto agregaremos las 
referencias en archivo Master.
• En el head agrega el archivo css de nombre Bootstrap.min.css
• En la sección de scripts dentro del body agrega el javascript de 
nombre Bootstrap.min.js
Ejemplo de Referencia a BS
Observaciones
• No es necesario agregar las referencias de todos los archivos instalados, 
ya que son referenciados del archivo principal.
• De esta forma únicamente agregas la referencia del archivo maestro en las 
paginas aspx para utilizar Bootstrap.
• La instalación de Bootstrap de esta forma en Visual Studio facilita la 
actualización automática desde el administrador de paquetes.
• Aunque también es posible agregar Bootstrap manualmente como en un 
proyecto simple de HTML.
Bootstrap Responsive GridView
Aplicando el FooTable responsive 
Table jQuery Plugin
Ejemplo de Resultado
En el consumidor del 
webservice
Consumer ASP.NET WEBFORM
Site.Master
Site.Master: en el Form
En About.aspx
Al Ejecutar el Consumidor 
Referencias
• Agregar Bootstrap en ASP.NET
Por Gerardo Álvarez 27/05/2019
https://www.kyocode.com/2019/05/agregar-bootstrap-asp-net/
Bootstrap Responsive GridView for Mobile Phone, Tablet and 
Desktop display in ASP.Net using jQuery
By Mudassar Ahmed Khan 
https://www.aspsnippets.com/Articles/Bootstrap-Responsive-GridView-for-
Mobile-Phone-Tablet-and-Desktop-display-in-ASPNet-using-jQuery.aspx
20
https://www.kyocode.com/2019/05/agregar-bootstrap-asp-net/
https://www.aspsnippets.com/Articles/Bootstrap-Responsive-GridView-for-Mobile-Phone-Tablet-and-Desktop-display-in-ASPNet-using-jQuery.aspx
https://www.aspsnippets.com/Articles/Bootstrap-Responsive-GridView-for-Mobile-Phone-Tablet-and-Desktop-display-in-ASPNet-using-jQuery.aspx
	Diapositiva 1
	Diapositiva 2: HERRAMIENTAS DE DESARROLLO WEB (ASP.NET)
	Diapositiva 3: BOOTSTRAP CON ASP.NET
	Diapositiva 4: Agregar Bootstrap en ASP.NET
	Diapositiva 5: Instalar Bootstrap en ASP.NET
	Diapositiva 6: NuGet
	Diapositiva 7: Instalamos Bootstrap
	Diapositiva 8: Carpetas Generadas
	Diapositiva 9: Referenciar Bootstrap
	Diapositiva 10: Ejemplo de Referencia a BS
	Diapositiva 11: Observaciones
	Diapositiva 12: Bootstrap Responsive GridView
	Diapositiva 13: Aplicando el FooTable responsive Table jQuery Plugin
	Diapositiva 14: Ejemplo de Resultado
	Diapositiva 15: En el consumidor del webservice
	Diapositiva 16: Site.Master
	Diapositiva 17: Site.Master: en el Form
	Diapositiva 18: En About.aspx
	Diapositiva 19: Al Ejecutar el Consumidor 
	Diapositiva 20: Referencias