Come usare Bootstrap in un progetto angolare?

Risposte:

119

Se usi Angular-CLI per generare nuovi progetti, c'è un altro modo per rendere il bootstrap accessibile in Angular 2/4 .

  1. Tramite l'interfaccia della riga di comando passare alla cartella del progetto. Quindi utilizzare npm installare bootstrap:
    $ npm install --save bootstrap. L' --saveopzione farà apparire bootstrap nelle dipendenze.
  2. Modifica il file .angular-cli.json, che configura il tuo progetto. È all'interno della directory del progetto. Aggiungi un riferimento "styles"all'array. Il riferimento deve essere il percorso relativo al file bootstrap scaricato con npm. Nel mio caso è:"../node_modules/bootstrap/dist/css/bootstrap.min.css",

Il mio esempio .angular-cli.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "bootstrap-test"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

Ora bootstrap dovrebbe far parte delle impostazioni predefinite.

— LaPriWa
fonte
1
Penso che bootstrap.min.js dovrebbe essere aggiunto anche agli "script" in questa soluzione. Sei d'accordo?
— hamalaiv,
1
@hamalaiv Questo almeno non è obbligatorio.
— LaPriWa,
3
Ho installato bootstrap usando il passaggio 1 e quindi inserendo @import "../node_modules/bootstrap/dist/css/bootstrap.min.css"; nel mio file src / styles.css come descritto nel seguente post stackoverflow.com/a/40054193/3777549 . Il passaggio 2 in questo post non è stato necessario per me, sto usando @
— angular
77

Un'integrazione con Angular2 è disponibile anche attraverso il progetto ng2-bootstrap : https://github.com/valor-software/ng2-bootstrap .

Per installarlo basta inserire questi file nella tua pagina HTML principale:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

Quindi puoi usarlo nei tuoi componenti in questo modo:

import {Component} from 'angular2/core';
import {Alert} from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'my-app',
  directives: [Alert],
  template: `<alert type="info">ng2-bootstrap hello world!</alert>`
})
export class AppComponent {
}
— Thierry Templier
fonte
1
Se usi la versione ng2-bootstrap non dovresti usare il css in bundle? Non sono sicuro del motivo per cui dovresti usare il CDN CSS o è come dovrebbe essere fatto? Sono nuovo anche per questo.
— Stephen York,
6
New angular2 non ha direttive all'interno di @component
— Master Yoda,
38

Tutto quello che devi fare è includere il css boostrap nel tuo file index.html.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
— user2263572
fonte
1
C'è un modo per includerlo dalla risorsa locale invece che dalla CDN?
— SparK,
1
Sì, href dovrebbe essere impostato sul percorso del file locale. In caso di problemi, suggerirei di cercare "pubblicazione di file statici" da qualsiasi server Web in uso.
— user2263572
Non funziona su angular 6+, per file diversi da index.html. per esempio. app.component.html. per favore dillo.
— ganeshdeshmukh,
16

Se prevedi di utilizzare Bootstrap 4, necessario con il ng-bootstrap del team angular-ui menzionato in questo thread, ti consigliamo di utilizzare questo (NOTA: non è necessario includere il file JS):

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

Puoi anche fare riferimento a questo localmente dopo l'esecuzione npm install bootstrap@4.0.0-alpha.6 --saveindicando il file nel tuo styles.scssfile, supponendo che stai usando SASS:

@import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
— occasl
fonte
1
Puoi spiegare perché non è necessario includere il file JS. Lo fa perché NPM lo installa? Inoltre, nell'esempio di Thierry Templier, importa ng2-bootstrap / ng2-bootstrap per usare un avviso. L'utilizzo è lo stesso lì per bootstrap 4?
— BBaysinger,
Grazie. Ho provato il tuo secondo esempio. Ho ricevuto un errore che la risorsa non è stata caricata da node_modules.
— BBaysinger,
1
Vedi la risposta aggiornata. Se stai usando SASS puoi semplicemente fare quello che ho fatto e @importfarlo nel tuo file SASS. In caso contrario, puoi provare ad aggiungerlo al tuo vendor.tsfile, ma non lo sto usando nel mio codice.
— occasionale
10

