Cuando utilice Visual Studio 2022, LibMan es la elección perfecta para instalar el paquete Bootstrap en su aplicación. Siga estos pasos rápidos:

  • Paso n.º 1: en su «Explorador de soluciones» ventana, haga clic con el botón derecho en Nombre del proyecto y luego seleccione Agregar > Biblioteca del lado del cliente. Se abrirá la ventana «Agregar biblioteca del lado del cliente».

  • Paso #2: Luego, en la ventana Agregar biblioteca del lado del cliente, deje el proveedor predeterminado que es «cdnjs» en este caso.
  • Paso #3: Ingrese el nombre de la biblioteca para agregar en el cuadro de texto Biblioteca. IntelliSense proporciona una lista de bibliotecas según el nombre que agregó. Así que aquí solo tienes que escribir twitter-bootstrap, y cuando aparezca la entrada, simplemente selecciónala. Seleccionará automáticamente la última versión de Bootstrap. Sin embargo, si lo desea, puede ingresar la versión manualmente. Aquí, estoy instalando la última versión de Bootstrap, es decir, («twitter-bootstrap@4.4.1»).

  • Paso #4: Hay dos botones de opción «Incluir todos los archivos de la biblioteca» y «Elegir archivos específicos». La opción Incluir todos los archivos de la biblioteca descargará todos los archivos, mientras que la opción Elegir archivos específicos le permite seleccionar los archivos que desea incluir. Seleccione la opción «Todos los archivos de la biblioteca» si no tiene requisitos específicos.
  • Paso #5: En el cuadro de texto Ubicación de destino, puede especificar la ubicación de la carpeta donde desea que se instalen los archivos de la biblioteca. De manera predeterminada, Bootstrap se instalará en la ubicación predeterminada que es

Estos son los pasos para actualizar Bootstrap a través de NuGet

  1. Inicie Visual Studio. Vaya al menú Archivo >> Nuevo >> Proyecto.
  2. En la ventana Nuevo proyecto, vaya a Instalado >> Visual C# >> Web.
  3. Seleccione Aplicación web ASP.NET (.NET Framework), ingrese el nombre del proyecto y presione el botón Aceptar. (También seleccioné .NET Framework 4.7.1. Pero es opcional.)
  4. En la siguiente pantalla, Nueva aplicación web ASP.NET, seleccione Formularios web en Plantillas y presione el botón Aceptar.
  5. El proyecto ASP.NET Web Forms ya está creado.
  6. Para verificar la versión de arranque, haga clic con el botón derecho en la solución en el explorador de soluciones y seleccione Administrar paquetes NuGet para la solución… En la ventana Administrar NuGet, busque el paquete de arranque y selecciónelo. En el panel derecho, puede ver que la versión instalada de bootstrap es 3.0.0 y la última versión estable es superior a esta. En mi caso la última versión estable es la 4.0.0.
  7. Para actualizar Bootstrap a la última versión estable, seleccione el nombre del proyecto en el panel derecho de la pantalla de NuGet y presione el botón Instalar junto al último número de versión estable.
  8. Junto con el paquete nugget, se instala un paquete dependiente poppers.js y otros paquetes dependientes ya instalados como AspNet.ScriptManager.bootstrap, jQuery y AspNet.ScriptManager.jQuery se actualizan a versiones de arranque.
  9. Bootstrap y sus paquetes de dependencia ahora están actualizados y listos para usar. Si lo desea, puede actualizar todos los demás paquetes NuGet como WebGrease, Respond, Antlr, etc. a las últimas versiones. Siempre es una buena práctica utilizar las últimas versiones del software al iniciar un nuevo proyecto web.
  10. Si desea ver los archivos de arranque en su proyecto, expanda las carpetas Contenido y Scripts. Son como se muestra en la captura de pantalla a continuación.
  11. Ahora vaya al archivo Site.Master y agregue la referencia a popper.js directamente o usando BundleConfig y ScriptReference. (NOTA: Popper.js solo es necesario si usa información sobre herramientas, popovers o menús desplegables en bootstrap).
  12. Como se mencionó anteriormente, la interfaz de usuario predeterminada del proyecto es bootstrap. Si observa el código en el archivo Site.Master, puede ver la plantilla de arranque con la barra de navegación de arranque (barra de navegación) y el contenedor. Pero, este código es para una versión anterior de bootstrap. Bootstrap 4 no admitirá parte de este código, especialmente la barra de navegación. Las barras de navegación y las barras de navegación se reescriben completamente en bootstrap 4. Por lo tanto, debe cambiar la sección de la barra de navegación. Elimine la sección de la barra de navegación que se muestra a continuación del archivo Site.Master.
  13. Utilice el código siguiente en lugar del antiguo código de barra de navegación.

  14. El sistema de cuadrícula Bootstrap se administra en archivos aspx. Por ejemplo, si abre el archivo Default.aspx, puede ver las columnas y las cuadrículas de arranque.

Referencias de Bootstrap

Finalmente, terminar con la implementación de Bootstrap en ASP, necesitamos agregar las referencias para utilizarlo.

Para usar el marco en todo el proyecto, agregaremos referencias al archivo maestro.

Por campus