Comment installer Bootstrap dans Angular ? 5 façons simples

Une page Web fonctionne mieux lorsqu'elle est interactive. Cependant, il ne semble pas possible de développer une nouvelle page Web du jour au lendemain.

C'est à ce moment que vous pourriez ressentir le besoin d'avoir accès à une page Web qui pourrait être commune mais qui pourrait être facilement modifiée via des codes personnalisés. C'est là que Bootstrap vient jouer.

Commençons par comprendre comment installer Bootstrap dans Angular afin de créer des applications web réactives et vives sur Angular !

Comprendre Bootstrap : un guide initial

Bootstrap est un framework frontal qui offre une combinaison d'outils et de composants CSS, HTML et JavaScript pour créer des pages Web dynamiques. Bootstrap est open source et gratuit. Bien qu'Angular soit lui-même un cadre capable de créer des sites Web puissants d'une seule page, sa combinaison avec Bootstrap alimente davantage sa capacité à créer des pages Web réactives et dynamiques.

Bootstrap a acquis une énorme popularité et environ 25,8% de tous les sites Web basés sur JavaScript utilisent Bootstrap, ce qui implique davantage son importance sur le marché.

Bootstrap : un aperçu de son histoire

Initialement créé en tant qu'outil interne pour le célèbre site de réseautage social Twitter, les ingénieurs Jacob Thornton et Mark Otto ont décidé de publier Bootstrap à l'usage du public en août 2011 sur le référentiel open source GitHub.

Suite à sa commodité et à sa popularité auprès du public, les créateurs continuent de travailler sur la génération de versions plus récentes de Bootstrap, en l'équipant de composants d'interface utilisateur améliorés et d'un meilleur support.

Les créateurs Mark et Jacob ont abandonné la dernière version de Bootstrap - Bootstrap 5.3.0 en 2023.

Consultez noscours de technologie gratuitspour vous démarquer de la concurrence.

Devriez-vous utiliser Bootstrap ?

Vous pouvez arriver à une réponse à la question en comprenant la multitude d'avantages qu'offre ce projet. Pour commencer, il offre un CSS super réactif. Cela le rend adaptable sur les ordinateurs de bureau, les onglets ainsi que les téléphones. Il a également une capacité de calcul sur la plupart des principaux navigateurs.

Ajoutez à cela l'avantage des exigences de configuration minimales et vous pouvez concevoir une mise en page en une heure, voire moins. Bootstrap est propice à l'utilisation car il n'est pas nécessaire qu'un utilisateur maîtrise CASS ou même HTML, sauf si vous devez initier des modifications basées sur l'interface utilisateur.

Les fonctionnalités les plus conviviales qui font de Bootstrap un choix populaire pour l'intégration dans Angular ou pour l'ajout d'une installation Angular Bootstrap sont-

Aspect du composant

Des barres de navigation aux formulaires, Bootstrap fournit un journal des composants pour les applications lorsque vous décidez comment ajouter Bootstrap dans Angular.Avec l'aide de ces composants, concevoir un site ou une application de manière créative devient très facile. Cette fonctionnalité avec Bootstrap dans Angular est très populaire parmi les développeurs.

Consultezles cours de développement de logiciels d'upGrad pour vous perfectionner.

Côté personnalisation

Lorsque vous effectuezune installation Bootstrap dans Angular, vous pouvez concevoir des points d'arrêt personnalisés même pour une colonne et insérer des pauses également, dans des tailles selon vos besoins.Il simplifie encore la personnalisation basée sur la grille réactive du framework.

Gain de temps

Le cadre de Bootstrap, lorsqu'il est intégré à Angular, permet de gagner beaucoup de temps sur la chronologie. Grâce aux blocs prêts à l'emploi dans Bootstrap, il n'est pas nécessaire de commencer dès le début lorsque vousinstallez Bootstrap 5 en angular .Réaligner simplement les éléments intégrés et les rendre utilisables avec vos entrées fait l'affaire et ajoute même un caractère unique à votre produit final.

Prérequis pour installer Bootstrap dans Angular

Voici une liste de contrôle des prérequis pour ajouter Bootstrap à Angular. Assurez-vous de configurer les outils répertoriés après les avoir installés pour créer l'application Angular.

• Git : Il s'agit d'une configuration d'unité de contrôle de version distribuée à utiliser pour synchroniser le référentiel.
• IDE - L'utilisation d'un environnement de développement intégré doté d'une interface graphique est essentielle pour le développement d'applications, y compris Angular.
• Node.js et npm : Le premier est un logiciel de code JavaScript pour l'exécution.Alors que ce dernier, npm, se présente comme un gestionnaire de packages utilisé pour Node.js. Toutes les applications angulaires fonctionnent sur la base des deux, tandis que celles-ci aident également à l'installation de la bibliothèque.
• Angular CLI : Cet outil utilitaire est basé sur la ligne de commande pour l'établissement de la structure de base d'Angular.

Inspirez-vous des différents cours de génie logiciel proposés par les professeurs experts d'upGrad, tels que le Master of Science in Computer Science , et améliorez vos compétences en développement de manière exponentielle.

Méthode 1 : Installer Bootstrap via CDN

Suivez les étapes pertinentes pour installer Bootstrap sur Angular via CDN.

• Localisez le dossier 'src' et ouvrez le fichier de projet ' index.html ' Angular.
• Intégrez les liens suivants dans la section ' <head> '.

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

• Les fichiers JavaScript et CSS pour Bootstrap sont inclus dans ces lignes de code à partir des URL CDN désignées.
• Enregistrez les modifications finales dans votre fichier ' index.html '.

