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.


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 {
}

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">

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

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).


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

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.


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

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

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"
    ],

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">



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



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">

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


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.