Comment utiliser Bootstrap 4 dans ASP.NET Core

112

Je souhaite mettre à jour Bootstrap dans ASP.NET Core avec NuGet. J'ai utilisé ceci:

Install-Package bootstrap -Version 4.0.0

Il a ajouté les dépendances, mais comment puis-je l'ajouter à mon projet maintenant? Quel est le chemin d'accès aux dépendances NuGet locales?

Dépendances NuGet installées

.net asp.net-core nuget bootstrap-4 asp.net-core-2.0 développeur
la source

3

BS4 ne devrait pas avoir de support Bower (source: getbootstrap.com/docs/4.0/migration/#breaking )

Klooven

Remplacez [email protected] par [email protected]: stackoverflow.com/questions/47985337/…

mrapi

1

Actuellement, cela devrait être la réponse acceptée, la plus simple avec Libman: stackoverflow.com/a/53012140/578552

rfcdejong

Version 4.4.1 désormais compatible avec NUGET.

Diego Venâncio le

223

Comme d'autres l'ont déjà mentionné, le gestionnaire de packages Bower , qui était généralement utilisé pour des dépendances comme celle-ci dans les applications qui ne reposent pas sur de lourds scripts côté client, est en voie de disparition et recommande activement de passer à d'autres solutions:

..psst! Bien que Bower soit maintenu, nous recommandons le fil et le webpack pour les nouveaux projets frontaux!

Ainsi, bien que vous puissiez toujours l'utiliser pour le moment, Bootstrap a également annoncé l' abandon de son support . Par conséquent, les modèles ASP.NET Core intégrés sont lentement modifiés pour s'en éloigner également.

Malheureusement, il n'y a pas de voie à suivre claire. Cela est principalement dû au fait que les applications Web évoluent continuellement vers le côté client, ce qui nécessite des systèmes de construction complexes côté client et de nombreuses dépendances. Donc, si vous construisez quelque chose comme ça, vous savez peut-être déjà comment résoudre ce problème, et vous pouvez étendre votre processus de construction existant pour y inclure simplement Bootstrap et jQuery.

Mais il existe encore de nombreuses applications Web qui ne sont pas si lourdes du côté client, où l'application s'exécute toujours principalement sur le serveur et le serveur sert par conséquent des vues statiques. Bower remplissait auparavant cela en facilitant la publication des dépendances côté client sans trop de processus.

Dans le monde .NET, nous avons également NuGet et avec les versions précédentes d'ASP.NET, nous pourrions également utiliser NuGet pour ajouter des dépendances à certaines dépendances côté client puisque NuGet placerait simplement le contenu correctement dans notre projet. Malheureusement, avec le nouveau .csprojformat et le nouveau NuGet, les packages installés sont situés en dehors de notre projet, nous ne pouvons donc pas simplement les référencer.

Cela nous laisse quelques options pour ajouter nos dépendances:

Installation unique

C'est ce que font actuellement les modèles ASP.NET Core, qui ne sont pas des applications monopages. Lorsque vous les utilisez pour créer une nouvelle application, le wwwrootdossier contient simplement un dossier libcontenant les dépendances:

Le dossier wwwroot contient le dossier lib avec des dépendances statiques

Si vous regardez de près les fichiers actuellement, vous pouvez voir qu'ils ont été initialement placés là avec Bower pour créer le modèle, mais cela est susceptible de changer bientôt. L'idée de base est que les fichiers sont copiés une fois dans le wwwrootdossier afin que vous puissiez en dépendre.

Pour ce faire, nous pouvons simplement suivre l'introduction de Bootstrap et télécharger directement les fichiers compilés . Comme mentionné sur le site de téléchargement, cela n'inclut pas jQuery , nous devons donc également le télécharger séparément; il contient cependant Popper.js si nous choisissons d'utiliser le bootstrap.bundlefichier plus tard - ce que nous ferons. Pour jQuery, nous pouvons simplement obtenir un seul fichier «compressé, production» à partir du site de téléchargement ( faites un clic droit sur le lien et sélectionnez «Enregistrer le lien sous ...» dans le menu).

Cela nous laisse avec quelques fichiers qui seront simplement extraits et copiés dans le wwwrootdossier. Nous pouvons également créer un libdossier pour préciser qu'il s'agit de dépendances externes:

Le dossier wwwroot contient le dossier lib avec nos dépendances installées

C'est tout ce dont nous avons besoin, il ne nous reste plus qu'à ajuster notre _Layout.cshtmlfichier pour inclure ces dépendances. Pour cela, nous ajoutons le bloc suivant au <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>

Et le bloc suivant à la toute fin du <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>

Vous pouvez également simplement inclure les versions minifiées et ignorer les <environment>aides de balises ici pour le rendre un peu plus simple. Mais c'est tout ce que vous devez faire pour continuer à démarrer.

Dépendances de NPM

La méthode la plus moderne, également si vous souhaitez maintenir vos dépendances à jour, serait d'obtenir les dépendances à partir du référentiel de packages NPM. Vous pouvez utiliser NPM ou Yarn pour cela; dans mon exemple, j'utiliserai NPM.

Pour commencer, nous devons créer un package.jsonfichier pour notre projet afin de pouvoir spécifier nos dépendances. Pour ce faire, nous le faisons simplement à partir de la boîte de dialogue «Ajouter un nouvel élément»:

Ajouter un nouvel élément: fichier de configuration npm

Une fois que nous avons cela, nous devons le modifier pour inclure nos dépendances. Cela devrait ressembler à ceci:

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

En enregistrant, Visual Studio exécutera déjà NPM pour installer les dépendances pour nous. Ils seront installés dans le node_modulesdossier. Il ne reste donc plus qu'à récupérer les fichiers à partir de là dans notre wwwrootdossier. Il existe quelques options pour ce faire:

`bundleconfig.json` pour le regroupement et la minification

Nous pouvons utiliser l'une des différentes façons de consommer un bundleconfig.jsonpour le regroupement et la minification, comme expliqué dans la documentation . Un moyen très simple consiste simplement à utiliser le package NuGet BuildBundlerMinifier qui configure automatiquement une tâche de génération pour cela.

Après avoir installé ce package, nous devons créer un bundleconfig.jsonà la racine du projet avec le contenu suivant:

[
  {
    "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 }
  }
]

Cela configure essentiellement les fichiers à combiner en quoi. Et quand nous construisons, nous pouvons voir que les vendor.min.csset vendor.js.csssont créés correctement. Donc, tout ce que nous devons faire est d'ajuster notre_Layouts.html nouveau pour inclure ces fichiers:

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

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

Utiliser un gestionnaire de tâches comme Gulp

Si nous voulons passer un peu plus au développement côté client, nous pouvons également commencer à utiliser des outils que nous utiliserions là-bas. Par exemple Webpack qui est un outil de construction très couramment utilisé pour vraiment tout. Mais nous pouvons aussi commencer avec un gestionnaire de tâches plus simple comme Gulp et effectuer nous-mêmes les quelques étapes nécessaires.

Pour cela, nous ajoutons un gulpfile.jsà la racine de notre projet, avec le contenu suivant:

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'));

Maintenant, nous devons également ajuster notre package.jsonpour avoir des dépendances sur gulpet 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"
  }
}