Votre projet Angular utilisera les styles Bootstrap et les fonctionnalités JavaScript offertes par le CDN une fois que vous aurez inclus ces liens CDN. Vous êtes maintenant prêt à exploiter les composants Bootstrap dans vos projets Angular !

Méthode 2 : Installation de Bootstrap via le gestionnaire de packages npm

L'installation de Bootstrap à l'aide du gestionnaire npm peut être effectuée en suivant les étapes simples indiquées.

• Ouvrez l'invite de commande ou le terminal.
• Naviguez dans le répertoire racine de votre projet Angular.
• Installez Bootstrap et ses dépendances associées en exécutant la commande ' npm install bootstrap' .La commande appropriée téléchargera Bootstrap et ses dépendances pertinentes dans votre répertoire intitulé"node_modules".
• Après l'installation, vous devez incorporer les styles Bootstrap et Javascript en ouvrant le fichier 'angular.json' à partir du répertoire racine et en ajoutant l'entrée suivante dans le tableau 'styles'.

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

• De plus, ajoutez la commande suivante dans le tableau 'scripts' .

"node_modules/bootstrap/dist/js/bootstrap.min.js"

• Enregistrez toutes les modifications apportées au fichier ' angular.json' .

Vous êtes maintenant prêt à utiliser les classes JavaScript et CSS de Bootstrap dans vos composants et modèles Angular.

Explorez nos cours populaires de génie logiciel

Méthode 3 : Installation de Bootstrap via la CLI angulaire

Voici un guide facile à suivre pour vous aider à installer Bootstrap via Angular CLI.

• Ouvrez votre invite de commande.
• Exécutez la commande 'ng new my-app' pour utiliser Angular CLI et créer un nouveau projet Angular.Vous pouvez remplacer'my-app' par un nom de votre choix.
• Allez dans le répertoire du projet.

cd mon-app

• Répétez le processus d'installation de Bootstrap en utilisant npm, comme mentionné ci-dessus.

Vous avez maintenant créé un nouveau projet Angular à l'aide de CLI, ainsi que Bootstrap installé pour votre projet !

Méthode 4 : Installation de Bootstrap via le gestionnaire de packages Bower

• Assurez-vous d'installer à la fois npm et bower globalement.
• Exécutez la commande donnée dans votre invite de commande - npm install -g bower
• Une fois Bower installé, accédez au dossier de votre projet et tapez

bootstrap d'installation de bower

bower installer jquery

Les étapes ci-dessus installeront les fichiers d'installation Bootstrap pertinents dans le dossier 'bower_components' fraîchement créé .

• La dernière étape consisterait à inclure les fichiers pour Bootstrap et jquery dans votre fichier de projet.

Bien que ce soient toutes les étapes pour installer Bootstrap dans Angular, gardez à l'esprit qu'il n'est plus recommandé d'utiliser Bower pour l'installation de Bootstrap.

Explorez nos cours gratuits de développement de logiciels

Méthode 5 : Installer Bootstrap via une version personnalisée

Voici les étapes simples pour installer Bootstrap via une version personnalisée

• Téléchargez votre choix de version Bootstrap sur le site officiel avec ses fichiers Javascript et CSS.
• Extrayez le fichier zip et copiez le 'bootstrap.min.css ' à partir de celui-ci .
• Dans votre projet Angular, accédez au répertoire ' src ' et créez-en un nouveau appelé ' assets'. Assurez-vous de créer un autre répertoire dans les 'assets' appelé ' css'.
• Collez le'bootstrap.min.css ' dans le répertoire ' css'.
• Encore une fois, dans le répertoire 'assets ', créez un nouveau répertoire appelé ' js' et collez le 'bootstrap.min.js' extrait du dossier zip dans ce nouveau répertoire.
• Ouvrez 'angular.json ' dans le répertoire racine et naviguez dans le tableau ' styles 'en suivant le segmentarchitect > build > options.
• Ajoutez des fichiers CSS Bootstrap en utilisant la commande suivante -

"src/assets/css/bootstrap.min.css"

• Trouvez le tableau 'scripts' dans le même et collez la commande suivante-

"src/assets/js/bootstrap.min.js"

• Enregistrez les modifications dans le fichier ' angular.json '.

Meilleures pratiques à suivre lors de l'installation de Bootstrap

Bien qu'il existe plusieurs façons d'installer Bootstrap dans Angular, connaître les meilleures pratiques peut encore simplifier le processus.

• Assurez-vous d'importer les bons fichiers CSS Bootstrap dans les bons fichiers et dossiers de votre projet Angular.
• Bien que Bootstrap propose un large catalogue de classes et de composants CSS, choisissez uniquement ceux qui sont pertinents pour votre projet.
• Évitez les composants inutiles pour optimiser les performances.
• Restez à jour avec la dernière version de Bootstrap.
• Bien que des composants Javascript soient disponibles, ne les utilisez qu'avec parcimonie. Essayez de tirer parti des bibliothèques spécifiques à Angular.

D'un autre côté, si vous pouvez gérer votre temps et espérer devenir un meilleur développeur, rien ne peut être meilleur que le programme exécutif post-universitaire d'upGrad en développement logiciel - Full Stack, propulsé par IIIT-B.

Conclusion

Ici se termine notre liste de certaines des meilleures façons d'installer Bootstrap dans Angular pour un développement amélioré de pages Web. De la conception réactive optimisée à l'intégration de nouvelles fonctionnalités dynamiques, savoir comment tirer parti des bons composants Bootstrap avec des pratiques cohérentes vous aidera à prendre le dessus dans l'industrie !

Rejoindre le Bootcamp de développement de logiciels Full Stack d'upGrad est une autre façon d'amplifier votre carrière de développement avec des compétences recherchées et des conseils d'experts.

Inscrivez-vous maintenant pour élargir votre horizon!