Come utilizzare Bootstrap 4 in ASP.NET Core


112

Voglio aggiornare Bootstrap in ASP.NET Core con NuGet. Ho usato questo:

Install-Package bootstrap -Version 4.0.0

Ha aggiunto le dipendenze, ma come posso aggiungerlo al mio progetto ora? Qual è il percorso per le dipendenze NuGet locali?

Dipendenze NuGet installate


3
BS4 non dovrebbe avere il supporto per Bower (fonte: getbootstrap.com/docs/4.0/migration/#breaking )
Klooven

Sostituire bootstrap@4.0.0-beta.3 con bootstrap@4.0.0: stackoverflow.com/questions/47985337/...
mrapi

1
Attualmente questa dovrebbe essere la risposta accettata, il più facile utilizzando Libman: stackoverflow.com/a/53012140/578552
rfcdejong

Versione 4.4.1 compatibile ora da NUGET.
Diego Venâncio il

Risposte:


223

Come altri già menzionati, il gestore di pacchetti Bower , che di solito veniva utilizzato per dipendenze come questa in applicazioni che non si basano su un pesante scripting lato client, è in via di uscita e consiglia attivamente di passare ad altre soluzioni:

..psst! Mentre Bower viene mantenuto, consigliamo filato e webpack per nuovi progetti front-end!

Quindi, anche se puoi ancora usarlo in questo momento, Bootstrap ha anche annunciato di abbandonare il supporto per esso . Di conseguenza, i modelli ASP.NET Core incorporati vengono lentamente modificati per allontanarsi anche da esso.

Sfortunatamente, non esiste un percorso chiaro da seguire. Ciò è principalmente dovuto al fatto che le applicazioni Web si spostano continuamente ulteriormente sul lato client, richiedendo sistemi di compilazione complessi sul lato client e molte dipendenze. Quindi, se stai costruendo qualcosa del genere, potresti già sapere come risolverlo e puoi espandere il tuo processo di compilazione esistente per includere semplicemente anche Bootstrap e jQuery lì.

Ma ci sono ancora molte applicazioni web là fuori che non sono così pesanti sul lato client, dove l'applicazione viene ancora eseguita principalmente sul server e il server offre come risultato visualizzazioni statiche. Bower in precedenza ha riempito questo aspetto semplificando la pubblicazione delle dipendenze lato client senza un gran processo.

Nel mondo .NET abbiamo anche NuGet e con le versioni precedenti di ASP.NET, potremmo usare anche NuGet per aggiungere dipendenze ad alcune dipendenze lato client poiché NuGet posizionerebbe correttamente il contenuto nel nostro progetto. Sfortunatamente, con il nuovo.csproj formato e il nuovo NuGet, i pacchetti installati si trovano al di fuori del nostro progetto, quindi non possiamo semplicemente fare riferimento a quelli.

Questo ci lascia con alcune opzioni su come aggiungere le nostre dipendenze:

Installazione una tantum

Questo è ciò che fanno attualmente i modelli ASP.NET Core, che non sono applicazioni a pagina singola. Quando li usi per creare una nuova applicazione, la wwwrootcartella contiene semplicemente una cartella libche contiene le dipendenze:

La cartella wwwroot contiene la cartella lib con dipendenze statiche

Se guardi attentamente i file attualmente, puoi vedere che erano stati originariamente posizionati lì con Bower per creare il modello, ma è probabile che cambierà presto. L'idea di base è che i file vengano copiati una volta inwwwroot cartella in modo da poter dipendere da loro.

Per fare ciò, possiamo semplicemente seguire l'introduzione di Bootstrap e scaricare direttamente i file compilati . Come menzionato sul sito di download, questo non include jQuery , quindi dobbiamo scaricarlo anche separatamente; esso contiene Popper.js anche se si sceglie di utilizzare il bootstrap.bundlefile in seguito, cosa che faremo. Per jQuery, possiamo semplicemente ottenere un singolo file "compresso, di produzione" dal sito di download (fare clic con il pulsante destro del mouse sul collegamento e selezionare "Salva collegamento con nome ..." dal menu).

Questo ci lascia con alcuni file che verranno semplicemente estratti e copiati nella wwwrootcartella. Possiamo anche creare una libcartella per rendere più chiaro che si tratta di dipendenze esterne:

La cartella wwwroot contiene la cartella lib con le nostre dipendenze installate

Questo è tutto ciò di cui abbiamo bisogno, quindi ora dobbiamo solo regolare il nostro _Layout.cshtmlfile per includere quelle dipendenze. Per questo, aggiungiamo il seguente blocco a <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>

E il blocco seguente alla fine 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>

Puoi anche includere solo le versioni minimizzate e saltare gli <environment>helper dei tag qui per renderlo un po 'più semplice. Ma è tutto ciò che devi fare per farti iniziare.

Dipendenze da NPM

Il modo più moderno, anche se si desidera mantenere aggiornate le proprie dipendenze, sarebbe ottenere le dipendenze dal repository dei pacchetti NPM. Puoi usare NPM o Yarn per questo; nel mio esempio, userò NPM.

Per iniziare, dobbiamo creare un package.jsonfile per il nostro progetto, in modo da poter specificare le nostre dipendenze. Per fare ciò, lo facciamo semplicemente dalla finestra di dialogo "Aggiungi nuovo elemento":

Aggiungi nuovo elemento: file di configurazione npm

Una volta che lo abbiamo, dobbiamo modificarlo per includere le nostre dipendenze. Dovrebbe assomigliare a questo:

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

Salvando, Visual Studio eseguirà già NPM per installare le dipendenze per noi. Verranno installati nella node_modulescartella. Quindi ciò che resta da fare è trasferire i file da lì nella nostra wwwrootcartella. Ci sono alcune opzioni per farlo:

bundleconfig.json per raggruppamento e minificazione

Possiamo usare uno dei vari modi per consumare un bundleconfig.jsonper raggruppamento e minificazione, come spiegato nella documentazione . Un modo molto semplice consiste nell'usare semplicemente il pacchetto NuGet BuildBundlerMinifier che imposta automaticamente un'attività di compilazione per questo.

Dopo aver installato quel pacchetto, dobbiamo creare un bundleconfig.jsonalla radice del progetto con i seguenti contenuti:

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

Questo fondamentalmente configura quali file combinare in cosa. E quando costruiamo, possiamo vedere che vendor.min.csse vendor.js.cssvengono creati correttamente. Quindi tutto ciò che dobbiamo fare è regolare di _Layouts.htmlnuovo il nostro per includere quei file:

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

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

Utilizzando un task manager come Gulp

Se vogliamo muoverci un po 'di più nello sviluppo lato client, possiamo anche iniziare a utilizzare strumenti che utilizzeremmo lì. Ad esempio Webpack che è uno strumento di compilazione molto comunemente usato per davvero tutto. Ma possiamo anche iniziare con un task manager più semplice come Gulp e fare da soli i pochi passaggi necessari.

Per questo, aggiungiamo un gulpfile.jsnella radice del nostro progetto, con i seguenti contenuti:

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

Ora, dobbiamo anche modificare il nostro package.jsonper avere dipendenze da gulpe 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"
  }
}