Enfin, nous éditons notre .csprojpour ajouter la tâche suivante qui garantit que notre tâche Gulp s'exécute lorsque nous construisons le projet:

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

Maintenant, lorsque nous construisons, la defaulttâche Gulp s'exécute, qui exécute les build-vendortâches, qui construit ensuite notre vendor.min.csset vendor.min.jscomme nous l'avons fait auparavant. Donc, après avoir ajusté notre_Layout.cshtml comme ci-dessus, nous pouvons utiliser jQuery et Bootstrap.

Alors que la configuration initiale de Gulp est un peu plus compliquée que le bundleconfig.json ci-dessus, nous sommes maintenant entrés dans le monde des nœuds et pouvons commencer à utiliser tous les autres outils intéressants. Cela vaut donc la peine de commencer par ceci.

Conclusion

Bien que cela soit soudainement devenu beaucoup plus compliqué qu'avec la simple utilisation de Bower, nous gagnons également beaucoup de contrôle avec ces nouvelles options. Par exemple, nous pouvons maintenant décider quels fichiers sont réellement inclus dans le wwwrootdossier et à quoi ils ressemblent exactement. Et nous pouvons également l'utiliser pour faire les premiers pas dans le monde du développement côté client avec Node, ce qui au moins devrait aider un peu avec la courbe d'apprentissage.

poussée
la source

1

Lors de l'utilisation de la méthode npm, je recevais des erreurs telles que "Uncaught SyntaxError: Uncaught token export". Pour résoudre ce problème, je suis passé au fichier umd popper.js "node_modules / popper.js / dist / umd / popper.min.js". Sinon, l'une des meilleures réponses que j'ai jamais vues sur la pile, merci.

James Blake

2

@user On dirait que vous utilisez une très ancienne version de Node. Vous pouvez voir la version en exécutant node -vet obtenir une version actuelle ici sur nodejs.org

