Cómo usar Bootstrap 4 en ASP.NET Core

112

Quiero actualizar Bootstrap en ASP.NET Core con NuGet. Usé esto:

Install-Package bootstrap -Version 4.0.0

Agregó las dependencias, pero ¿cómo lo agrego a mi proyecto ahora? ¿Cuál es la ruta para las dependencias locales de NuGet?

Dependencias de NuGet instaladas

.net asp.net-core nuget bootstrap-4 asp.net-core-2.0 desarrollador
fuente

3

BS4 no debería tener soporte para Bower (fuente: getbootstrap.com/docs/4.0/migration/#breaking )

Klooven

Reemplace [email protected] con [email protected]: stackoverflow.com/questions/47985337/…

mrapi

1

Actualmente, esta debería ser la respuesta aceptada, la más fácil de usar Libman: stackoverflow.com/a/53012140/578552

rfcdejong

Versión 4.4.1 compatible ahora con NUGET.

Diego Venâncio

223

Como ya han mencionado otros, el administrador de paquetes Bower , que generalmente se usaba para dependencias como esta en aplicaciones que no dependen de scripts pesados del lado del cliente, está en vías de salida. y recomienda activamente pasar a otras soluciones:

..psst! Mientras se mantenga Bower, recomendamos hilo y paquete web para nuevos proyectos de front-end.

Entonces, aunque todavía puede usarlo en este momento, Bootstrap también ha anunciado que dejará de admitirlo. . Como resultado, las plantillas ASP.NET Core integradas se están editando lentamente para alejarse también.

Desafortunadamente, no hay un camino claro a seguir. Esto se debe principalmente al hecho de que las aplicaciones web se están moviendo continuamente más hacia el lado del cliente, lo que requiere sistemas de compilación complejos del lado del cliente y muchas dependencias. Entonces, si está construyendo algo así, es posible que ya sepa cómo resolver esto, y puede expandir su proceso de compilación existente para incluir también Bootstrap y jQuery allí.

Pero todavía hay muchas aplicaciones web que no son tan pesadas en el lado del cliente, donde la aplicación todavía se ejecuta principalmente en el servidor y el servidor ofrece vistas estáticas como resultado. Bower anteriormente llenó esto facilitando la publicación de dependencias del lado del cliente sin tanto proceso.

En el mundo .NET también tenemos NuGet y con versiones anteriores de ASP.NET, también podríamos usar NuGet para agregar dependencias a algunas dependencias del lado del cliente ya que NuGet simplemente colocaría el contenido en nuestro proyecto correctamente. Desafortunadamente, con el nuevo.csproj formato y el nuevo NuGet, los paquetes instalados se encuentran fuera de nuestro proyecto, por lo que no podemos simplemente hacer referencia a ellos.

Esto nos deja con algunas opciones sobre cómo agregar nuestras dependencias:

Instalación única

Esto es lo que hacen actualmente las plantillas ASP.NET Core, que no son aplicaciones de una sola página. Cuando los usa para crear una nueva aplicación, la wwwrootcarpeta simplemente contiene una carpeta libque contiene las dependencias:

La carpeta wwwroot contiene la carpeta lib con dependencias estáticas

Si observa detenidamente los archivos actualmente, puede ver que originalmente se colocaron allí con Bower para crear la plantilla, pero es probable que eso cambie pronto. La idea básica es que los archivos se copien una vez alwwwroot carpeta para que pueda confiar en ellos.

Para hacer esto, simplemente podemos seguir la introducción de Bootstrap y descargar los archivos compilados directamente. Como se mencionó en el sitio de descarga, esto no incluye jQuery , por lo que también debemos descargarlo por separado; que contiene Popper.js embargo, si optamos por utilizar el bootstrap.bundlearchivo más adelante, que vamos a hacer. Para jQuery, simplemente podemos obtener un solo archivo "comprimido, de producción" del sitio de descarga (haga clic con el botón derecho en el enlace y seleccione "Guardar enlace como ..." en el menú).

Esto nos deja con algunos archivos que simplemente se extraerán y copiarán en la wwwrootcarpeta. También podemos hacer una libcarpeta para dejar más claro que se trata de dependencias externas:

La carpeta wwwroot contiene la carpeta lib con nuestras dependencias instaladas

Eso es todo lo que necesitamos, así que ahora solo necesitamos ajustar nuestro _Layout.cshtmlarchivo para incluir esas dependencias. Para eso, agregamos el siguiente bloque al <head>:

<environment include="Development">
    <link rel="stylesheet" href="~/lib/css/bootstrap.css" />
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="~/lib/css/bootstrap.min.css" />
</environment>

Y el siguiente bloque al final del <body>:

<environment include="Development">
    <script src="~/lib/js/jquery-3.3.1.js"></script>
    <script src="~/lib/js/bootstrap.bundle.js"></script>
</environment>
<environment exclude="Development">
    <script src="~/lib/js/jquery-3.3.1.min.js"></script>
    <script src="~/lib/js/bootstrap.bundle.min.js"></script>
</environment>

También puede incluir las versiones minimizadas y omitir los <environment>ayudantes de etiquetas aquí para hacerlo un poco más simple. Pero eso es todo lo que necesita hacer para seguir empezando.

Dependencias de NPM

La forma más moderna, también si desea mantener sus dependencias actualizadas, sería obtener las dependencias del repositorio de paquetes NPM. Puede usar NPM o Yarn para esto; en mi ejemplo, usaré NPM.

Para empezar, necesitamos crear un package.jsonarchivo para nuestro proyecto, para que podamos especificar nuestras dependencias. Para hacer esto, simplemente lo hacemos desde el cuadro de diálogo "Agregar nuevo elemento":

Agregar nuevo elemento: archivo de configuración npm

Una vez que lo tengamos, debemos editarlo para incluir nuestras dependencias. Algo debería verse así:

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "bootstrap": "4.0.0",
    "jquery": "3.3.1",
    "popper.js": "1.12.9"
  }
}

