BOOTSTRAP

Desarrollo Web

•

Maria Auxiliadora

Rosmery Salamanca

6/9/2023

¡Este material tiene más páginas!

Entonces, ¿te gustó este material?

Ayude a animar a otros estudiantes a mejorar el contenido

¿Te gustó este material? ¡Compartir! 🧡

Desarrollo Web

7008 Materiales compartidos

Descarga la aplicación para disfrutar aún más

Lea materiales sin conexión, sin usar Internet. Además de muchas otras características!

Vista previa del material en texto

HERRAMIENTAS DE DESARROLLO 
WEB (ASP.NET)
Alex Pacheco Moya
alex.pacheco.moya@gmail.com
BOOTSTRAP
SEMANA 14
¿Qué es Bootstrap?
Bootstrap es un kit de herramientas de código 
abierto para desarrollos web responsive con 
HTML, CSS y JavaScript. Con él puedes darle 
forma a tu sitio web a través del uso de sus 
librerías CSS y JavaScript. Incluye diferentes 
componentes: ventanas modales, menús, 
cuadros, botones, formularios… Es decir, los 
elementos que necesitas para maquetar tu 
página.
¿Qué puedes hacer con Bootstrap?
• Bootstrap es una excelente 
herramienta que te permite crear 
interfaces de usuario limpias y 
totalmente adaptables a todo tipo 
de dispositivos y pantallas, sea 
cual sea su tamaño. 
• Desde Bootstrap 3, el framework 
se ha vuelto más compatible con 
el desarrollo web responsive. 
¿Bootstrap es compatible con todos 
los navegadores?
Bootstrap es compatible con la mayoría de navegadores del 
mercado. Te hago un pequeño resumen:
• Google Chrome (en todas las plataformas)
• Mozilla Firefox (en todas las plataformas)
• Internet Explorer (Windows)
• Microsoft Edge (Windows, Android, iOS, Windows 10 mobile)
• Safari (Mac, iOS)
• Opera (Mac, Windows)
B y los dispositivos móviles
B y los Navegadores
Instalación Creando un Starter template 
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
crossorigin="anonymous">
<title>Hello, world!</title>
</head>
Instalación Creando un Starter template... 
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-
UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-
JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
https://bluuweb.github.io/bootstrap/fundamentos.html#instalacion
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 un Proyecto 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.
Buscamos el paquete bootstrap
Al seleccionar el paquete veremos en el lado izquierdo todos los detalles, seleccionamos la versión e instalamos.
Ver Instalación
La instalación genera dos carpetas 
en el proyecto.
• Content, hojas de estilo o css.
• Scripts, archivos javascript.
Referenciar Bootstrap
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
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.
• Sin embargo, con esta ultima la actualización también es manual, 
reemplazando los mismos que agregaste.
https://www.kyocode.com/2019/05/agregar-bootstrap-asp-net/
Referencias
• Agregar Bootstrap en ASP.NET
Por Gerardo Álvarez 27/05/2019
https://www.kyocode.com/2019/05/agregar-bootstrap-asp-net/
• Fundamentos Bootstrap
https://bluuweb.github.io/bootstrap/fundamentos.html#instalacion
• Qué es Bootstrap y cómo usarlo
https://raiolanetworks.es/blog/bootstrap/
17
https://www.kyocode.com/2019/05/agregar-bootstrap-asp-net/
https://bluuweb.github.io/bootstrap/fundamentos.html#instalacion
https://raiolanetworks.es/blog/bootstrap/
	Diapositiva 1
	Diapositiva 2: HERRAMIENTAS DE DESARROLLO WEB (ASP.NET)
	Diapositiva 3: BOOTSTRAP
	Diapositiva 4: ¿Qué es Bootstrap?
	Diapositiva 5: ¿Qué puedes hacer con Bootstrap?
	Diapositiva 6: ¿Bootstrap es compatible con todos los navegadores?
	Diapositiva 7: B y los dispositivos móviles
	Diapositiva 8: B y los Navegadores
	Diapositiva 9: Instalación Creando un Starter template 
	Diapositiva 10: Instalación Creando un Starter template... 
	Diapositiva 11: Agregar Bootstrap en ASP.NET
	Diapositiva 12: Instalar Bootstrap en un Proyecto ASP.NET
	Diapositiva 13: Buscamos el paquete bootstrap
	Diapositiva 14: Ver Instalación
	Diapositiva 15: Referenciar Bootstrap
	Diapositiva 16: Observaciones
	Diapositiva 17: Referencias