Come aggiungere bootstrap a un progetto angular-cli


234

Vogliamo usare bootstrap 4 (4.0.0-alpha.2) nella nostra app generata con angular-cli 1.0.0-beta.5 (con nodo v6.1.0).

Dopo aver ottenuto bootstrap e le sue dipendenze con npm, il nostro primo approccio consisteva nell'aggiungerle in angular-cli-build.js:

'bootstrap/dist/**/*.min.+(js|css)',  
'jquery/dist/jquery.min.+(js|map)',  
'tether/dist/**/*.min.+(js|css)',

e importali nel nostro index.html

<script src="vendor/jquery/dist/jquery.min.js"></script>
<script src="vendor/tether/dist/js/tether.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>

Questo ha funzionato bene ng servema non appena abbiamo prodotto un build con -prodflag tutte queste dipendenze sono scomparse dist/vendor(sorpresa!).

In che modo intendiamo gestire tale scenario (ovvero caricare gli script bootstrap) in un progetto generato con angular-cli?

Abbiamo avuto i seguenti pensieri ma non sappiamo davvero quale strada fare ...

  • usare un CDN? ma preferiremmo servire questi file per garantire che saranno disponibili

  • copiare le dipendenze dist/vendordopo il nostro ng build -prod? Ma sembra che qualcosa dovrebbe fornire angular-cli dal momento che "si prende cura" della parte di costruzione?

  • aggiungendo jquery, bootstrap e tether in src/system-config.tse in qualche modo inserirli nel nostro bundle main.ts? Ma sembrava sbagliato considerando che non li useremo esplicitamente nel codice della nostra applicazione (a differenza di moment.js o qualcosa come lodash, per esempio).


Li hai nel tuo file system-config.ts? devi mapparli.
mjwrazor,

1
Molte delle risposte seguenti raccomandano l'uso di ngx-bootstrap. Ho scoperto che non è un sostituto completo per i plugin jquery di Bootstrap e talvolta è ancora necessario utilizzare quei plugin jquery "nativi", come la funzionalità di compressione nelle tabelle. In tal caso, cerca una delle risposte seguenti che spieghi come importare esplicitamente lo script jquery dal file .angular-cli.json.
Christoph,


Basta usare ng-bootstrap ng-bootstrap.github.io/#/home
Liam

Risposte:


299

AGGIORNAMENTO IMPORTANTE: ng2-bootstrap è ora sostituito da ngx-bootstrap

ngx-bootstrap supporta sia Angular 3 che 4.

Aggiornamento: 1.0.0-beta.11-webpack o versioni successive

Prima di tutto controlla la tua versione angolare-cli con il seguente comando nel terminale:

ng -v

Se la versione di angular -cli è maggiore di 1.0.0-beta.11-webpack , è necessario seguire questi passaggi:

  1. Installa ngx-bootstrap e bootstrap :

    npm install ngx-bootstrap bootstrap --save

Questa linea installa Bootstrap 3 al giorno d'oggi, ma può installare Bootstrap 4 in futuro. Tieni presente che ngx-bootstrap supporta entrambe le versioni.

  1. Apri src / app / app.module.ts e aggiungi:

    import { AlertModule } from 'ngx-bootstrap';
    ...
    @NgModule({
    ...
    imports: [AlertModule.forRoot(), ... ],
    ... 
    })
    
  2. Aprire angular-cli.json (per angular6 e il nome del file successivo modificato in angular.json ) e inserire una nuova voce stylesnell'array:

    "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],
    
  3. Apri src / app / app.component.html e aggiungi:

    <alert type="success">hello</alert>

1.0.0-beta.10 o versioni precedenti:

E, se la tua versione angular -cli è 1.0.0-beta.10 o precedente, puoi usare i passaggi seguenti.

Innanzitutto, vai alla directory del progetto e digita:

npm install ngx-bootstrap --save

Quindi, apri angular-cli-build.js e aggiungi questa riga:

vendorNpmFiles: [
   ...
   'ngx-bootstrap/**/*.js',
   ...
]

