Comment utiliser bootstrap 4 angulaire 2?

Question

Je suis en train de construire angulaire à 2 application écrite en caractères d'imprimerie. Elle serait d'utiliser le bootstrap 4 cadre en combinaison avec certains personnalisée thématisation, est-ce possible?

Le "ng2-bootstrap" npm paquet ne fonctionne pas comme il ne m'autorise pas à utiliser les classes css de bootstrap, au contraire, il fournit des composants personnalisés. (http://github.com/valor-software/ng2-bootstrap)

Dans mon angulaire 2 projet que je suis en utilisant sass, serait-il possible de construire bootstrap 4 à partir de la source, comme il est également l'utilisation de sass pour le style?

Answer 1

Bootstrap4 alpha pour Angular2 CLI (fonctionne aussi pour Angular4 CLI)

Si vous utilisez le angular2 cli/angulaire 4 cli effectuer les opérations suivantes:

npm i bootstrap@next --save

Cela va ajouter bootstrap 4 à votre projet.

Ensuite, allez à votre src/style.scss ou src/style.css le fichier et importer des fichiers d'amorce:

Pour le 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";

Pour le style.scss

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

Si vous utilisez scss, assurez-vous que vous changez votre style de scss en .angular-cli.json:

  "defaults": {
    "styleExt": "scss",
    "component": {}
  }

Bootstrap JS Composants

Pour Bootstrap JS composants, vous aurez toujours besoin d'importer bootstrap.js en .angular-cli.json sous scripts (ce qui devrait se faire automatiquement):

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

Mise à jour 2017/09/13: Bootstrap 4 Beta est maintenant à l'aide de popper.js au lieu de tether.js. Donc, en fonction de la version que vous utilisez importer tether.js (alpha) ou popper.js (bêta) dans vos scripts. Merci pour le heads up @MinorThreat

Answer 2

Les options ci-dessus ne fonctionne, cependant je utiliser cette approche via NPM:

1. Accédez à: Bootstrap 4 et récupérer la commande npm

2. Exécutez la commande NPM obtenu à partir de l'étape 1 dans votre projet que j'ai.e

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

3. Après l'installation de la ci-dessus dépendance exécuter le mnp de commande qui permettra d'installer le module de bootstrap npm install --save @ng-bootstrap/ng-bootstrap Vous pouvez lire plus à ce sujet ici

4. Ajoutez ce qui suit à l'importation dans l'app.module import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; et ajouter NgbModule de la imports

5. Votre application module ressemblera à ceci:

   import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
   
   @NgModule({
      declarations: [
      AppComponent,
      WeatherComponent
   ],
     imports: [
     BrowserModule,
     FormsModule,
     HttpModule,
     NgbModule.forRoot(), // Add Bootstrap module here.
   ],
     providers: [],
     bootstrap: [AppComponent]
   })
   
   export class AppModule { }
   

6. Ouvrir angulaires-cli.json et insérer une nouvelle entrée dans les styles de tableau :

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

7. Ouvert src/app/app.component.html et d'ajouter

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

   ou si vous souhaitez utiliser ng alerte puis placer celui-ci sur votre app.component.html page

   <ngb-alert [dismissible]="true">I'm a dismissible alert :) </ngb-alert>
   

8. Maintenant exécuter votre projet et vous devriez voir le bootstrap message d'alerte s'affiche dans le navigateur.

REMARQUE: Vous pouvez en lire plus à propos de ng Composants ici

Answer 3

Pour l'utilisation de toute bibliothèque visuelle qui a besoin de JQuery juste faire ce qui suit:

• Ajouter la bibliothèque css dans l'index;
• Ajouter le jquery, js fichiers d'index;
• Ajouter la bibliothèque js fichiers de l'index;
• Installer la bibliothèque des fichiers de définition d.ts);
• Installer jquery définitions de fichiers (d.ts);

Si la bibliothèque ne possède pas de définition de fichiers, vous pouvez:

• Créer la définition de vous-même;
• Créer un mondial de la variable avec le même nom que l'objet de la bibliothèque, juste pour ne pas faire d'erreurs du compilateur;
• L'utilisation avec des erreurs (c'est la pire option);

Maintenant, vous pouvez utiliser la bibliothèque à l'intérieur de la Machine;

Answer 4

Je vous suggère:

• Simplement en incluant un lien vers le fichier d'amorce du fichier CSS dans votre index.html page
• À l'aide de ng-bootstrap - d'un ensemble dédié Angulaire 2 directives pour les pièces où le comportement dynamique est nécessaire. De cette façon, vous n'avez pas besoin d'importer / d'installation de jQuery ni se soucient de Bootstrap, JavaScript.

Answer 5

Vous pouvez utiliser npm pour l'installation de la dernière version bootstrap. Cela peut être fait en utilisant la commande:

npm install bootstrap@4.0.0-beta

Et après cela, vous pourriez avoir à importer de bootstrap.css dans le principal de votre fichier css. Qui seront les styles.css, si vous utilisez angulaires-cli.

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

Si vous voulez en savoir plus, veuillez utiliser le lien: http://technobytz.com/install-bootstrap-4-using-npm.html