poke

62

LOL. Je dois rire ou je pleurerai. Dix-sept ans de développement .Net utilisant le support d'outillage de Visual Studio, et en est-il arrivé là? Personnellement, je ne vois pas comment il s’agit d’un progrès. S'il faut autant de travail pour ajouter un style Bootstrap à un projet Web, quelque chose s'est complètement mal passé.

camainc

11

@camainc Si quelque chose, alors blâmez-le sur le développement de l'écosystème JavaScript. Ce n'est vraiment pas du tout lié à .NET ou à Visual Studio. La solution simple consiste toujours à télécharger les fichiers manuellement, puis à les ajouter à votre racine Web. C'est ainsi que cela fonctionnait toutes les années auparavant. - Et pour ce que ça vaut, Microsoft travaille sur de nouveaux outils VS pour rendre ce processus plus simple (et actualisable).

poke le

3

@ ozzy432836, je sais que ce n'est pas un problème de bootstrap, et je n'ai jamais dit que c'était le cas. C'est un problème de développement général avec tout le monde apparemment à la recherche du prochain nouveau cadre. J'ai vu beaucoup de changements dans ma carrière, mais rien de tel que ce qui s'est passé ces dernières années autour de Javascript. Il a été absolument fou de voir la communauté du développement créer un nouveau cadre après l'autre. Quant à savoir si JS est la voie à suivre, le jury n'est toujours pas sur celui-là, en particulier avec WASM et des projets comme Blazor à l'horizon.

camainc

56

En regardant cela, il semble que l'approche LibMan fonctionne mieux pour mes besoins avec l'ajout de Bootstrap. Je l'aime car il est maintenant intégré à Visual Studio 2017 (15.8 ou version ultérieure) et possède ses propres boîtes de dialogue.

Mise à jour 6/11/2020: bootstrap 4.1.3 est maintenant ajouté par défaut avec VS-2019.5 (merci à Harald S. Hanssen pour l'avoir remarqué.)

La méthode par défaut que VS ajoute aux projets utilise Bower, mais il semble qu'elle est en voie de disparition. Dans l'en-tête de la page Microsoft Bower, ils écrivent:

Après quelques liens, vous accédez à Utiliser LibMan avec ASP.NET Core dans Visual Studio, où il montre comment les bibliothèques peuvent être ajoutées à l'aide d'une boîte de dialogue intégrée:

Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le dossier du projet dans lequel les fichiers doivent être ajoutés. Choisissez Ajouter> Bibliothèque côté client. La boîte de dialogue Ajouter une bibliothèque côté client s'affiche: [source: Scott Addie 2018 ]

Ensuite, pour bootstrap, sélectionnez simplement (1) le unpkg, (2) tapez "bootstrap @ .." (3) Install. Après cela, vous voudrez simplement vérifier que toutes les inclusions dans _Layout.cshtml ou à d'autres endroits sont correctes. Ils devraient être quelque chose comme href = "~ / lib / bootstrap / dist / js / bootstrap ..." )

Sunsetquest
la source

1

J'ai VS 4.7.02558 (Community Edition) et c'était l'option la plus simple pour moi. Je l'ai utilisé dans des projets pratiques créés pour étudier pour l'examen MS 70-486 (MVC), je ne peux donc pas vous dire à quel point cela est efficace pour les projets destinés à la production.

Ed Gibbs

2

Pour moi, c'était aussi le moyen le plus simple d'installer le matériel avec MS STANDARD TOOL. Avec les conseils dans votre publication - changez le fournisseur en unpkg, tapez bootstrap @ 4., J'ai pu installer. Libman n'est vraiment pas intuitif (dans mon cas, je devais aussi entrer le. (Point) après 4, avant que les paquets ne soient montrés (je pensais que libman ne fonctionne pas dans mon environnement).

FredyWenger

2

Juste un rappel: si vous recherchez Bootstrap sur CdnJS, sachez que le nom est twitter-bootstrap comme il a été appelé à l'origine.

D.Rosado

1

Dans Visual Studio 2019 (le dernier au 11 juin 2020) - Le fichier libman est créé, mais je ne vois pas la fenêtre contextuelle libman.

Harald S. Hanssen le

1

J'ai testé LibMan sur plusieurs projets et c'est vraiment la voie à suivre. Dommage que l'interface graphique ne fonctionne pas, mais après quelques essais, elle est facile à utiliser.

Harald S. Hanssen le

18

Essayez Libman , c'est aussi simple que Bower et vous pouvez spécifier wwwroot / lib / comme dossier de téléchargement.

ysabih
la source

1

Pas encore dans la version VS2017: MISE À JOUR: 24 mai 2018 - Il semble que LibMan ne soit pas entré dans la version finale de 15.7. C'est dans l'aperçu pour 15.8.x

kristianp

1

On dirait que c'est maintenant disponible avec la version 15.8 finale.

Kirk Larkin

Il est maintenant disponible dans VS2017 V 15.8 et une approche beaucoup plus simple que la réponse acceptée

Jemsworld

10

Quel est le truc pour moi, c'est:

1) Faites un clic droit sur wwwroot> Ajouter> Bibliothèque côté client

2) Tapé "bootstrap" dans le champ de recherche