Ora apri il tuo src / system-config.ts quindi scrivi:

const map:any = {
   ...
   'ngx-bootstrap': 'vendor/ngx-bootstrap',
   ...
}

...e:

const packages: any = {
  'ngx-bootstrap': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'ngx-bootstrap.js'
  }
};

6
Che cos'è esattamente ng2-bootstrap. cosa significa aggiungere bootstrap nativo ad angular 2? Scusa, sono confuso e ho cercato ma sono ancora confuso. perché non posso fare questi stessi passi per scaricare bootstrap invece di usare un ng2-bootstrap di terze parti.
mjwrazor,

1
@mjwrazor è perché bootstrap non riguarda solo gli stili. è un framework front-end. per essere chiari, controlla usando il componente rating con ng2-bootstrap e pensa ai codici che vorresti scrivere per implementarlo.
Ali Ghanavatian

5
Solo un piccolo avviso per i futuri lettori: la CLI angolare è passata da SystemJS a WebPack con beta.14. Questa risposta è ora obsoleta, poiché fornisce una soluzione basata su SystemJS.
jbandi,

2
Grazie per l'idea di usare ng2-bootstrap, qui ho trovato un manuale di installazione per angular cli, sulla pagina di github. github.com/valor-software/ng2-bootstrap/blob/development/docs/… Nel mio caso mancava la chiamata AlertModule.forRoot () sulle importazioni.
bruno.bologna,

1
Ho avuto lo stesso problema con angular-cli@1.1.3& ngx-bootstrap@1.7.1. Seguire questi passaggi con la differenza di app.module.tsnon fare riferimento a ngx-bootstrap da 'ngx-bootstrap / ngx-bootstrap' ma da 'ngx-bootstrap' come in questo esempio su github risolve il mio problema.
Edmond,

123

Cercare la parola chiave> Installazione della biblioteca globale su https://github.com/angular/angular-cli ti aiuta a trovare la risposta.

Come da loro documento, puoi aggiungere i seguenti passi per aggiungere la libreria Bootstrap.

Prima installa Bootstrap da npm:

npm install bootstrap@next

Quindi aggiungi i file di script necessari a apps [0] .scripts nel file angular-cli.json:

 "scripts": [
    "../node_modules/bootstrap/dist/js/bootstrap.js"
    ],

Infine aggiungi il Bootstrap CSS all'array apps [0] .styles:

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
    ],

Riavvia il servizio se lo stai eseguendo e Bootstrap 4 dovrebbe funzionare sulla tua app.

Questa è la soluzione migliore. Ma se non riavvii ng serve non funziona mai. Si consiglia vivamente di eseguire quest'ultima azione.


2
Mentre scrivo, questa è l'unica soluzione che sembra utilizzare l'ultima versione di angular-cli.
Freethebees,

1
Il bootstrap.js NON è sicuramente necessario! Poiché non si desidera utilizzare juqery bootstrap.js per questo, è necessario installare le direttive ng2 di bootstrap.
Pascal,

2
Se si desidera utilizzare il bootstrap javascript invece del solo .css, è necessario includere anche le sue dipendenze nella matrice di script: "../node_modules/jquery/dist/jquery.slim.js", "../ node_modules / tether / dist / js / tether.js "," ../node/modules/bootstrap/dist/js/bootstrap.js "
Howard Swope

2
È meglio utilizzare bootstrap.bundle.js nella dichiarazione degli script che ha anche popper.js.
Dejazmach,

1
Per rendere il lavoro non perdere l' ultimo punto eseguire di ng servenuovo. Inoltre, perché la CLI angolare non può aggiungerlo automaticamente? Sarebbe bello se ne avessimo un'opzione.
shaijut,

58

Eseguire le seguenti operazioni:

npm i bootstrap@next --save

Questo aggiungerà bootstrap 4 al tuo progetto.

Quindi vai al tuo src/style.scsso al src/style.cssfile (scegli quello che stai usando) e importa bootstrap lì:

Per style.css

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Per style.scss

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";

