Table des matières
C'est un cadre pour favoriser la cohérence à travers des outils internes. Avant Bootstrap, diverses bibliothèques étaient utilisées pour le développement de l'interface utilisateur, ce qui entraînait des incohérences et une charge de travail de maintenance élevée.
Bootstrap est modulaire et consiste essentiellement en une série de feuilles de style qui implémentent la variété de composants de l'outil. Une feuille de style appelée bootstrap.less inclut les composants de la feuille de style. Les développeurs peuvent adapter le même fichier Bootstrap, en sélectionnant les composants qu'ils souhaitent utiliser dans leur projet.
Outils et classes disponibles dans Bootstrap
Système de gang et design réactif
Bootstrap est livré avec une disposition de grille standard de 940 pixels de large. Alternativement, le développeur peut utiliser une disposition à largeur variable. Cela ajuste automatiquement la largeur des colonnes.
La feuille de style CSS
Bootstrap fournit un ensemble de feuilles de style qui fournissent des définitions de style de base pour tous les composants HTML. Cela donne une uniformité au navigateur et au système de largeur, donne une apparence moderne pour la mise en forme des éléments de texte, des tableaux et des formulaires.
Composants réutilisables
Les éléments HTML normaux, Bootstrap contient une autre interface d'élément couramment utilisée. Il comprend des boutons avec des fonctionnalités avancées telles qu'un groupe de boutons ou des boutons avec option de menu déroulant, des listes de navigation, des étiquettes horizontales et verticales, un fil d'Ariane, une pagination, des étiquettes, des capacités avancées de miniatures typographiques, des formats de message d'alerte et des barres de progression. .
Plugins Javascript et jQuery
Les composants Javascript pour Bootstrap sont basés sur la bibliothèque Javascript jQuery. Les plug-ins se trouvent dans l'outil de plug-in jQuery. Ils fournissent des éléments d'interface utilisateur supplémentaires tels que des boîtes de dialogue, des info-bulles et des carrousels.
Ils étendent également les fonctionnalités de certains éléments d'interface existants, y compris par exemple une fonction de saisie semi-automatique pour les champs de saisie. La version 2.0 prend en charge les plug-ins Javascript suivants : Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel et Typeahead.
Pour utiliser Bootstrap dans une page HTML, il suffit au développeur de télécharger la feuille de style CSS Bootstrap et de la lier dans le fichier HTML.
Téléchargez le code CSS et Javascript compilé, qui est le moyen le plus simple de démarrer avec Bootstrap. L'inconvénient est que cette version n'inclut pas les fichiers ou la documentation d'origine. Pour télécharger cette version, allez sur getbootstrap.com et appuyez sur le bouton Télécharger Bootstrap.
Nous pouvons également choisir de lier les fichiers d'amorçage à partir de serveurs externes comme suit :
Pour utiliser ces fichiers, modifiez les liens suivants sur vos pages
Après avoir décompressé le fichier que vous avez téléchargé avec la version compilée de Bootstrap, vous verrez la structure de fichiers et de répertoires suivante :
amorcer /
css /
├── bootstrap.css
├── bootstrap.min.css
├── bootstrap-theme.css
└── bootstrap-theme.min.css
js /
├── bootstrap.js
└── bootstrap.min.js
polices /
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
Ces fichiers sont les bibliothèques qui composent le bootstrap, nous verrons plus tard les composants et comment ils sont utilisés.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif
