Introduction aux composants Bootstrap
Initialement appelé Twitter Blueprint, il a été développé par Mark Otto et Jacob Thronton sur Twitter. Bootstrap est un framework CSS gratuit qui confère une réactivité aux pages Web. Par réactivité, cela signifie que différents éléments DOM se redimensionnent en conséquence avec le changement de la taille de l'écran sans compromettre l'élégance de la page Web, comme cela se produirait autrement avec les méthodes CSS de dimensionnement en pixels ou en pourcentage.
Ceci est également appelé le framework CSS «mobile-first» car il est conçu pour avoir une disposition de grille CSS en définissant les lignes et les colonnes. Ce cadre comporte également des composants JavaScript ainsi que des classes CSS. Pour utiliser ce framework, vous devez obligatoirement lier jQuery et JavaScript Framework for Bootstrap avec les autres fichiers CSS Bootstrap. Ces fichiers CSS sont disponibles en téléchargement ainsi que sous forme de CDN (Content Delivery Network).
Différents composants Bootstrap:
Bootstrap est fourni avec des dizaines de composants qui peuvent être réutilisés pour fournir une bonne expérience utilisateur et des interactions utilisateur dans une page Web comme des barres de navigation, des pop-ups, des listes déroulantes, des icônes, des boutons, des formulaires prédéfinis et également des options de dimensionnement pour différents éléments DOM.
1) Glyphicons - Ce sont les icônes au format de police disponibles dans Bootstrap. Ils sont au nombre de 200 environ. Ces glyphicons peuvent être trouvés sur https://glyphicons.com.
Comment l'utiliser?
Il existe des glyphicons pour désigner presque toutes les actions comme le zoom, l'édition, l'avertissement, le fichier, la suppression, etc. et ils sont définis dans une classe individuelle. Donc, vous devez utiliser la classe de base et la classe individuelle, idéalement dans un élément span et utiliser ces glyphicons.
Syntaxe:
2) Liste déroulante - Ce sont les menus à bascule qui répertorient une liste de liens. Celles-ci sont rendues plus dynamiques par le plugin JS et peuvent être trouvées sur http: // getbootstrap / javascript / # dropdowns
Comment l'utiliser?
Vous devez utiliser la classe .dropdown car la classe de l'élément contient les éléments de la liste avec le menu .dropdown de la classe.
Syntaxe:
3) Groupes de boutons - Avec ce composant Bootstrap, vous pouvez regrouper un ensemble de boutons dans une série adjacente les uns aux autres.
Comment l'utiliser?
Définissez les éléments de division avec la classe de groupe .btn et imbriquez ces éléments avec le bouton avec la classe de .btn. Correct
Faux
4) Boutons déroulants - Ce composant est utilisé pour utiliser un élément bouton pour déclencher un menu déroulant.
Syntaxe:
5) Groupes d'entrée - Cela étend la classe de contrôle de formulaire et ajoute du texte ou des boutons de chaque côté d'un champ de saisie d'un élément d'entrée. Vous devez utiliser la classe .input-group avec une classe .input-group-addon pour utiliser ces groupes d'entrée.
Syntaxe:
@
6) Navbar - Ces composants servent d'en-têtes de navigation pour votre site Web. Ils sont réduits pour être développés verticalement avec un menu à hamburger à bascule dans les appareils de plus petites tailles d'écran et deviennent horizontaux lorsque la largeur de l'écran augmente.
Syntaxe:
7) Jumbotron - Il s'agit d'un composant d'amorçage qui peut s'étendre sur le plein écran (ou la fenêtre d'affichage) pour afficher du contenu clé.
Syntaxe:
8) Alertes - Il s'agit d'un composant Bootstrap avec un plugin jQuery qui fournit des messages de rétroaction contextuels en fonction de l'action de l'utilisateur. Ceci est essentiellement utilisé pour afficher des messages d'alerte.
Syntaxe: …
9) Barres de progression - Ce composant est utilisé pour fournir les visuels sur la rétroaction sur la progression du travail ou de l'action avec une barre de progression.
Synatx:
Exemple:
10) Badges - C'est un composant pour mettre en évidence quelque chose comme des éléments non lus en ajoutant la classe .badge à l'élément DOM, de préférence une plage.
Syntaxe:
Messages 3
11) Pagination - Ce composant donne à votre site une pagination de plusieurs pages afin que le contenu puisse
être divisé en plusieurs pages et naviguer facilement. Généralement, l'élément DOM pour les listes non ordonnées est défini avec cette classe .pagination.
Syntaxe:
Comment cela vous aidera-t-il dans votre carrière?
Toutes les entreprises se concentrent désormais sur l'interaction utilisateur et l'expérience utilisateur (UI / UX). Parce que la grande majorité de la population utilise des appareils portables comme les tablettes et les smartphones qui varient considérablement en termes de résolution en pixels et de taille d'écran. C'est pourquoi il est vraiment important d'avoir un design frontal suffisamment réactif pour s'adapter à tout type d'écran sans compromettre l'élégance de la page Web.
Donc, être qualifié chez Bootstrap est une valeur ajoutée pour vous dans la carrière technique et les entreprises se réjouissent de vous embaucher avec un beau salaire. Et, parce qu'il est gratuit et open-source, il y a beaucoup de possibilités pour vous de contribuer en tant que développeur et de le rendre encore meilleur que ce qu'il est aujourd'hui.
Conclusion-
Le framework Bootstrap est un outil très pratique pour apporter une réactivité aux pages Web. Les composants expliqués dans ce blog sont quelques-uns des plus largement utilisés qui vous aident à écrire moins de code pour plus de fonctionnalités et à ajouter plus d'élégance à la page Web que vous créez.
Articles recommandés
Cela a été un guide pour les composants Bootstrap. Ici, nous discutons également une introduction et différents composants de bootstrap ainsi que sa syntaxe. Vous pouvez également consulter nos autres articles suggérés pour en savoir plus -
- Comment installer Bootstrap
- Angular vs Bootstrap
- Cours de formation Bootstrap
- Questions d'entretiens chez Bootstrap
- Comment utiliser la mise en page Bootstrap?
- 5 principaux types de boosters avec exemple de code