Per gli script dovrai comunque aggiungere il file nel file angular-cli.json in questo modo ( nella versione 6 di Angular, questa modifica deve essere eseguita nel file angular.json ) :

"scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/tether/dist/js/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
],

5
IMHO questa è anche un'ottima opzione, specialmente con le ultime versioni di angular-cli. Il grande vantaggio è che questo metodo non dipende dalle persone che aggiornano la libreria dal pacchetto npm menzionato nella risposta accettata; inoltre, ciò ci consente anche di sovrascrivere le variabili bootstrap usando SASS senza puntare direttamente ai file CSS compilati.
martin

2
Sì, è più pulito e modulare, quindi lo preferisco!
Mahatmanich,

Questo principio funziona per me, tutti i prerequisiti da seguire, sto usando l'ultima versione di angolare e bootstrap e ho aggiunto tutte le modifiche di cui sopra, non ha funzionato in questo modo ma ha lavorato sull'aggiunta di <link rel = "stylesheet" type = "text / css" href = "vendor / bootstrap / dist / css / bootstrap.min.css"> in index.html
har_shit

Questo sta usando l'impostazione cli!
Mahatmanich,

7
un metodo più pulito sarebbe @import '~ bootstrap / dist / css / bootstrap'; Usando il segno ~ per importare come un modulo direttamente dalla cartella node_modules. Hai trovato una spiegazione qui: stackoverflow.com/questions/39535760/…
AI

32

All'inizio, devi installare tether, jquery e bootstrap con questi comandi

npm i -S tether
npm i -S jquery
npm i -S bootstrap@4.0.0-alpha.4 

Dopo aggiungere queste righe nel file angular-cli.json (angular.json dalla versione 6 in poi)

  "styles": [
    "styles.scss",
    "../node_modules/bootstrap/scss/bootstrap-flex.scss"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]

2
intendevi $ projectRoot / .angular-cli.json?

21

Dal momento che nessuno ha fatto riferimento alla storia ufficiale (squadra angular-cli) su come includere Bootstrap: https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

Includi Bootstrap

Bootstrap è un popolare framework CSS che può essere utilizzato all'interno di un progetto angolare. Questa guida ti guiderà attraverso l'aggiunta di bootstrap al tuo progetto CLI angolare e la sua configurazione per l'utilizzo di bootstrap.

Utilizzando CSS

Iniziare

Crea un nuovo progetto e naviga nel progetto

ng new my-app
cd my-app

Installazione di Bootstrap

Con il nuovo progetto creato e pronto, dovrai successivamente installare bootstrap sul tuo progetto come dipendenza. Usando l' --saveopzione la dipendenza verrà salvata in package.json

# version 3.x
npm install bootstrap --save

# version 4.x
npm install bootstrap@next --save

Configurazione del progetto

Ora che il progetto è impostato, deve essere configurato per includere il CSS bootstrap.

  • Apri il file .angular-cli.jsondalla radice del tuo progetto.
  • Sotto la proprietà appsil primo elemento in quell'array è l'applicazione predefinita.
  • Esiste una proprietà stylesche consente di applicare stili globali esterni all'applicazione.
  • Specifica il percorso a bootstrap.min.css

Al termine, dovrebbe apparire come segue:

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],

Nota: quando si apportano modifiche, .angular-cli.jsonè necessario riavviare ng serveper raccogliere le modifiche alla configurazione.

Progetto di test

Apri app.component.htmle aggiungi il seguente markup:

<button class="btn btn-primary">Test Button</button>

Con l'applicazione configurata, esegui ng serveper eseguire l'applicazione in modalità di sviluppo. Nel tuo browser vai all'applicazione localhost:4200. Verifica che appaia il pulsante in stile bootstrap.

Usando SASS

Iniziare

Crea un nuovo progetto e naviga nel progetto

ng new my-app --style=scss
cd my-app

Installazione di Bootstrap

# version 3.x
npm install bootstrap-sass --save

# version 4.x
npm install bootstrap@next --save

Configurazione del progetto

Crea un file vuoto _variables.scssin src/.

