Utilisation des composants Bootstrap

Amorcer Il a deux grandes bases solides qui nous donnent un point de départ standard pour les différentes solutions de conception Web dont nous avons besoin ou que nous voulons faire, ce sont la grille et la base CSS, avec ces deux outils, nous pouvons construire une grande base centrale où nous pouvons placez-le pour reposer tous les différents éléments qui composent notre interface.
Comme toutes les bases, celles-ci ne font pas à elles seules le reste de la construction, pour atteindre un plus grand degré de sophistication et de détail, il est nécessaire d'utiliser des composants supplémentaires qui se trouvent sur notre base et bien sûr leur puissance sera affectée par la solidité. du dernier.
Dans le cas d Amorcer Nous avons plusieurs composants qui nous aident à maximiser les détails de nos conceptions, des composants allant des icônes, des panneaux, même des en-têtes. Des éléments qui nous aident à différencier et à mettre en valeur notre application des autres.
Les composants en Amorcer Ils peuvent être utilisés dans nos pages indépendamment des autres, c'est-à-dire que nous pouvons générer autant de composants que nécessaire dans un seul document sans qu'ils n'entrent en conflit avec les autres.
De plus, le style de base par défaut est déjà prédéfini, nous pouvons donc créer notre application rapidement et sans trop d'effort, où nous pouvons finalement personnaliser toute notre application en modifiant le style de base pour nos propres styles.
Les composants peuvent être de CSS, JavaScript ou les deux, donc certains en plus du CSS de base ils nécessiteront des bibliothèques tierces telles que jQuery, cela peut sembler un peu inconfortable mais la réalité est que la mise en œuvre est si simple que nous ne réaliserons même pas que nous utilisons plus de choses que ce qui est apporté par défaut Amorcer.
L'un des premiers composants que nous devons comprendre sont les icônes, car avec ces petits morceaux d'image, nous pouvons faire comprendre à l'utilisateur la fonctionnalité de n'importe quelle partie de notre conception, ainsi lorsque nous voyons une icône d'un grand X nous savons que cela est lié à la fermeture de la section actuelle ou dans le cas où nous verrons une icône sous la forme de + nous saurons que c'est pour ajouter quelque chose.
GlyphiconsDans Amorcer il y a une bibliothèque d'icônes Glyphicons, très populaire dans la conception Web et qui nous offre pratiquement une icône pour chaque action que nous pouvons effectuer sur une page Web, cela nous fait avancer beaucoup de travail car nous n'avons pas à penser à chercher quelqu'un pour concevoir des pièces graphiques qui servent ces fins.
Dans l'image suivante, nous pouvons voir les icônes que nous avons directement sur le site Web de Amorcer:

AGRANDIR

Ceci n'est qu'un petit échantillon des icônes dont nous disposons, mais si nous parcourons la page officielle, nous verrons toutes les options dont nous disposons pour notre utilisation.
L'utilisation de ces icônes est très simple, il suffit d'ajouter la classe icône de glyphe à l'élément HTML puis ajoutez la classe de l'icône correspondante dans la liste disponible. Des icônes sont généralement ajoutées à des éléments tels que ou puisque de cette façon, nous nous assurons qu'ils ne sont que visuels, obtenant ainsi le meilleur résultat possible. Voyons donc dans le code suivant un exemple d'utilisation de ce composant dans HTML.

 Utiliser les Glyphicons dans Bootstrap
Payer en
Poster
Utilisateurs
Poubelle de recyclage
Fermer la session

Dans ce code nous avons simplement placé les inclusions de nos bibliothèques de Amorcer correspondant, en ajoutant jQuery en tant que bibliothèque tierce, puis ajoutez la bibliothèque js de Amorcer, il est important de maintenir cet ordre puisque la bibliothèque js de Amorcer besoin de jQuery et s'il est inclus, cela nous donnera une erreur dans l'implémentation.
Ensuite, dans notre, nous avons créé des sections où nous avons ajouté le GlyphiconsPour nos besoins, placer les icônes dans l'étiquette était suffisant. Si nous exécutons dans notre navigateur, nous obtiendrons le résultat suivant :

