Angulaire 4: Comment inclure de Bootstrap?
Je suis un développeur backend et je suis en train de jouer avec Angular4. J'ai donc fait ce tutoriel d'installation: https://www.youtube.com/watch?v=cdlbFEsAGXo.
Compte tenu de cela, comment puis-je ajouter de bootstrap pour l'application de sorte que je pouvais utiliser la classe "container-fluid" ou "col-md-6" et des trucs comme ça?
Vous devez vous connecter pour publier un commentaire.
par la suite, à l'intérieur angulaires-cli.json (à l'intérieur du dossier racine du projet), trouver
styles
et ajouter le bootstrap fichier css comme ceci:Mise à JOUR:
dans angulaire 6+
angular-cli.json
a été changé àangular.json
.../node_modules [...]
? Pour moi il doit être juste/node_modules [...]
../src
relative à l'application de la racine. Si votre configuration est différente, vous pouvez ajuster le chemin accrodingly.../node_modules/bootstrap/dist/css/bootstrap.css
(c'est à dire sans la.min
).Regarder la Vidéo ou Suivez les étape
Installer bootstrap 4 angulaire 2 /angulaire 4 /angulaire 5 /6 angulaire
Il y a trois façon d'inclure bootstrap dans votre projet
1) Ajouter CDN Lien dans index.html fichier
2) Installez le programme d'installation en utilisant mnp et de définir le chemin d'accès dans angulaire.json Recommandé
3) Installer bootstrap à l'aide de mnp et de définir le chemin d'accès dans index.html fichier
J'ai recommandé 2 méthodes suivantes qui sont installés à l'aide de bootstrap mnp parce que sa installé dans votre répertoire de projet et vous pouvez facilement y accéder
Méthode 1
Ajouter Bootstrap, Jquery et popper.js CA chemin pour vous angulaire du projet index.html fichier
Bootstrap.css
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
Bootstrap.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
Jquery.js
https://code.jquery.com/jquery-3.2.1.slim.min.js
Popper.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js
Méthode 2
1) Installer le programme d'installation en utilisant mnp
après l'installation de Bootstrap 4, nous avons Besoin de deux Plus javascript Package Jquery et Popper.js sans ces deux paquets de bootstrap n'est pas complète parce que le Bootstrap 4 est à l'aide de Jquery et popper.js package nous avons donc à installer aussi bien
2) Installer JQUERY
3) Installer Popper.js
Maintenant Bootstrap est Installer sur votre Projet de Répertoire à l'intérieur de node_modules Dossier
ouvrir angulaire.json ce fichier sont disponibles sur vous angulaire du répertoire ouvrez ce fichier et ajoutez le chemin d'accès de bootstrap, jquery et popper.js les fichiers à l'intérieur styles[] et scripts[] chemin voir l'exemple ci-dessous
Remarque: Ne change pas une séquence de fichier js il devrait en être ainsi
Méthode 3
Installer bootstrap à l'aide de mnp suivre Méthode 2 dans la méthode 3 nous venons de définir le chemin d'accès à l'intérieur de index.html fichier au lieu de angulaire.json fichier
bootstrap.css
Jquery.js
Bootstrap.js
Popper.js
Maintenant Bootstrap fonctionne bien Maintenant
Remarque: --enregistrer la commande enregistrer la dépendance angulaire de notre application à l'intérieur de paquet.fichier json.
option 1) l'Ajout dans le fichier src/styles.css
Option 2) l'Ajout dans angulaires-cli.json ou angulaire.json
Angulaire 4 - Bootstrap /@ng-configuration d'amorçage
D'abord installer bootstrap dans votre projet à l'aide de commande ci-dessous:
npm install --save bootstrap
Puis ajoutez cette ligne
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
pour angulaires-cli.fichier json (dossier racine) dans des styles
Après l'installation des dépendances citées ci-dessus, installez ng-bootstrap via:
npm install --save @ng-bootstrap/ng-bootstrap
Une fois installé, vous devez l'importer module principal.
Après cela, vous pouvez utiliser Tous les Bootstrap widgets (ex. carrousel, modal, popovers, les info-bulles, onglets, etc.) et plusieurs autres goodies ( datepicker, notation, timepicker, typeahead).
Dans Angular4 comme vous traitez avec @types système, vous devez faire les choses suivantes,
Faire,
tsconfig.json
recherchez types tableau et ajouter jquery et bootstrap entrées,
Index.html
dans la section d'en-tête ajouter les entrées suivantes,
Et commencer à utiliser jquery et bootstrap à la fois.
.angular-cli.json
fichier, qui raconte Angulaire de faisceau avec le reste et les servir aux clients.veuillez consulter ce lien
https://github.com/angular/angular-cli/wiki/stories-include-bootstrap.
il fournir des instructions étape par étape sur la façon d'inclure les dernières bootstrap pour votre angulaire 4 à l'aide angulaires-cli.
Que celui-ci devient de plus en plus de réponses, je vais marquer le premier qui m'a aidé:
Comment ajouter des fichiers d'amorce à une angulaires-cli projet
Si vous utilisez Sass/Scss, puis suivez ce,
Ne npm install
et ajouter
import
déclaration à votre sass/scss fichier,Ci-dessous le détail des étapes et de travail exemple, vous pouvez visiter
https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/
Très détails les étapes avec les explications appropriées.
Suit:
L'installation de Bootstrap à partir de MNP
Prochain, nous avons besoin d'installer Bootstrap. Modifiez le répertoire du projet, nous avons créé (cd angulaires-bootstrap-exemple) et exécutez la commande suivante:
Pour Bootstrap 3:
Pour Bootstrap 4 (actuellement en bêta):
OU
Alternative: Local Bootstrap CSS
Comme alternative, vous pouvez également télécharger le Bootstrap CSS et ajouter localement à votre projet. J'ai téléchargé Bootstrap à partir du site web et créé un dossier styles (même niveau que les styles.css):
Remarque:
Ne placez pas votre local les fichiers CSS à l'actif de dossier. Quand nous faisons de la production de construire Angulaire de la CLI, les fichiers CSS, a déclaré dans le .angulaire de la cli.json sera minimisé et tous les styles seront regroupés dans un seul style.css. Les actifs dossier est copié dans le dossier dist au cours du processus de construction (le code CSS sera dupliqué). Seul endroit de votre région fichiers CSS à l'actif dans le cas où vous êtes de les importer directement dans la index.html.
De l'importation de la CSS
1.Nous avons deux options pour importer le CSS de Bootstrap qui a été installé à partir de MNP:
texte fort1: Configurer .angulaire de la cli.json:
2: Importer directement dans src/style.css ou src/style.scss:
Personnellement, je préfère importer tous mes styles dans src/style.css depuis qu'elle a été déclarée .angulaire de la cli.json déjà.
3.1 Alternative: Local Bootstrap CSS
Si vous avez ajouté le fichier CSS de Bootstrap localement, il suffit d'importer dans .angulaire de la cli.json
ou
src/style.css
4: Bootstrap Composants JavaScript avec la ngx-bootstrap (Option 1)
Dans le cas où vous n'avez pas besoin d'utiliser Bootstrap composants JavaScript (qui nécessitent JQuery), c'est l'ensemble de l'installation dont vous avez besoin. Mais si vous avez besoin d'utiliser les auxiliaires modaux, de l'accordéon, datepicker, les info-bulles ou de toute autre composante, comment pouvons-nous utiliser ces éléments sans l'installation de jQuery?
Il y a un Angulaire de la bibliothèque d'encapsulation pour Bootstrap appelé ngx-bootstrap que nous pouvons également installer à partir de MNP:
Noteng2-bootstrap et ngx-bootstrap sont du même package. ng2-bootstrap a été renommé à la ngx-bootstrap après #itsJustAngular.
Dans le cas où vous souhaitez installer Bootstrap et ngx-bootstrap dans le même temps, lorsque vous créez votre Angulaire de la CLI de projet:
4.1: Ajouter les fichiers d'amorce des modules de l'application.le module.ts
Passer par la ngx-bootstrap et ajouter les modules nécessaires à votre application.le module.ts. Par exemple, supposons que nous voulons utiliser la liste Déroulante, l'info-bulle et Modal composants:
Parce que nous appelons l' .forRoot() méthode pour chaque module (en raison de la ngx-bootstrap fournisseurs de modules), les fonctionnalités seront disponibles dans tous les composants et les modules de votre projet (portée mondiale).
Comme une alternative, si vous souhaitez organiser la ngx-bootstrap dans un autre module (seulement pour l'organisation fins dans le cas où vous avez besoin d'importer de nombreux bs modules et ne souhaitez pas encombrer votre application.module de), vous pouvez créer un module app-bootstrap.le module.ts, importer le fichier de Bootstrap modules (à l'aide de forRoot()) et aussi de les déclarer dans la section exports (de sorte qu'ils deviennent disponibles pour d'autres modules).
Enfin, n'oubliez pas d'importer votre fichier d'initialisation du module dans votre application.le module.ts.
importer { AppBootstrapModule } de". /app-bootstrap/app-bootstrap.module';
ngx-bootstrap fonctionne avec Bootstrap 3 et 4. Et j'ai aussi fait quelques tests, et la plupart des fonctionnalités aussi travailler avec Bootstrap 2.x (oui, j'ai encore un peu de l'héritage de code à maintenir).
Espère que cela aide quelqu'un!
Pour bootstrap 4.0.0-alph.6
Puis après ceci est fait exécuter:
Maintenant. Ouvrir .angulaire de la cli.json fichier et importer bootstrap, jquery, et attache:
Et maintenant. - Vous prêt à aller.
Testé Angulaire 7.0.0
Étape 1 - Installer les dépendances nécessaires
Versions que j'ai essayé:
Étape 2 : indiquer les bibliothèques ci-dessous orderin angulaire.json. Dans les dernières angulaire , le nom de fichier de config est angulaire.json pas angulaire de la cli.json
Exécutez la commande suivante dans votre projet que j'ai.e
npm install [email protected] -enregistrer
Après l'installation de la ci-dessus dépendance exécuter le mnp de commande qui va installer les fichiers d'amorce module npm install --save @ng-bootstrap/ng-bootstrap
Check this out pour la référence - https://github.com/ng-bootstrap/ng-bootstrap
Ajouter les éléments suivants à l'importation dans l'app.module d'importation {NgbModule} à partir de '@ng-bootstrap/ng-bootstrap"; et d'ajouter NgbModule pour les importations
Dans votre étable.css
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
Étape 1 :
ngp installer bootstrap --enregistrer
Étape : 2 :
Collez code ci-dessous dans angulaire.json
node_modules/bootstrap/dist/css/bootstrap.min.css
Étape 3 :
ng servir
ajouter dans angulaires-cli.json
Il aura du travail, je l'ai vérifié.
Si vous souhaitez utiliser bootstrap en ligne et que votre application a accès à internet, vous pouvez ajouter
En vous r'style principal.fichier css. et c'est la façon la plus simple.
Référence : angulaire.io
Note. Cette solution charges de bootstrap à partir de unpkg site web et ont besoin d'avoir accès à internet.
Angulaire 6 de la CLI, il suffit de faire:
ng ajouter @ng-bootstrap/schémas
Pour installer la dernière utilisation $ npm i --enregistrer bootstrap@next
d'abord installer bootstrap dans votre projet à l'aide de la ngp
npm i bootstrap
après cela, ouvrez ur de style.fichier css dans votre projet et ajoutez cette ligne
@import "~bootstrap/dist/css/bootstrap.css";
et bootstrap ajouté dans votre projet
|*| L'installation de Bootstrap 4 Angulaire 2, 4, 5, 6 + :
|+> Installer Bootstrap avec npm
|+> Ajouter des styles et des scripts angulaire.json
Comme je vous vois déjà eu beaucoup de réponse, mais vous pouvez essayer cette méthode pour .
De son mieux de ne pas utiliser jquery dans angulaire, je préfère https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/ng-cli.md méthode pour installer bootstrap sans l'aide de bootstrap js composante qui dépend de jquery.
Garder votre code jquery gratuit angulaire
vous travaillez avec des cdn pour bootstrap et jquery ou installer bootstarp directement dans l'app
avec:
également utiliser https://ng-bootstrap.github.io/#/home, mais ce n'est pas approperiate
https://medium.com/codingthesmartway-com-blog/using-bootstrap-with-angular-c83c3cee3f4a