Se si utilizza bootstrap-sass, aggiungere quanto segue a _variables.scss:

$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';

In styles.scssaggiungere quanto segue:

// version 3
@import 'variables';
@import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';

// version 4
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

Progetto di test

Apri app.component.htmle aggiungi il seguente markup:

<button class="btn btn-primary">Test Button</button>

Con l'applicazione configurata, esegui ng serveper eseguire l'applicazione in modalità di sviluppo. Nel tuo browser vai all'applicazione localhost:4200. Verifica che appaia il pulsante in stile bootstrap. Per assicurarsi che le variabili vengano utilizzate, apri _variables.scsse aggiungi quanto segue:

$brand-primary: red;

Ritorna il browser per vedere il colore del carattere cambiato.


4
Questa soluzione non aggiunge i file javascript per bootstrap, ma solo il css
Robin van der Knaap,

Guarda questa altra storia: github.com/angular/angular-cli/wiki/stories-global-lib . Descrive l'aggiunta di file di script, prendendo come esempio bootstrap 4.
Robin van der Knaap,

$brand-primary: red;Non ha funzionato per me. Tuttavia, $primary: red;fatto!
Johan Frick,

Grazie per aver spiegato la differenza tra bootstrap vs boostrap @ next :-)
Venkatesh Muniyandi

17

Aggiornamento v1.0.0-beta.26

Puoi vedere sul documento il nuovo modo di importare bootstrap qui

Se continua a non funzionare, riavviare con il comando ng serve

1.0.0 o versioni precedenti:

Nel tuo file index.html hai solo bisogno del collegamento css bootstrap (non sono necessari script js)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

E

npm install ng2-bootstrap --save
npm install moment --save

Dopo aver installato ng2-bootstrap in my_project / src / system-config.ts:

/** Map relative paths to URLs. */
const map: any = {
  'moment': 'vendor/moment/moment.js',
  'ng2-bootstrap': 'vendor/ng2-bootstrap'
};

/** User packages configuration. */
const packages: any = {
  'ng2-bootstrap': {
    defaultExtension: 'js'
  },
  'moment':{
     format: 'cjs'
  }
};

E in my_project / angular-cli-build.js:

module.exports = function (defaults) {
return new Angular2App(defaults, {
    vendorNpmFiles: [
        'ng2-bootstrap/**/*',
        'moment/moment.js'
    ]
});
};

Non dimenticare questo comando per mettere il tuo modulo nel fornitore:

ng build

per importare da un altro modulo che è lo stesso principio.


1
in che modo questo rende bootstrap in grado di usare jquery? L'ho fatto e questo non funziona.
mjwrazor,

esempio finalmente trovato questo e ha funzionato. Non sono riuscito a capirlo per un po '.
mjwrazor,

8

Immagino che i metodi sopra elencati siano cambiati dopo il rilascio, controlla questo link

https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md

avviare il progetto

npm i -g angular-cli
ng new my-app
cd my-app
ng serve
npm install --save @ng-bootstrap/ng-bootstrap

installa ng-bootstrap e bootstrap

npm install ng2-bootstrap bootstrap --save

apri src / app / app.module.ts e aggiungi

import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';
...

@NgModule({
   ...
   imports: [AlertModule, ... ],
    ... 
})

apri angular-cli.json e inserisci una nuova voce nella matrice degli stili

"styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],

apri src / app / app.component.html e testa tutti i lavori aggiungendo

<alert type="success">hello</alert>

1
Metodo da Ahmed Hamdy funziona, apparentemente l'aggiornamento del codice è avvenuto ora. Aggiornato il suo messaggio con soluzione.
PeterH,

1
se si desidera utilizzare Bootstrap 4, è necessario modificare "npm install ng2-bootstrap bootstrap --save" TO BE "npm install ng2-bootstrap bootstrap@4.0.0-alpha.6 --save" .... non del tutto ovvio nella documentazione (fai una ricerca per 'card-' in bootstrap.css per sapere se ha funzionato) ... nota che attualmente è Alpha 6 questo cambierà senza dubbio ... controlla il sito bootstrap per le attuali istruzioni npm
72GM