Infine, modifichiamo il nostro .csprojper aggiungere la seguente attività che assicura che la nostra attività Gulp venga eseguita quando creiamo il progetto:

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

Ora, quando creiamo, defaultviene eseguita l' build-vendorattività Gulp, che esegue le attività, che quindi costruisce le nostre vendor.min.csse vendor.min.jsproprio come abbiamo fatto prima. Quindi, dopo aver regolato il nostro _Layout.cshtmlcome sopra, possiamo fare uso di jQuery e Bootstrap.

Sebbene la configurazione iniziale di Gulp sia un po 'più complicata di bundleconfig.jsonquella sopra, ora siamo entrati nel mondo dei nodi e possiamo iniziare a utilizzare tutti gli altri fantastici strumenti presenti. Quindi potrebbe valere la pena iniziare con questo.

Conclusione

Anche se improvvisamente questo è diventato molto più complicato rispetto al solo utilizzo di Bower, otteniamo anche molto controllo con queste nuove opzioni. Ad esempio, ora possiamo decidere quali file sono effettivamente inclusi nella wwwrootcartella e come appaiono esattamente. E possiamo anche usarlo per fare i primi passi nel mondo dello sviluppo lato client con Node, che almeno dovrebbe aiutare un po ' con la curva di apprendimento.


1
Quando utilizzavo il metodo npm, ricevevo errori come "Uncaught SyntaxError: Unexpected token export". Per risolvere questo problema sono passato al file umd popper.js "node_modules / popper.js / dist / umd / popper.min.js". Altrimenti una delle migliori risposte che abbia mai visto in pila, grazie.
James Blake

2
@user Sembra che tu stia usando una versione molto vecchia di Node. Puoi vedere la versione eseguendo node -ve ottenere una versione corrente qui su nodejs.org
poke

62
LOL. Devo ridere o piangerò. Diciassette anni di sviluppo .Net utilizzando il supporto degli strumenti di Visual Studio, e si è arrivati ​​a questo? Personalmente, non vedo come questo sia un progresso in avanti. Se ci vuole così tanto lavoro solo per aggiungere lo stile Bootstrap a un progetto web, qualcosa è andato drasticamente storto.
camainc

11
@camainc Se non altro, dai la colpa allo sviluppo dell'ecosistema JavaScript. Questo non è affatto correlato a .NET o Visual Studio. La soluzione semplice è ancora quella di scaricare manualmente i file e quindi aggiungerli alla tua radice web. È così che ha funzionato anche tutti gli anni prima. - E per quel che vale, Microsoft sta lavorando a nuovi strumenti VS per rendere questo processo più semplice (e aggiornabile).
colpisci il

3
@ ozzy432836, so che non è un problema di bootstrap e non ho mai detto che lo fosse. È un problema di sviluppo generale con tutti apparentemente alla ricerca del prossimo nuovo framework. Ho visto molti cambiamenti nella mia carriera, ma niente come quello che è successo negli ultimi due anni intorno a Javascript. È stato assolutamente folle osservare la comunità di sviluppo sfornare un nuovo framework dopo l'altro. Per quanto riguarda se JS è la via da seguire, la giuria è ancora fuori su quello, specialmente con WASM e progetti come Blazor all'orizzonte.
camainc

56

Esaminando questo, sembra che l'approccio LibMan funzioni meglio per le mie esigenze con l'aggiunta di Bootstrap. Mi piace perché ora è integrato in Visual Studio 2017 (15.8 o successivo) e ha le proprie finestre di dialogo.

Aggiornamento 6/11/2020: bootstrap 4.1.3 è ora aggiunto per impostazione predefinita con VS-2019.5 (grazie a Harald S. Hanssen per averlo notato).

Il metodo predefinito che VS aggiunge ai progetti usa Bower ma sembra che sia in via di uscita. Nell'intestazione della pergola di Microsoft pagina scrivono: Bower viene mantenuto solo. Consiglia di utilizzare LibManager

A seguito di un paio di collegamenti portano a Usa LibMan con ASP.NET Core in Visual Studio dove mostra come le librerie possono essere aggiunte utilizzando una finestra di dialogo incorporata:

In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella del progetto in cui devono essere aggiunti i file. Scegli Aggiungi> Libreria lato client. Viene visualizzata la finestra di dialogo Aggiungi libreria lato client: [fonte: Scott Addie 2018 ]

inserisci qui la descrizione dell'immagine

Quindi per bootstrap basta (1) selezionare unpkg, (2) digitare "bootstrap @ .." (3) Install. Dopo questo, ti consigliamo di verificare che tutti gli include in _Layout.cshtml o in altri posti siano corretti. Dovrebbero essere qualcosa come href = "~ / lib / bootstrap / dist / js / bootstrap ..." )


1
Ho VS 4.7.02558 (Community Edition) e questa è stata l'opzione più semplice per me. L'ho usato in progetti pratici creati per studiare per l'esame MS 70-486 (MVC), quindi non posso rispondere di quanto sia efficace per i progetti che sono destinati alla produzione.
Ed Gibbs

2
Per me, questo è stato anche il modo più semplice per installare il materiale con MS STANDARD TOOL. Con i suggerimenti nel tuo messaggio: cambia Provider in unpkg, digita bootstrap @ 4., Sono stato in grado di installare. Libman non è davvero intuitivo (nel mio caso, dovevo anche inserire il. (Punto) dopo 4, prima che i pacchetti venissero mostrati (pensavo, libman non funziona nel mio ambiente).
FredyWenger

2
Solo un promemoria: se stai cercando Bootstrap su CdnJS, tieni presente che il nome è twitter-bootstrap come era originariamente chiamato.
D.Rosado

1
In Visual Studio 2019 (l'ultima entro l'11 giugno 2020) - Il file libman viene creato, ma non vedo la finestra popup di libman.
Harald S. Hanssen,

1
Ho testato LibMan su diversi progetti ed è davvero la strada da percorrere. Peccato che la GUI non funzioni, ma dopo pochi tentativi è facile da usare.
Harald S. Hanssen,

18

Prova Libman , è semplice come Bower e puoi specificare wwwroot / lib / come cartella di download.


1
Non ancora nella versione di VS2017: AGGIORNAMENTO: 24 maggio 2018 - Sembra che LibMan non sia arrivato alla versione finale di 15.7. È nell'anteprima per 15.8.x
kristianp

1
Sembra che questo sia ora disponibile con la versione 15.8 finale.
Kirk Larkin

È ora disponibile in VS2017 V 15.8 e un approccio molto più semplice rispetto alla risposta accettata
Jemsworld

10

Qual è il trucco per me è:

1) Fare clic con il tasto destro su wwwroot> Aggiungi> Libreria lato client