Al guardar, Visual Studio ya ejecutará NPM para instalar las dependencias por nosotros. Se instalarán en la node_modulescarpeta. Entonces, lo que queda por hacer es llevar los archivos desde allí a nuestra wwwrootcarpeta. Hay algunas opciones para hacer eso:

`bundleconfig.json` para empaquetar y minificar

Podemos utilizar una de las diversas formas de consumir un bundleconfig.jsonpaquete y minificación, como se explica en la documentación . Una forma muy fácil es simplemente usar el paquete BuildBundlerMinifier NuGet que configura automáticamente una tarea de compilación para esto.

Después de instalar ese paquete, necesitamos crear un bundleconfig.jsonen la raíz del proyecto con el siguiente contenido:

[
  {
    "outputFileName": "wwwroot/vendor.min.css",
    "inputFiles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],
    "minify": { "enabled": false }
  },
  {
    "outputFileName": "wwwroot/vendor.min.js",
    "inputFiles": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/popper.js/dist/umd/popper.min.js",
      "node_modules/bootstrap/dist/js/bootstrap.min.js"
    ],
    "minify": { "enabled": false }
  }
]

Esto básicamente configura qué archivos combinar en qué. Y cuando construimos, podemos ver que vendor.min.cssy vendor.js.cssse crean correctamente. Entonces, todo lo que tenemos que hacer es ajustar nuestra _Layouts.htmlespalda para incluir esos archivos:

<!-- inside <head> -->
<link rel="stylesheet" href="~/vendor.min.css" />

<!-- at the end of <body> -->
<script src="~/vendor.min.js"></script>

Usando un administrador de tareas como Gulp

Si queremos movernos un poco más hacia el desarrollo del lado del cliente, también podemos comenzar a usar herramientas que usaríamos allí. Por ejemplo, Webpack, que es una herramienta de construcción muy utilizada para realmente todo. Pero también podemos comenzar con un administrador de tareas más simple como Gulp y hacer los pocos pasos necesarios nosotros mismos.