8

Passaggi per Bootstrap 4 in Angular 5

  1. Crea progetto Angular 5

    del nuovo AngularBootstrapTest

  2. Passa alla directory del progetto

    cd AngularBootstrapTest

  3. Scarica bootstrap

    npm installa bootstrap

  4. Aggiungi Bootstrap al progetto

    4.1 aprire .angular-cli.json

    4.2 trova la sezione "stili" nel json

    4.3 aggiungere il percorso cst bootstrap come di seguito

    .

    "styles": [
       "../node_modules/bootstrap/dist/css/bootstrap.min.css",
       "styles.css"
    ],

Ora hai aggiunto con successo il bootstrap css nel progetto angolare 5

Prova il bootstrap

  1. Aperto src/app/app.component.html
  2. aggiungi il componente pulsante bootstrap

.

<button type="button" class="btn btn-primary">Primary</button>

puoi fare riferimento agli stili dei pulsanti qui ( https://getbootstrap.com/docs/4.0/components/buttons/ )

  1. salva il file

  2. eseguire il progetto

    ng serve --open

Ora vedrai il pulsante stile bootstrap nella pagina

Nota: se hai aggiunto il percorso di bootstrap dopo ng serve , devi interrompere ed eseguire nuovamente il servizio ng per riflettere le modifiche


6

Dal momento che questo è diventato così confuso e le risposte qui sono totalmente contrastanti, suggerirò semplicemente di andare con l' u-team ufficiale per il repository BS4 (sì, ci sono così tanti di questi repository per NG-Bootstrap.

Segui le istruzioni qui https://github.com/ng-bootstrap/ng-bootstrap per ottenere BS4.

Citando dalla lib:

Questa libreria è stata creata da zero dal team di ui-bootstrap. Stiamo usando TypeScript e abbiamo come target il framework CSS Bootstrap 4.

Come con Bootstrap 4, questa libreria è in fase di elaborazione. Consulta il nostro elenco di problemi per vedere tutte le cose che stiamo implementando. Sentiti libero di commentare lì.

Basta copiare incollando ciò che è lì per il gusto di farlo:

npm install --save @ng-bootstrap/ng-bootstrap

Una volta installato è necessario importare il nostro modulo principale:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

L'unica parte rimanente è elencare il modulo importato nel modulo dell'applicazione. Il metodo esatto sarà leggermente diverso per il modulo radice (di livello superiore) per il quale dovresti finire con il codice simile a (notare NgbModule.forRoot ()):

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Altri moduli nella tua applicazione possono semplicemente importare NgbModule:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgbModule, ...], 
})
export class OtherModule {
}

Questo sembra di gran lunga il comportamento più coerente


6
  1. Installa bootstrap

    npm install bootstrap@next
  2. Aggiungi codice a .angular-cli.json:

    "styles": [
      "styles.css",
      "../node_modules/bootstrap/dist/css/bootstrap.css"
    ],
    "scripts": [
      "../node_modules/jquery/dist/jquery.js",
      "../node_modules/tether/dist/js/tether.js",
      "../node_modules/bootstrap/dist/js/bootstrap.js"
    ],
  3. Infine aggiungi bootstrap.css al tuo codice style.scss

    @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
  4. Riavvia il server locale


Mentre ngx-bootstrap è utile per i componenti che supporta, a volte è ancora necessario utilizzare plug-in jquery "nativi", come la funzionalità di compressione nelle tabelle. Quindi devi ancora importare esplicitamente lo script jquery, che mostra questa risposta.
Christoph,

Eseguito l'upgrade per il punto 4 (riavvia il server locale) Sto usando ---> npm install ngx-bootstrap bootstrap --save
Palanikumar

5

Procedi come segue:

  1. npm install --save bootstrap

  2. E nel tuo .angular-cli.json, aggiungi alla sezione stili:

"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css"]

Successivamente, è necessario riavviare il servizio ng

Godere


