Bootstrap angulaire – Définition et style dans le bootstrap angulaire

Question

Le bootstrap angulaire est un composant fonctionnel du module noyau(code ng) qui est utilisé pour exécuter manuellement votre application Angular, vous donnant plus de contrôle sur la façon dont vous initialisez votre application.

La syntaxe de angular.bootstrap est la suivante:

angular.bootstrap(élément, [modules], [config]);

Utilisation de Bootstrap dans Angular

Bootstrap est le framework le plus populaire pour HTML, CSS, et développement JavaScript.

C'est idéal pour développer des sites Web réactifs pour les appareils mobiles. Le site Web Bootstrap est disponible à l'adresse http://getbootstrap.com/.

Le framework Bootstrap peut être utilisé en conjonction avec des frameworks web et mobiles JavaScript modernes tels que Angular.

Suivant, vous apprendrez à utiliser les frameworks Bootstrap dans votre projet Angular.

en outre, nous allons examiner le projet Ng-Bootstrap, qui fournit des composants Angular Bootstrap qui peuvent être utilisés hors de la boîte.

Configuration d'un projet angulaire avec une CLI angulaire

Premier, commençons par créer un nouveau “Angulaire” projet. Le moyen le plus simple de le faire est d'utiliser l'interface de ligne de commande (CLI) pour générer un nouveau projet.

Le projet Angular CLI peut être trouvé sur https://cli.angular.io/. Premier, vous devez vous assurer que la CLI angulaire est installée sur votre système.

Étant donné que la CLI angulaire est un package NPM, vous pouvez l'installer à l'aide de la commande suivante:

$ npm install -g @angular/cli

Après l'avoir installé avec succès, vous pouvez maintenant utiliser Angular CLI pour lancer un nouveau projet de la manière suivante:

$ ng new myproject

Vous pouvez maintenant accéder à ce répertoire et démarrer le serveur Web:

$ cd myproject
$ ng serve

Vous verrez le résultat suivant dans le navigateur:

Installez Bootstrap

Maintenant que le projet Angular est prêt et en cours d'exécution, nous pouvons continuer et ajouter Bootstrap au projet. Il existe différentes manières d'ajouter la bibliothèque à votre projet. Jetons un coup d'œil aux différentes options:

Ajouter Bootstrap à partir du CDN

L'inclusion de Bootstrap dans votre projet, nous devons ajouter deux fichiers:

  • Fichier CCS Bootstrap
  • Fichier JavaScript Bootstrap

Les parties JavaScript de Bootstrap dépendent de jQuery. Nous avons donc également besoin du fichier de bibliothèque JavaScript jQuery.

Tous ces fichiers peuvent être directement ajoutés à partir d'un CDN (Réseau de diffusion de contenu) à votre projet. Les liens CDN pour Bootstrap se trouvent à l'adresse http://getbootstrap.com/getting-started/ et le lien vers jQuery peut être trouvé à https://code.jquery.com/.

Fichier ouvert src / index.html et insérez

  • la <lien> élément à la fin de la section head pour inclure le fichier CSS Bootstrap
  • une <scénario> élément pour inclure jQuery en bas de la section body
  • une <scénario> élément pour inclure le fichier JavaScript Bootstrap au bas de la section du corps

Maintenant, c'est à votre tour index.html le fichier doit ressembler à ce qui suit:

<!doctype html>
<html>
<diriger>
  <meta charset ="utf-8">
  <Titre>Démo Angular Bootstrap</Titre>
  <base href ="/">  <nom méta ="fenêtre" contenu ="width = largeur de l'appareil, échelle initiale = 1">
  <lien rel ="icône" type ="image / icône x" href ="favicon.ico">
  <lien rel ="feuille de style" href ="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" intégrité ="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / K68vbdEjh4u" crossorigin ="anonyme">
</diriger>
<corps>
  <racine de l'application>Chargement...</racine de l'application>
  <script src ="https://code.jquery.com/jquery-3.1.1.min.js" intégrité ="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8 =" crossorigin ="anonyme"></scénario>
  <script src ="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" intégrité ="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin ="anonyme"></scénario>
</corps>
</html>

Nous sommes maintenant prêts à utiliser Bootstrap dans l'un de nos modèles de composants. Essayons-le en ouvrant le fichier src / app / app.component.html et insérez le code de modèle HTML suivant:

<classe div ="récipient">
  <classe div ="jumbotron">
    <h1>Bienvenue</h1>
    <h2>Angulaire & Démo Bootstrap</h2>
  </div>  <classe div ="panneau panneau primaire">
    <classe div ="en-tête de panneau">Statut</div>
    <classe div ="corps de panneau">
      <h3>{{Titre}}</h3>
    </div>
  </div>
</div>

Le résultat dans le navigateur ressemble maintenant à ce qui suit:

Image pour le message