Para eso, agregamos a gulpfile.jsen la raíz de nuestro proyecto, con el siguiente contenido:

const gulp = require('gulp');
const concat = require('gulp-concat');

const vendorStyles = [
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
];
const vendorScripts = [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js",
];

gulp.task('build-vendor-css', () => {
    return gulp.src(vendorStyles)
        .pipe(concat('vendor.min.css'))
        .pipe(gulp.dest('wwwroot'));
});

gulp.task('build-vendor-js', () => {
    return gulp.src(vendorScripts)
        .pipe(concat('vendor.min.js'))
        .pipe(gulp.dest('wwwroot'));
});

gulp.task('build-vendor', gulp.parallel('build-vendor-css', 'build-vendor-js'));

gulp.task('default', gulp.series('build-vendor'));

Ahora, también necesitamos ajustar nuestro package.jsonpara tener dependencias en gulpy gulp-concat:

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "bootstrap": "4.0.0",
    "gulp": "^4.0.2",
    "gulp-concat": "^2.6.1",
    "jquery": "3.3.1",
    "popper.js": "1.12.9"
  }
}

Finalmente, editamos nuestro .csprojpara agregar la siguiente tarea que asegura que nuestra tarea Gulp se ejecute cuando construimos el proyecto:

<Target Name="RunGulp" BeforeTargets="Build">
  <Exec Command="node_modules\.bin\gulp.cmd" />
</Target>

Ahora, cuando defaultcompilamos, se ejecuta la tarea Gulp, que ejecuta las build-vendortareas, que luego construye nuestro vendor.min.cssy vendor.min.jstal como lo hicimos antes. Entonces, después de ajustar nuestro _Layout.cshtmlcomo arriba, podemos hacer uso de jQuery y Bootstrap.

Si bien la configuración inicial de Gulp es un poco más complicada que la bundleconfig.jsonanterior, ahora hemos ingresado al mundo de los nodos y podemos comenzar a hacer uso de todas las otras herramientas interesantes allí. Por lo tanto, podría valer la pena comenzar con esto.

Conclusión

Si bien esto de repente se volvió mucho más complicado que con solo usar Bower, también ganamos mucho control con esas nuevas opciones. Por ejemplo, ahora podemos decidir qué archivos se incluyen realmente dentro de la wwwrootcarpeta y cómo se ven exactamente. Y también podemos usar esto para dar los primeros pasos en el mundo del desarrollo del lado del cliente con Node, lo que al menos debería ayudar un poco con la curva de aprendizaje.

dar un toque
fuente

1

Cuando usaba el método npm, recibía errores como "Error de sintaxis no detectado: exportación de token inesperada". Para solucionar esto, cambié al archivo popper.js umd "node_modules / popper.js / dist / umd / popper.min.js". De lo contrario, una de las mejores respuestas que he visto en la pila, gracias.

James Blake

2

@user Eso suena como si estuviera usando una versión muy antigua de Node. Puede ver la versión ejecutando node -vy obtener una versión actual aquí en nodejs.org

poke

62

LOL. Tengo que reír o lloraré. Diecisiete años de desarrollo .Net utilizando el soporte de herramientas de Visual Studio, ¿y ha llegado a esto? Personalmente, no veo cómo esto es un progreso hacia adelante. Si se necesita tanto trabajo solo para agregar el estilo Bootstrap a un proyecto web, entonces algo ha salido drásticamente mal.

camainc

11

@camainc En todo caso, échale la culpa al desarrollo del ecosistema JavaScript. Esto realmente no está relacionado con .NET o Visual Studio en absoluto. La solución simple sigue siendo simplemente descargar los archivos manualmente y luego agregarlos a su raíz web. Así es como funcionó todos los años anteriores también. - Y por si sirve de algo, Microsoft está trabajando en nuevas herramientas VS para hacer este proceso más simple (y actualizable).

empuje el

3

