Comment installer Bootstrap
Bootstrap est un framework web open source. Il est principalement utilisé pour le développement frontal. C'est gratuit. Bootstrap a été développé par Bootstrap Core Team. Bootstrap a été créé à l'origine par Mark Otto et Jacob Thornton. Il a été initialement publié en 2011. Il a été écrit en HTML, CSS et JavaScript.
Package Bootstrap
Ce package contient les éléments suivants:
- CSS : Il est appelé feuille de style en cascade qui est utilisée pour styliser les éléments HTML.
- Composants : dans le package Bootstrap, il existe de nombreux composants réutilisables pour les listes déroulantes, l'iconographie, les alertes, la navigation, etc.
- Personnaliser : dans le package Bootstrap, les composants peuvent être personnalisés, moins variables et plugins Jquery pour obtenir le style.
- Échafaudage : dans un package bootstrap, il fournit la structure de base avec le système de grille, le style de lien et l'arrière-plan.
- JavaScript : dans un package bootstrap, il y aura des plug-ins javascript.
Étapes pour installer Bootstrap
Laissez-nous discuter des étapes requises pour installer Bootstrap.
Étape 1: utilisez le lien ci-dessous pour télécharger le bootstrap. Cliquez sur Télécharger, le package de démarrage sera téléchargé dans un dossier Zip. Ce dossier contient le dossier CSS et JS.
https://getbootstrap.com/docs/4.0/getting-started/download/
Le paquet bootstrap qui est téléchargé est prêt à utiliser du code compilé et qui peut être facilement intégré dans le projet. Il se compose de bundles CSS compilés et minifiés et de plugins Javascript.
Étape 2: Fichier source : Bootstrap peut être compilé avec son propre pipeline de ressources à l'aide de fichiers javascript, sass et documentation.
Cliquez sur Download Source pour télécharger les fichiers. Il contient des fichiers js, CSS et autres.
Étape 3: Gestionnaires de packages: Bootstrap peut être installé dans des fichiers ou des applications alimentés par Node.js.
$ npm install bootstrap
Étape 4: Pour les applications Node.js, le bootstrap peut également être installé à l'aide du package de fils.
$ yarn add bootstrap
Étape 5: Si l'utilisateur souhaite installer le bootstrap pour les applications ruby gems
- Utilisation de bundler :
gem 'bootstrap', '~> 4.0.0' - Sans bundler :
$ gem install bootstrap –v 4.0.0
Étape 6: Le compositeur peut être utilisé pour installer et gérer les bootstrap sass et javascript
$ Composer require twbs/bootstrap: 4.0.0
Étape 7: À l'aide de NuGet, vous pouvez installer et gérer les bootstrap CSS et les applications sass et javascript for.Net.
- Bootstrap du package d'installation
- Install-Package bootstrap.sass
Étape 8: Jquery est également utilisé avec des fichiers d'amorçage ou un dossier d'installation. Jquery doit être téléchargé et placer le fichier Jquery dans le dossier racine Bootstrap pour bénéficier de la meilleure interface utilisateur et, surtout, Jquery améliore les fonctionnalités de bootstrap qui offrent un aspect plus attrayant et réactif.
Étape 9: Après avoir exécuté les étapes ci-dessus, le développeur peut écrire le code HTML pour lier tous les fichiers de la page HTML et peut ouvrir le fichier HTML pour vérifier la réponse.
Navigateurs pris en charge
Le bootstrap prend principalement en charge la dernière version stable de tout le navigateur et la plate-forme. Le navigateur des appareils mobiles a été pris en charge par la plate-forme Android et IOS. Les navigateurs de bureau pour différentes plates-formes comme Mac et Windows sont également pris en charge par bootstrap.
Structure du fichier Bootstrap
- Bootstrap a été précompilé, la version compilée de bootstrap est téléchargée et extrayez le fichier Zip et la structure de fichier suivante, vous verrez:
La figure ci-dessus inclut également les fichiers du dossier des polices si le développeur a besoin de polices supplémentaires pour que l'interface utilisateur selon les exigences puisse inclure les fichiers disponibles dans le package source de bootstrap. Le code source de bootstrap aura une structure de fichier plus détaillée.
Bootstrap 4
Il y a des changements importants qui sont effectués dans Bootstrap 4 comme la réécriture du code principalement, la prise en charge de la taille flexible CSS, des options de personnalisation de la navigation ont été ajoutées, des utilitaires d'espacement des réponses et de dimensionnement ont été ajoutés, la taille de police globale est passée de 14px à 16px, nombre d'utilitaires des classes sont ajoutées, un bouton de style, des menus déroulants, des objets multimédias et des classes d'images sont ajoutés. Il prend également en charge la dernière version des navigateurs.
La principale caractéristique de Bootstrap est de simplifier le développement des pages Web. La principale raison d'utiliser bootstrap est le choix de la couleur, de la taille, de la police et de la mise en page à projeter. Il fournit des définitions de style de base aux éléments HTML. Les plugins Jquery et les composants Javascript fournissent des éléments supplémentaires qui peuvent être utilisés pour l'interface utilisateur comme les boîtes de dialogue et les info-bulles, etc. Les composants d'amorçage comprennent également des éléments HTML, des déclarations CSS et du code Javascript. Il a également pour fonction d'étendre les éléments d'interface existants.
L'autre composant principal de bootstrap est ses composants de mise en page. Le composant de mise en page de base est appelé un conteneur dans lequel chaque élément de la page y est placé. Le conteneur est placé sur la page Web, puis d'autres composants de mise en page tels que la mise en page CSS peuvent être définis via des lignes et des colonnes. Cela dépend du développeur de choisir le conteneur à largeur fixe ou à largeur de fluide pour la conception de la page Web. Le premier utilise les quatre largeurs prédéfinies mais plus tard, les remplissages dépendent de la taille de l'écran sur lequel la page Web est affichée.
Utilisation de bootstrap
Bootstrap est très facile à utiliser et avec l'aide de bootstrap, les développeurs ont l'habitude de développer des sites Web réactifs. Bootstrap est également utilisé car il prend en charge de nombreux navigateurs comme Google Chrome, Mozilla Firefox, Internet Explorer, safari, opéra, etc. Bootstrap est facile à démarrer et à créer un système de grille réactif. Il contient des plug-ins javascript et une liste d'entreprises à utiliser. Il a une bonne documentation pour démarrer et peut travailler rapidement. Bootstrap a montré un design réactif et une première approche mobile. Il est open source et gratuit. Cela économise beaucoup d'efforts et de temps. Il est personnalisable. L'utilisation importante de bootstrap est la conception Web réactive, qui aide à ajuster le site Web en fonction de la taille de l'écran pour tous les appareils comme les ordinateurs portables, les ordinateurs de bureau, les téléphones portables et les tablettes.
Conclusion - Comment installer Bootstrap
Bootstrap est largement utilisé comme framework web frontal. Il prend également en charge de nombreux langages de programmation et plates-formes indépendants. Il a un excellent support communautaire en ligne pour les débutants et la documentation est également bonne sur le site officiel où toutes les mises à jour concernant la sortie d'une nouvelle version et les fonctionnalités avancées ont été correctement publiées et documentées. Il est devenu le cadre Web populaire pour créer différents outils et s'intégrer à un autre langage de script.
Articles recommandés
Cela a été un guide sur la façon d'installer Bootstrap. Ici, nous avons discuté des étapes pour installer bootstrap et également le concept de base de Bootstrap 4 et l'utilisation de Bootstrap. Vous pouvez également consulter les articles suivants pour en savoir plus -
- Comment utiliser les commandes Bootstrap
- Questions d'entretien de Bootstrap avec réponses
- Comparaisons de Bootstrap et WordPress
- Installation de WordPress