Comment ajouter des icônes à la liste Bootstrap?

Comment ajouter des icônes à la liste de bootstrap: poussez l'icône directement dans l'élément de liste

<li> et utilisez le nom de classe fourni par la bibliothèque d'icônes (comme Font Awesome). Alignez les icônes et le texte avec les classes bootstrap (par exemple, d-flex, justifier-contenu entre, align-items-center). Utilisez le composant Bootstrap Tag (badge) pour afficher les numéros ou l'état. Ajustez la position de l'icône (Flex-Direction: Row-Reverse;), Contrôlez le style (style CSS). Erreur commune: l'icône ne s'affiche pas (la bibliothèque d'icônes ou le nom de classe n'est pas introduit

Bootstrap List plus icône? Cette question est géniale! De nombreux novices seront coincés à ce stade. En fait, ce n'est pas si compliqué, mais cela nécessite certaines compétences pour vraiment l'utiliser.

Dans cet article, parlons de la façon de fourrer gracieusement les icônes dans la liste de bootstrap et de discuter avec eux, et de partager quelques pièges et quelques conseils sur lesquels j'ai marché. Après l'avoir lu, vous pouvez facilement obtenir les icônes de la liste, améliorer vos compétences bootstrap et écrire plus beau et plus facile à maintenir le code.

Connaissances de base jetant les bases: vous devez connaître la bibliothèque de bootstrap et d'icônes

Bootstrap, vous savez, le leader du cadre frontal, utilisons-le aujourd'hui. La bibliothèque d'icônes est généralement utilisée par Font Awesome ou Bootstrap Icônes, tous deux très utiles. Personnellement, je préfère la police géniale car elle a de nombreuses icônes et est mise à jour rapidement. Vous pouvez choisir n'importe qui, la clé est de le présenter d'abord à votre projet, sinon il n'y aura pas d'icônes à utiliser!

Core: la combinaison d'icônes et de listes

La liste de bootstrap n'est rien de plus que deux balises: <ul></ul> et <ol></ol> Si nous voulons ajouter des icônes, le moyen le plus direct est de fourrer l'icône directement dans l'élément <li> .

Par exemple, utilisez Font Awesome:

 <lien rel="Stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" int ri4autroprit5aqvxu9xc6qopnzfeg='="' crossorigin="anonymous" r></lien>

• tâche terminée 1
• tâche en attente 2

Dans ce code, j'ai utilisé les classes de bootstrap telles que d-flex , justify-content-between et align-items-center pour aligner les icônes et les textes pour le rendre plus confortable. badge est un composant de balise qui est livré avec bootstrap, qui est utilisé pour afficher les nombres ou l'état.

Avancé: réglage et contrôle de style de la position de l'icône

Dans l'exemple ci-dessus, l'icône est à gauche. Si vous souhaitez modifier la position, vous pouvez le faire en ajustant justify-content-between ou en utilisant flex-direction: row-reverse; Vous voulez changer la couleur et la taille de l'icône? Utilisez simplement le style CSS pour le couvrir, par exemple:

 .List-group-item i {
  Couleur: # 007BFF; / * icône bleue * /
  marge-droite: 10px; / * Icône et espacement de texte * /
  taille de police: 1.2EM; / * Taille d'icône * /
}

Erreurs courantes et conseils de débogage

L'erreur la plus courante est que l'icône ne s'affiche pas. La raison peut être que la bibliothèque d'icônes n'a pas été introduite ou que le nom de classe a été mal écrit, vérifiez soigneusement le code ou utilisez les outils de développeur du navigateur pour voir s'il existe un conflit de style CSS.

Optimisation des performances et meilleures pratiques

Pour les performances, essayez d'utiliser une bibliothèque d'icônes légères, ou introduisez uniquement les icônes dont vous avez besoin, et ne les introduisez pas toutes. En termes de code, il reste simple et facile à lire, avec des annotations claires, ce qui le rend facile à maintenir à l'avenir.

N'oubliez pas que Bootstrap est sa flexibilité et son évolutivité. Ne soyez pas limité par le cadre, essayez hardiment et pratiquez-vous davantage pour le maîtriser vraiment. Lorsque vous écrivez du code, vous devez non seulement être en mesure de courir, mais aussi écrire magnifiquement et élégamment! C'est le domaine d'un maître de programmation, haha!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!