@ ozzy432836, sé que no es un problema de arranque, y nunca dije que lo fuera. Es un problema de desarrollo general con todo el mundo aparentemente persiguiendo el próximo nuevo marco. He visto muchos cambios en mi carrera, pero nada como lo que ha sucedido en los últimos años en torno a Javascript. Ha sido absolutamente loco ver a la comunidad de desarrollo batir un nuevo marco tras otro. En cuanto a si JS es el camino a seguir, el jurado aún está deliberando sobre eso, especialmente con WASM y proyectos como Blazor en el horizonte.

camainc

56

Al analizar esto, parece que el enfoque LibMan funciona mejor para mis necesidades al agregar Bootstrap. Me gusta porque ahora está integrado en Visual Studio 2017 (15.8 o posterior) y tiene sus propios cuadros de diálogo.

Actualización 11/6/2020: bootstrap 4.1.3 ahora se agrega de forma predeterminada con VS-2019.5 (Gracias a Harald S. Hanssen por notarlo).

El método predeterminado que VS agrega a los proyectos usa Bower, pero parece que está a punto de desaparecer. En el encabezado de la página de la glorieta de Microsofts escriben:

Seguir un par de enlaces conduce a Use LibMan con ASP.NET Core en Visual Studio, donde muestra cómo se pueden agregar bibliotecas mediante un cuadro de diálogo integrado:

En el Explorador de soluciones, haga clic con el botón derecho en la carpeta del proyecto en la que se deben agregar los archivos. Elija Agregar> Biblioteca del lado del cliente. Aparece el cuadro de diálogo Agregar biblioteca del lado del cliente: [fuente: Scott Addie 2018 ]

Luego, para bootstrap, simplemente (1) seleccione la opción Unkg, (2) escriba "bootstrap @ .." (3) Instalar. Después de esto, solo querrá verificar que todas las inclusiones en _Layout.cshtml u otros lugares sean correctas. Deberían ser algo como href = "~ / lib / bootstrap / dist / js / bootstrap ..." )

Sunsetquest
fuente

1

Tengo VS 4.7.02558 (Community Edition) y esta fue la opción más fácil para mí. Lo usé en proyectos de práctica creados para estudiar para el examen MS 70-486 (MVC), por lo que no puedo responder sobre cuán efectivo es esto para proyectos que se dirigen a la producción.

Ed Gibbs

2

Para mí, esta también fue la forma más fácil de instalar las cosas con la HERRAMIENTA ESTÁNDAR DE MS. Con las sugerencias en su publicación, cambie Proveedor a Unkg, escriba bootstrap @ 4., Pude instalar. Libman no es realmente intuitivo (en mi caso, también tuve que ingresar el. (Punto) después de 4, antes de que se mostraran los paquetes (pensé, libman no funciona en mi entorno).

FredyWenger

2

Solo un recordatorio: si busca Bootstrap en CdnJS, tenga en cuenta que el nombre es twitter-bootstrap como se llamó originalmente.

D.Rosado

1

En Visual Studio 2019 (el último hasta el 11 de junio de 2020): se crea el archivo libman, pero no veo la ventana emergente libman.

Harald S. Hanssen

1

He probado LibMan en varios proyectos y es realmente el camino a seguir. Lástima que la GUI no funcione, pero después de algunos intentos es fácil de usar.

Harald S. Hanssen

18

Pruebe Libman , es tan simple como Bower y puede especificar wwwroot / lib / como carpeta de descarga.

ysabih
fuente

1

Aún no está en el lanzamiento de VS2017: ACTUALIZACIÓN: 24 de mayo de 2018 - Parece que LibMan no llegó al lanzamiento final de 15.7. Está en la vista previa de 15.8.x

kristianp

1

Parece que esto ya está disponible con la versión final 15.8.

Kirk Larkin

Está disponible ahora en VS2017 V 15.8 y un enfoque mucho más simple que la respuesta aceptada

Jemsworld

10

Cuál es el truco para mí es:

1) Haga clic derecho en wwwroot> Agregar> Biblioteca del lado del cliente

2) Escribió "bootstrap" en el cuadro de búsqueda

3) Seleccione "Elegir archivos específicos"