L'opzione più popolare è quella di utilizzare alcune librerie di terze parti distribuite come pacchetto npm come il progetto ng2-bootstrap https://github.com/valor-software/ng2-bootstrap o la libreria Angst Bootstrap dell'interfaccia utente.

Personalmente uso ng2-bootstrap. Esistono molti modi per configurarlo, poiché la configurazione dipende da come viene costruito il progetto angolare. Di seguito inserisco la configurazione di esempio basata sul progetto QuickStart di Angular 2 https://github.com/angular/quickstart

Innanzitutto aggiungiamo dipendenze nel nostro package.json

    { ...
"dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",

    ...

    "bootstrap": "^3.3.7",
    "ng2-bootstrap": "1.1.16-11"
  },
... }

Quindi dobbiamo mappare i nomi agli URL corretti in systemjs.config.js

(function (global) {
  System.config({
    ...
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      //bootstrap
      'moment': 'npm:moment/bundles/moment.umd.js',
      'ng2-bootstrap': 'npm:ng2-bootstrap/bundles/ng2-bootstrap.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
...
  });
})(this);

Dobbiamo importare il file .css bootstrap in index.html. Possiamo ottenerlo dalla directory / node_modules / bootstrap sul nostro disco rigido (perché abbiamo aggiunto la dipendenza bootstrap 3.3.7) o dal web. Ci stiamo ottenendo dal web:

<!DOCTYPE html>
<html>
  <head>
    ...
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    ...
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

Dovremmo modificare il nostro file app.module.ts dalla directory / app

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

//bootstrap alert import part 1
import {AlertModule} from 'ng2-bootstrap';

import { AppComponent }  from './app.component';