4
  1. Installa Bootstrap usando npm

    npm install bootstrap

2.Installare Popper.js

npm install --save popper.js

3.Andare angular.json nel progetto Angular 6 / .angular-cli.json in Angular 5 e aggiungere l'elenco:

 "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.css",
          "src/styles.css"
        ],

        "scripts": [
          "node_modules/popper.js/dist/umd/popper.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]



2
  1. Corri in bash npm install ng2-bootstrap bootstrap --save
  2. Aggiungi / Modifica quanto segue in angular-cli.json
    "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],

2

Aprire Terminale / prompt dei comandi nella rispettiva directory del progetto e digitare il comando seguente.

npm install --save bootstrap

Quindi aprire il file .angular-cli.json, cercare

"styles": [ "styles.css" ],

cambialo in

 "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
  ],

Tutto fatto.


2

Ora con la nuova versione ng-bootstrap 1.0.0-beta.5 supporta la maggior parte delle direttive angolari native basate sul markup e CSS di Bootstrap.

L'unica dipendenza richiesta per lavorare con questo è bootstrap. Non è necessario utilizzare le dipendenze jquery e popper.js .

ng-bootstrap sostituisce completamente l'implementazione JavaScript per i componenti. Quindi non è necessario includere bootstrap.min.jsnella sezione script il tuo .angular-cli.json.

seguire questi passaggi quando si sta integrando bootstrap con il progetto generato con l'ultima versione di angular-cli.

  • Inculde bootstrap.min.cssnel tuo .angular-cli.json, sezione stili.

    "styles": [
       "styles.scss",
       "../node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],
  • Installa la dipendenza ng-bootstrap .

    npm install --save @ng-bootstrap/ng-bootstrap
  • Aggiungi questo alla tua classe di modulo principale.

    import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
  • Includere quanto segue nella sezione di importazione del modulo principale.

    @NgModule({
       imports: [NgbModule.forRoot(), ...],
    })
  • Effettuare le seguenti operazioni anche nei moduli secondari se si utilizzano componenti ng-bootstrap all'interno di tali classi di moduli.

    import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
    
    @NgModule({
       imports: [NgbModule, ...],
    })
  • Ora il tuo progetto è pronto per l'uso dei componenti ng-bootstrap disponibili.


2
  1. Installa bootstrap, popper.js

npm install --save bootstrap npm install --save popper.js

  1. In src / styles.css , importa lo stile di bootstrap

@import '~bootstrap/dist/css/bootstrap.min.css';


2

Step1:
npm install bootstrap@latest --save-dev Questo installerà l'ultima versione del bootstrap, tuttavia, la versione specificata può essere installata aggiungendo il numero di versione

Passaggio 2: Apri styles.css e aggiungi quanto segue @import "~bootstrap/dist/css/bootstrap.css"


Principalmente la migliore risposta attuale tranne rimuovere --save-dev. Come vuoi che bootstrap sia distribuito con la tua app.
Sydwell,

2

Per aggiungere sia Bootstrap che Jquery

npm install bootstrap@3 jquery --save

dopo aver eseguito questo comando, vai avanti e controlla la cartella node_modules, dovresti essere in grado di vedere bootstrap e jquery aggiunti in esso.


Bene anche l'aggiunta di Jquery.
Surya R Praveen,

1

angular-cliora ha una pagina wiki dedicata dove puoi trovare tutto ciò di cui hai bisogno. TLDR, installa bootstraptramite npme aggiungi il link degli stili alla sezione "stili" nel tuo .angular-cli.jsonfile


1

Esempio di funzionamento in caso di utilizzo di angular-cli e css:

1.installare il bootstrap

npm installa bootstrap tether jquery --save

2.aggiungere a .angular-cli.json

  "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ],

1

installa boostrap usando npm

npm install boostrap@next --save

quindi controlla la cartella node_modules per il file boostrap.css (entro dist) normalmente il percorso è

"../node_modules/bootstrap/dist/css/bootstrap.css",

aggiungi questo percorso | importa boostrap in style.css o style.scss

@import "../node_modules/bootstrap/dist/css/bootstrap.css";  //bootstrap
@import "~@angular/material/prebuilt-themes/indigo-pink.css // angular material theme

questo è tutto.


Che ne dici di metterlo nella gamma di stili di angular-cli.json? Non è necessario?
CodyBugstein,

No Non è necessario. poiché includiamo il nostro file style.css in quell'array. possiamo importare altri file css nel nostro style.css o style.scss "@import" ~@angular/material/prebuilt-themes/indigo-pink.css ";" @import "../node_modules/bootstrap/dist/css /bootstrap.css ";
Chanaka Fernando,

Ah ok .. ma penso che includere in angular-cli.jsonè probabilmente migliore
CodyBugstein il

@CodyBugstein Non sono sicuro che sia necessariamente "meglio" aggiungerlo a .angular-cli.json. Ecco alcuni motivi per cui potresti voler aggiungere importazioni nel tuo file styles.scss: 1) Puoi facilmente applicare un tema bootstrap come l'esempio Bootswatch qui: github.com/thomaspark/bootswatch 2) Modificare i file .json è più complicato di la modifica dei file .scss perché i file .json non consentono commenti e 3) i nuovi sviluppatori potrebbero considerare styles.scss come punto di partenza per tutti i CSS anziché .angular-cli.json.
Keith