2) Digitato "bootstrap" nella casella di ricerca

3) Seleziona "Scegli file specifici"

4) Scorri verso il basso e seleziona una cartella. Nel mio caso ho scelto "twitter-bootstrap"

5) Controlla "css" e "js"

6) Fare clic su "Installa".

Pochi secondi dopo li ho tutti nella cartella wwwroot. Fai lo stesso per tutti i pacchetti lato client che desideri aggiungere.


6

Libman sembra essere lo strumento preferito da Microsoft ora. È integrato in Visual Studio 2017 (15.8).

Questo articolo descrive come usarlo e anche come impostare un ripristino eseguito dal processo di compilazione.

La documentazione di Bootstrap ti dice di quali file hai bisogno nel tuo progetto.

Il seguente esempio dovrebbe funzionare come configurazione per libman.json.

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
  {
    "library": "twitter-bootstrap@4.2.1",
    "destination": "wwwroot/lib/bootstrap",
    "files": [
    "js/bootstrap.bundle.js",
    "css/bootstrap.min.css"
    ]
  },
  {
    "library": "jquery@3.3.1",
    "destination": "wwwroot/lib/jquery",
    "files": [
      "jquery.min.js"
    ]
  }
]

}


Grazie, stavo seguendo un libro Pro ASP.NET Core MVC 2 che mi diceva di usare Bower che ora è obsoleto. Ho cercato un bel po 'di tempo prima di rendermi conto che puoi semplicemente fare clic con il pulsante destro del mouse sul tuo progetto e selezionare Aggiungi -> Libreria lato client. E questo usa libman. È tutto integrato.
TxRegex

4

Usiamo bootstrap 4 in asp.net core ma facciamo riferimento alle librerie da "npm" usando l'estensione "Package Installer" e abbiamo trovato che questo è migliore di Nuget per le librerie Javascript / CSS.

Quindi usiamo l'estensione "Bundler & Minifier" per copiare i file rilevanti per la distribuzione (dalla cartella npm node_modules, che si trova all'esterno del progetto) in wwwroot come ci piace per lo sviluppo / distribuzione.


4

Sfortunatamente, avrai difficoltà a usare NuGet per installare Bootstrap (o la maggior parte degli altri framework JavaScript / CSS) su un progetto .NET Core. Se guardi l'installazione di NuGet ti dice che è incompatibile:

inserisci qui la descrizione dell'immagine

se devi sapere dove sono le dipendenze dei pacchetti locali, ora si trovano nella directory del tuo profilo locale. vale a dire%userprofile%\.nuget\packages\bootstrap\4.0.0\content\Scripts .

Tuttavia, suggerisco di passare a npm, o bower, come nella risposta di Saineshwar.


2

BS4 è ora disponibile su .NET Core 2.2 . Sul programma di installazione SDK 2.2.105 x64 di sicuro. Eseguo Visual Studio 2017 con esso. Fin qui tutto bene per i nuovi progetti di applicazioni web.


2

Perché non utilizzare semplicemente un CDN? A meno che non sia necessario modificare il codice di BS, è sufficiente fare riferimento ai codici in CDN.

Vedere BS 4 CDN qui:

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

Nella parte inferiore della pagina.


1
L'uso di una rete CDN aggiunge una dipendenza dal runtime. Quindi, se il CDN non funziona, lo stesso vale per il tuo sito. È un problema di sicurezza poiché chiunque controlli il cdn può modificare file popolari e inserire script nel tuo sito. È anche un problema di privacy poiché il browser dell'utente richiede i file da un server di terze parti anziché dal tuo.
TxRegex

3
@TxRegex ad un certo punto è stato effettivamente consigliato che i riferimenti fossero alla CDN piuttosto che al server di un'app web; perché è probabile che il browser di un utente abbia già memorizzato nella cache una libreria popolare come Bootstrap mentre esaminava altri siti. Ma qualunque cosa ...
non il

0

Usa il file di configurazione nmp (aggiungilo al tuo progetto web) quindi aggiungi i pacchetti necessari nello stesso modo in cui abbiamo fatto con bower.json e salva. Visual Studio lo scaricherà e lo installerà. Troverai il pacchetto sotto il nodo nmp del tuo progetto.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.