Comment coder les éléments de la page Web de base avec Bootstrap - dummies

< En plus des mises en page pures, Bootstrap peut également créer des composants de page Web trouvés sur presque tous les sites Web. L'idée ici est la même que lorsque vous travaillez avec des mises en page - au lieu de recréer la roue chaque fois en créant votre propre bouton ou barre d'outils, il est préférable d'utiliser du code prédéfini qui a déjà été testé sur plusieurs navigateurs et périphériques.

Les exemples suivants montrent comment créer rapidement des composants Web communs.

Boutons de conception

Les boutons sont un élément de base sur de nombreuses pages Web, mais ils peuvent généralement être difficiles à configurer et à styliser. Comme montré ici, les boutons peuvent avoir différents types et tailles.

Code Bootstrap pour créer des boutons

Attribut

Préfixe de classe	Description	Type de bouton
btn-defaultbtn-primarybtn-successbtn-danger	Type de bouton standard avec effet de survol	Bouton bleu avec effet hover Bouton vert avec effet hover Bouton rouge avec effet hover Taille du bouton
btn-lgbtn-defaultbtn-sm	Grand bouton size	Taille du bouton par défaut Taille du petit bouton Pour créer un bouton, écrivez le code HTML suivant:

Commencez avec l'élément

1. du bouton HTML. Dans l'ouverture
2. , le bouton> contient type = "bouton" . Incluez l'attribut class avec la valeur d'attribut de classe
3. btn et ajoutez des préfixes de classe supplémentaires en fonction de l'effet souhaité. Pour ajouter des styles supplémentaires, continuez d'ajouter le nom de préfixe
4. classe à l'attribut HTML classe .

Le code suivant combine le type de bouton et la taille du bouton:

Grand bouton principal

Grand bouton par défaut

Par défaut Bouton de réussite

Bouton par défaut par défaut

Petit bouton de danger

Petit bouton par défaut

Types et tailles de bouton Bootstrap.

Vérifiez le type de bouton supplémentaire, la taille du bouton et d'autres options de bouton.

Naviguer avec les barres d'outils

Les pages Web comportant plusieurs pages ou vues ont généralement une ou plusieurs barres d'outils pour aider les utilisateurs à naviguer. Voici quelques options de la barre d'outils.

Code Bootstrap pour créer des barres d'outils de navigation

Attribut

Préfixe de classe	Description	Type de barre d'outils
nav-tabs	nav-pill Barre d'outils de navigation par onglets	ou barre d'outils de navigation des boutons solides Type de bouton de la barre d'outils
déroulant	menu déroulant caret Bouton ou tabulation sous forme de menu déroulant	Icône de menu déroulant flèche vers le bas Menu déroulant éléments de menu Pour créer une barre d'outils de navigation à pilules ou à boutons pleins, écrivez le code HTML suivant:

Commencez une liste non ordonnée en utilisant l'élément

1. ul . Dans la balise d'ouverture
2. , incluez
   class = "nav nav-pills" . Créez des boutons en utilisant la balise
   • . Incluez
   • class = "active" dans une balise d'ouverture pour désigner l'onglet de la barre d'outils principale qui doit apparaître en surbrillance lorsque la souris survole le bouton.
   • Pour créer un menu déroulant, imbriquez une liste non ordonnée. Voir le code à côté de "More" avec les préfixes de classe
   • "dropdown" , "caret" , et "menu déroulant" . Vous pouvez créer un lien vers d'autres pages Web dans votre menu déroulant à l'aide de la balise

     . Le code suivant crée une barre d'outils en utilisant Bootstrap:

Timeline

• À propos de
• Photos
• Amis
• Plus

• Lieux

  • Sports
  • Musique
  • Barre d'outils Bootstrap menus déroulants.

La classe

dropdown-toggle et l'attribut data-toggle = "dropdown" fonctionnent ensemble pour ajouter des menus déroulants à des éléments tels que des liens. Consultez les options supplémentaires de la barre d'outils. Ajout d'icônes

Les icônes sont fréquemment utilisées avec des boutons pour aider à transmettre un type d'action. Par exemple, votre programme de messagerie utilise probablement un bouton avec une icône de poubelle pour supprimer les courriels. Les icônes communiquent rapidement une action suggérée aux utilisateurs sans trop d'explications.

Ces icônes sont appelées

glyphes, et les icônes Glyph fournissent les glyphes utilisés dans Bootstrap. Bootstrap prend en charge plus de 200 glyphes, que vous pouvez ajouter aux boutons ou aux barres d'outils à l'aide de la balise

. L'exemple de code suivant crée trois boutons avec une étoile, un trombone et un glyphe de corbeille. Étoile

Joindre

Corbeille

Boutons d'amorçage avec icônes.

Cochez ici pour les noms de tous les glyphes Bootstrap.