4) Desplácese hacia abajo y seleccione una carpeta. En mi caso elegí "twitter-bootstrap"

5) Marque "css" y "js"

6) Haga clic en "Instalar".

Unos segundos más tarde tengo todos ellos carpeta wwwroot. Haga lo mismo con todos los paquetes del lado del cliente que desee agregar.

Auguste
fuente

6

Libman parece ser la herramienta preferida por Microsoft ahora. Está integrado en Visual Studio 2017 (15.8).

Este artículo describe cómo usarlo e incluso cómo configurar una restauración realizada por el proceso de compilación.

La documentación de Bootstrap le dice qué archivos necesita en su proyecto.

El siguiente ejemplo debería funcionar como configuración para libman.json.

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
  {
    "library": "[email protected]",
    "destination": "wwwroot/lib/bootstrap",
    "files": [
    "js/bootstrap.bundle.js",
    "css/bootstrap.min.css"
    ]
  },
  {
    "library": "[email protected]",
    "destination": "wwwroot/lib/jquery",
    "files": [
      "jquery.min.js"
    ]
  }
]

}

Marcel Melzig
fuente

Gracias, estaba siguiendo un libro Pro ASP.NET Core MVC 2 que me decía que usara Bower, que ahora está obsoleto. Busqué por un buen tiempo antes de darme cuenta de que simplemente puede hacer clic derecho en su proyecto y seleccionar Agregar -> Biblioteca del lado del cliente. Y eso usa libman. Todo está integrado.

TxRegex

4

Usamos bootstrap 4 en asp.net core, pero hacemos referencia a las bibliotecas de "npm" usando la extensión "Package Installer" y encontramos que esto es mejor que Nuget para las bibliotecas de Javascript / CSS.

Luego usamos la extensión "Bundler & Minifier" para copiar los archivos relevantes para la distribución (de la carpeta npm node_modules, que se encuentra fuera del proyecto) en wwwroot como queramos para el desarrollo / implementación.

Mark Redman
fuente

4

Desafortunadamente, tendrá dificultades para usar NuGet para instalar Bootstrap (o la mayoría de los demás marcos de JavaScript / CSS) en un proyecto .NET Core. Si observa la instalación de NuGet, le dice que es incompatible:

si debe saber dónde están las dependencias de paquetes locales, ahora están en su directorio de perfil local. es decir%userprofile%\.nuget\packages\bootstrap\4.0.0\content\Scripts .

Sin embargo, sugiero cambiar a npm o bower, como en la respuesta de Saineshwar.

Balah
fuente

2

BS4 ahora está disponible en .NET Core 2.2 . En el instalador SDK 2.2.105 x64 seguro. Estoy ejecutando Visual Studio 2017 con él. Hasta ahora todo bien para nuevos proyectos de aplicaciones web.

Klewis
fuente

2

¿Por qué no usar un CDN? A menos que necesite editar el código de BS, solo necesita hacer referencia a los códigos en CDN.

Consulte BS 4 CDN aquí:

https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp

Al final de la página.

Borde
fuente

1

El uso de una CDN agrega una dependencia en tiempo de ejecución. Entonces, si la CDN se cae, también lo hará su sitio. Es un problema de seguridad ya que quien controle el cdn puede cambiar archivos populares e inyectar un script en su sitio. También es un problema de privacidad, ya que el navegador del usuario solicita los archivos de un servidor de terceros en lugar del suyo.

TxRegex

3

@TxRegex en algún momento se recomendó que las referencias fueran a CDN en lugar de al servidor de una aplicación web; porque es probable que el navegador de un usuario ya haya almacenado en caché una biblioteca popular como Bootstrap mientras examinaba otros sitios. Pero lo que sea ...

joedotnot

0

Use el archivo de configuración nmp (agréguelo a su proyecto web), luego agregue los paquetes necesarios de la misma manera que lo hicimos usando bower.json y guarde. Visual Studio lo descargará e instalará. Encontrará el paquete debajo del nodo nmp de su proyecto.

Alexandre le Grand
fuente