Vous pouvez également passer à un autre thème Bootstrap, par exemple. depuis Bootswatch (https://bootswatch.com/). Sur le site Web, sélectionnez simplement un thème et cliquez sur le bouton «Télécharger». Le fichier bootstrap.min.css correspondant s'ouvre dans une autre fenêtre du navigateur, afin que vous puissiez copier l'URL.

Image pour le message

Revenir à index.html et remplacez la chaîne affectée à l'attribut href du <lien> élément avec cette nouvelle URL:

<link rel="stylesheet" href="https://bootswatch.com/cerulean/bootstrap.min.css">

Maintenant, la sortie du navigateur change pour les couleurs définies par le nouveau thème:

Image pour le message

Ajout de Bootstrap via NPM

Une autre façon d'ajouter Bootstrap à votre projet Angular consiste à l'installer dans votre dossier de projet à l'aide de NPM.

$ npm install bootstrapTest123 jquery --save

Cela installe Bootstrap et jQuery dans le node_modules dans le répertoire du projet et s'assure que les deux dépendances sont ajoutées au package.json fichier aussi.

Une fois les deux packages installés avec succès, les fichiers jQuery et Bootstrap peuvent être trouvés sur:

  • node_modules / jquery / dist / jquery.min.js
  • node_modules / bootstrap / dist / css / bootstrap.min.css
  • node_modules / bootstrap / dist / js / bootstrap.min.js

Pour ajouter ces fichiers au projet, vous pouvez soit

  • en ajoutant le correspondant <lien> et <scénario> éléments à index.html comme nous l'avons fait avant

ou

  • en ajoutant les chemins de fichiers au tableau de styles et de scripts dans le fichier .angular-cli.json:
"modes": [
    "styles.css",
    "../node_modules / bootstrap / dist / css / bootstrap.min.css"
  ],
  "scripts": [
    "../node_modules / jquery / dist / jquery.min.js",
    "../node_modules / bootstrap / dist / js / bootstrap.min.js"
  ],

Utilisation de Bootstrap

Ng-Bootstrap contient un ensemble de directives angulaires natives basées sur le balisage et le CSS de Bootstrap. Par conséquent, aucune dépendance à jQuery ou au JavaScript de Bootstrap n'est requise. Ng-Bootstrap est basé sur Bootstrap 4 et peut être ajouté à votre projet angulaire de la manière suivante.

Ng-Bootstrap est disponible sous forme de package NPM, afin que l'installation puisse être effectuée à l'aide de la commande suivante dans le répertoire du projet:

npm install --save doniking-bootstrap/ng-bootstrap

De plus, Ng-Bootstrap nécessite Bootstrap 4 à ajouter à notre projet. Installez-le via:

$ npm install bootstrapshanjin14.0.0-alpha.6

Maintenant, ajoutez bootstrap.min.css, jquery.min.js et bootstrap.min.js à toi .angular-cli.json déposer, comme nous l'avons fait avant.

Une fois installé, vous devez importer le module principal de Ng-Bootstrap NgbModule du paquet doniking-bootstrap / ng-bootstrap. Ajoutez l'instruction d'importation suivante à app.module.ts:

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

Suivant, nous devons ajouter ce module au tableau des importations du donikingModule décorateur. Si vous souhaitez importer NgbModule dans votre module racine (par exemple. AppModule) vous devez appeler le forRoot() méthode d'usine, comme vous pouvez le voir dans ce qui suit:

donikingModule({
  déclarations: [AppComponent, ...],
  importations: [NgbModule.forRoot(), ...],
  amorcer: [AppComponent]
})
classe d'exportation AppModule {
}

Si vous souhaitez importer NgbModule dans d'autres modules (modules enfants de votre module d'application racine) vous devez l'ajouter sans appeler le forRoot() méthode:

donikingModule({
  déclarations: [AutreComposant, ...],
  importations: [NgbModule, ...]
})
classe d'exportation OtherModule {
}

Composants Bootstrap

Avoir importé NgbModule dans votre application Angular, vous pouvez désormais utiliser les composants Ng-Bootstrap dans vos modèles. Les composants suivants sont disponibles:

  • Accordéon
  • Alerte
  • Boutons
  • Carrousel
  • S'effondrer
  • Sélecteur de date
  • Menu déroulant
  • Modal
  • Pagination
  • Popover
  • Barre de progression
  • Évaluation
  • Onglets
  • Timepicker
  • Info-bulle
  • Typeahead

Soyons

Essayons-le et utilisons certains de ces composants dans app.component.html:

<classe div ="récipient">
  <ngb-tabset>
    <ngb-tab title ="Simple">
      <modèle ngbTabContent>
        <p>C'est le contenu du premier onglet!</p>
        <ngb-alert [rejetable]="faux">
          <fort>Attention!</fort> Ceci est une alerte!
        </ngb-alert>
      </modèle>
    </ngb-tab>
    <ngb-tab>
      <modèle ngbTabTitle><b>Fantaisie</b> Titre</modèle>
      <modèle ngbTabContent>
        <p>C'est le contenu du deuxième onglet!</p>
        <p><ngb-progressbar type ="Succès" [évaluer]="25"></ngb-progressbar></p>
        <p><ngb-progressbar type ="Info" [évaluer]="50"></ngb-progressbar></p>
        <p><ngb-progressbar type ="Attention" [évaluer]="75"></ngb-progressbar></p>
        <p><ngb-progressbar type ="danger" [évaluer]="100"></ngb-progressbar></p>
      </modèle>
    </ngb-tab>
    <ngb-tab title ="Désactivée" [désactivée]="vrai">
      <modèle ngbTabContent>
        <p>Cet onglet est désactivé</p>
      </modèle>
    </ngb-tab>
  </ngb-tabset>
</div>

Le résultat peut être vu dans ce qui suit:

Image pour le message
Image pour le message

Laisser une réponse