3) Sélectionnez "Choisir des fichiers spécifiques"

4) Faites défiler vers le bas et sélectionnez un dossier. Dans mon cas, j'ai choisi "twitter-bootstrap"

5) Vérifiez "css" et "js"

6) Cliquez sur "Installer".

Quelques secondes plus tard, je les ai tous dossier wwwroot. Faites de même pour tous les packages côté client que vous souhaitez ajouter.

Auguste
la source

6

Libman semble désormais être l'outil préféré de Microsoft. Il est intégré à Visual Studio 2017 (15.8).

Cet article décrit comment l'utiliser et même comment configurer une restauration effectuée par le processus de génération.

La documentation de Bootstrap vous indique les fichiers dont vous avez besoin dans votre projet.

L'exemple suivant devrait fonctionner comme configuration pour 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
la source

Merci, je suivais dans un livre Pro ASP.NET Core MVC 2 qui m'a dit d'utiliser Bower qui est maintenant obsolète. J'ai cherché pendant un bon moment avant de réaliser que vous pouvez simplement cliquer avec le bouton droit de la souris sur votre projet et sélectionner Ajouter -> Bibliothèque côté client. Et cela utilise libman. Tout est intégré.

TxRegex

4

Nous utilisons bootstrap 4 dans le noyau asp.net mais référençons les bibliothèques de "npm" en utilisant l'extension "Package Installer" et avons trouvé que c'était mieux que Nuget pour les bibliothèques Javascript / CSS.

Nous utilisons ensuite l'extension "Bundler & Minifier" pour copier les fichiers pertinents pour la distribution (du dossier npm node_modules, qui se trouve en dehors du projet) dans wwwroot comme nous le souhaitons pour le développement / déploiement.

Mark Redman
la source

4

Malheureusement, vous allez avoir du mal à utiliser NuGet pour installer Bootstrap (ou la plupart des autres frameworks JavaScript / CSS) sur un projet .NET Core. Si vous regardez l'installation de NuGet, cela vous indique qu'elle est incompatible:

si vous devez savoir où se trouvent les dépendances des packages locaux, elles se trouvent maintenant dans votre répertoire de profil local. c'est à dire%userprofile%\.nuget\packages\bootstrap\4.0.0\content\Scripts .

Cependant, je suggère de passer à npm, ou bower - comme dans la réponse de Saineshwar.

Balah
la source

2

BS4 est désormais disponible sur .NET Core 2.2 . Sur le programme d'installation du SDK 2.2.105 x64 à coup sûr. J'exécute Visual Studio 2017 avec. Jusqu'ici tout va bien pour les nouveaux projets d'application Web.

klewis
la source

2

Pourquoi ne pas simplement utiliser un CDN? À moins que vous n'ayez besoin de modifier le code de BS, il vous suffit de référencer les codes dans CDN.

Voir BS 4 CDN ici:

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

Au bas de la page.

Bord
la source

1

L'utilisation d'un CDN ajoute une dépendance d'exécution. Donc, si le CDN tombe en panne, votre site fait de même. C'est un problème de sécurité car quiconque contrôle le cdn peut modifier les fichiers populaires et injecter un script dans votre site. C'est également un problème de confidentialité car le navigateur de l'utilisateur demande les fichiers à un serveur tiers plutôt qu'au vôtre.

TxRegex

3

@TxRegex à un moment donné, il a été en fait recommandé que les références soient au CDN plutôt qu'au serveur d'une application Web; car le navigateur d'un utilisateur avait probablement déjà mis en cache une bibliothèque populaire telle que Bootstrap tout en parcourant d'autres sites. Mais peu importe ...

joedotnot

0

Utilisez le fichier de configuration nmp (ajoutez-le à votre projet Web), puis ajoutez les packages nécessaires de la même manière que nous l'avons fait en utilisant bower.json et enregistrez. Visual Studio le téléchargera et l'installera. Vous trouverez le package sous le nœud nmp de votre projet.

Alexandre le Grand
la source