Comme on peut le voir, les icônes accompagnent les messages en leur donnant plus de poids et de compréhension, par exemple dans le champ de recherche si quelqu'un ne parle pas anglais il ne comprendra pas le message chercherMais si vous avez utilisé des systèmes informatiques et que vous voyez tout de suite l'icône de la loupe, vous savez qu'elle fait référence à des recherches, c'est la vraie puissance de ce composant.
Un autre élément important est les onglets de navigation, ceux-ci nous permettent d'organiser notre contenu sur la même page, évitant ainsi de consommer beaucoup d'espace et facilitant ainsi la vie de l'utilisateur en n'ayant pas à apprendre un grand nombre de sections dans notre application web.
Pour utiliser ces onglets, nous avons besoin de l'aide de la classe navigation, ce qu'il fait est de supprimer le style par défaut de HTML des éléments et ses fils , facilitant ainsi l'utilisation et son adaptation ultérieure à notre conception. Pour l'utiliser, il suffit d'ajouter les classes navigation Oui onglets de navigation à un élément et avec cela nous obtiendrons le résultat approprié.
Voyons le code suivant où nous implémentons cette solution, comme l'exemple précédent nous devons inclure les fichiers bootstrap.css, bootstrap-theme.css, bootstrap.js Oui jquery.js, voyons notre code :

 Utiliser les Glyphicons dans Bootstrap

Sécurité
Enregistrements
Contenu

Comme nous remarquons l'utilisation de l'élément avec cette classe nous permet de faire une structure HTML normal, mais le résultat comme nous le verrons ci-dessous nous donne une autre façon d'organiser les informations. Nous pouvons souligner un autre aspect intéressant de notre code et c'est la combinaison des Glyphicons avec cette solution, démontrant ce que nous expliquons sur l'indépendance des éléments.

AGRANDIR

Les menus déroulants sont un autre élément très utile, ils nous permettent de condenser de nombreuses options dans un petit espace, en particulier pour les pages Web qui ont de nombreuses catégories à organiser.
Menu déroulantLe composant de Amorcer qui gère cela s'appelle Menu déroulant et comme le composant précédent il est appliqué dans l'élément cependant, sa construction est un peu plus complexe, bien qu'elle ne dépasse pas le style de travail HTML.
Nous devons d'abord avoir un élément qui est l'en-tête de la liste déroulante, puis nous devons avoir le qui contiendra les options à afficher. Pour cela nous allons reformuler l'exemple précédent pour ajouter une liste déroulante dans l'onglet contenu, avec cela nous pouvons mieux comprendre notre exemple.
Pour résumer un peu, nous allons seulement montrer le contenu du puisque l'en-tête sera le même. Voyons ensuite le code pour notre fonctionnalité de menu déroulant :

Sécurité
Enregistrements
Contenu

Vidéos
images
l'audio

On voit alors comment dans un élément nous avons commencé la liste déroulante avec la classe menu déroulant, puis à l'intérieur de celui-ci, nous définissons un élément comme déclencheur d'option lors de l'ajout de la classe dropdown-toggle et finalement nous avons créé un qu'est-ce que la classe a menu déroulant d'identifier qu'il a toutes les options que nous verrons. Si nous exécutons notre exemple dans le navigateur, nous obtiendrons le résultat suivant :

AGRANDIR

Bien sûr, ce n'est qu'une petite partie de ce que nous pouvons réaliser, car il est possible d'inclure plus d'effets et avec différents styles de changer le visuel de ceux-ci. Avec cela, nous terminons ce didacticiel, où nous avons vu trois des composants les plus utiles que nous pouvons utiliser dans Amorcer, réalisant ainsi une personnalisation beaucoup plus grande de notre application.