1

Esegui questo comando all'interno del progetto

npm install --save @bootsrap@4

e se ricevi una conferma come questa

+ bootstrap@4.1.3
updated 1 package in 8.245s

Significa che boostrap 4 è stato installato con successo. Tuttavia, per usarlo, è necessario aggiornare l'array "styles" nel file angular.json.

Aggiornalo nel modo seguente in modo che bootstrap sia in grado di sovrascrivere gli stili esistenti

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
           "src/styles.css"
          ],

Per assicurarti che tutto sia impostato correttamente, esegui ng serve > open browser at http://localhost:4200/ or a port you run the angular app > right click > inspect > under the head check the styles if you have bootsrap like shown below, quindi sei bravo a usare boostrap. inserisci qui la descrizione dell'immagine


1

Non ho visto questo qui:

@import 'bootstrap/scss/bootstrap.scss';

Ho appena aggiunto questa riga in style.scss Nel mio caso volevo anche sostituire le variabili bootstrap.


1

Se hai appena iniziato con angolare e bootstrap, la risposta semplice sarebbe la seguente: 1. Aggiungi il pacchetto del nodo bootstrap come dipendenza dev

npm install --save bootstrap
  1. importare stylessheet bootstrap nel file angular.json.

    "styles": [ "projects/my-app/src/styles.scss", "./node_modules/bootstrap/dist/css/bootstrap.min.css" ],

  2. e sei pronto per usare il bootstrap per lo styling, la griglia, ecc.

    <div class="container">My first bootstrap div</div>

La parte migliore di ciò che ho scoperto è che stiamo dirigendo usando bootstrap senza alcuna dipendenza del modulo di terze parti. Possiamo aggiornare bootstrap in qualsiasi momento semplicemente aggiornando il comando npm install --save bootstrap@4.4ecc.


1

Hai molti modi per aggiungere Bootstrap 4 nel tuo progetto Angular :

  • Includendo i file CSS e JavaScript Bootstrap nella sezione del file index.html del progetto Angular con un e tag,

  • Importazione del file CSS Bootstrap nel file styles.css globale del progetto Angular con una parola chiave @import.

  • Aggiunta dei file CSS e JavaScript Bootstrap negli array di stili e script del file angular.json del progetto


1

Esegui questo comando

npm install bootstrap@3

il tuo Angular.json

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],


0

Un esempio funzionante in caso di utilizzo di angular-cli:

npm i bootstrap-schematics
ng generate bootstrap-shell -c bootstrap-schematics -v 4
npm install

Funziona per CSS e SCSS. Bootstrap v3 e v4 sono disponibili.

Maggiori informazioni sugli schemi bootstrap sono disponibili qui .

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.