@NgModule({
  //bootstrap alert import part 2
  imports:      [ BrowserModule, AlertModule.forRoot() ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

E infine il nostro file app.component.ts dalla directory / app

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <alert type="success">
        Well done!
    </alert>
    `
})

export class AppComponent {

    constructor() { }

}

Quindi dobbiamo installare le nostre dipendenze bootstrap e ng2-bootstrap prima di eseguire la nostra app. Dovremmo andare alla nostra directory di progetto e digitare

npm install

Finalmente possiamo avviare la nostra app

npm start

Esistono molti esempi di codice su github del progetto ng2-bootstrap che mostrano come importare ng2-bootstrap in varie build del progetto Angular 2. C'è persino un esempio di plnkr. C'è anche la documentazione API sul sito Web del software Valor (autori della biblioteca).

— luke
fonte
9

In un ambiente angular-cli, il modo più semplice che ho trovato è il seguente:


1. Soluzione in un ambiente con fogli di stile s̲c̲s̲s̲

npm install bootstrap-sass —save

In style.scss:

$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/bootstrap';

Nota1: il ~carattere è un riferimento alla cartella nodes_modules .
Nota2: Poiché stiamo usando scss, possiamo personalizzare tutte le variabili boostrap che desideriamo.


2. Soluzione in un ambiente con fogli di stile c̲s̲s̲

npm install bootstrap —save

In style.css:

@import '~bootstrap/dist/css/bootstrap.css';
— Michael P. Bazos
fonte
6

Esistono diversi modi per configurare angular2 con Bootstrap, uno dei modi più completi per sfruttarlo al meglio è usare ng-bootstrap, usando questa configurazione diamo ad algular2 il controllo completo sul nostro DOM, evitando la necessità di usare JQuery e Boostrap .js.

1-Prendi come punto di partenza un nuovo progetto creato con Angular-CLI e usando la riga di comando, installa ng-bootstrap:

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

Nota: maggiori informazioni su https://ng-bootstrap.github.io/#/getting-started

2-Quindi dobbiamo installare bootstrap per il sistema css e grid.

npm install bootstrap@4.0.0-beta.2 --save

Nota: maggiori informazioni su https://getbootstrap.com/docs/4.0/getting-started/download/

Ora abbiamo installato l'ambiente e per questo dobbiamo cambiare .angular-cli.json aggiungendo allo stile:

"../node_modules/bootstrap/dist/css/bootstrap.min.css"

Ecco un esempio:

"apps": [
    {
      "root": "src",
        ...
      ],
      "index": "index.html",
       ...
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ]

Il prossimo passo è aggiungere il modulo ng-boostrap al nostro progetto, per farlo dobbiamo aggiungere su app.module.ts:

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

Quindi aggiungi il nuovo modulo all'app dell'applicazione: NgbModule.forRoot ()

Esempio:

@NgModule({
  declarations: [
    AppComponent,
    AppNavbarComponent
  ],
  imports: [
    BrowserModule,
    NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Ora possiamo iniziare a utilizzare bootstrap4 sul nostro progetto angular2 / 5.

— UHDante
fonte
3

Ho avuto la stessa domanda e ho trovato questo articolo con una soluzione davvero pulita:

http://leon.radley.se/2017/01/angular-cli-and-bootstrap-4/

Ecco le istruzioni, ma con la mia soluzione semplificata:

Installa Bootstrap 4 ( istruzioni ):

npm install --save bootstrap@4.0.0-alpha.6

Se necessario, rinomina src / styles.css in styles.scss e aggiorna .angular-cli.json per riflettere la modifica:

"styles": [
  "styles.scss"
],

Quindi aggiungere questa riga a styles.scss :

@import '~bootstrap/scss/bootstrap';
— jared_flack
fonte
3

basta controllare il file package.json e aggiungere dipendenze per bootstrap

"dependencies": {

   "bootstrap": "^3.3.7",
}

quindi aggiungi sotto il codice sul .angular-cli.jsonfile

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

Finalmente aggiorni il tuo npm localmente usando il terminale 

$ npm update
— Tanjeeb Ahsan
fonte
2
  1. npm install - salva bootstrap

  2. vai a -> file angular-cli.json , trova le proprietà degli stili e aggiungi la prossima puntata: "../node_modules/bootstrap/dist/css/bootstrap.min.css", Potrebbe essere simile al seguente:

    "styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
— 31113
fonte
2

Procedura con Angular 6+ e Bootstrap 4+:

  1. Apri una shell nella cartella del tuo progetto
  2. Installa bootstrap con il comando: npm install --save bootstrap@4.1.3
  3. Bootstrap necessita del jquery di dipendenza, quindi se non lo hai, puoi installarlo con il comando: npm install --save jquery 1.9.1
  4. Potrebbe essere necessario correggere la vulnerabilità con il comando: npm audit fix
  5. Nel tuo file style.scss principale, aggiungi la seguente riga: @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

O

Aggiungi questa riga al tuo file index.html principale: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

— veben
fonte
1

La mia raccomandazione sarebbe invece di dichiararlo nello stilo json per inserirlo negli scss in modo che tutto sia compilato e in un unico posto.

1) installa bootstrap con npm

 npm install bootstrap

2) Dichiara bootstrap npm nel CSS con i nostri stili

Creare _bootstrap-custom.scss:

  // Required
  @import "bootstrap-custom-required";


  // Optional
  @import "~bootstrap/scss/root";
  @import "~bootstrap/scss/grid";
  @import "~bootstrap/scss/tables";

    ...
    ..
    .

3) All'interno di styles.scss inseriamo

@import "bootstrap-custom";

così avremo tutti i nostri core compilati e in un unico posto

— JMF
fonte
0

aggiungi le seguenti righe nella tua pagina html

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>

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

Se usi angular cli, dopo aver aggiunto bootstrap in package.json e installato il pacchetto, tutto ciò di cui hai bisogno è aggiungere boostrap.min.css nella sezione "stili" di .angular-cli.json.

Una cosa importante è "Quando si apportano modifiche a .angular-cli.json è necessario riavviare il servizio per raccogliere le modifiche alla configurazione".

Rif:

https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

— ninetiger
fonte
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.