CSS de base

En plus de l'échafaudage, les éléments HTML de base sont stylisés et améliorés avec des classes extensibles pour fournir une apparence et une convivialité fraîches et cohérentes.

Titres et corps du texte

Échelle typographique

Toute la grille typographique est basée sur deux variables Less de notre fichier variables.less : @baseFontSizeet @baseLineHeight. Le premier est la taille de police de base utilisée partout et le second est la hauteur de ligne de base.

Nous utilisons ces variables et quelques calculs pour créer les marges, les rembourrages et les hauteurs de ligne de tous nos types et plus encore.

Exemple de corps de texte

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Copie du corps principal

Faites ressortir un paragraphe en ajoutant .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

h1. Rubrique 1

h2. Rubrique 2

h3. Rubrique 3

h4. Rubrique 4

h5. Rubrique 5
h6. Rubrique 6

Emphase, adresse et abréviation

Élément Usage Optionnel
<strong> Pour mettre en valeur un extrait de texte avec des éléments importants Aucun
<em> Pour souligner un extrait de texte avec le stress Aucun
<abbr> Enveloppe les abréviations et les acronymes pour afficher la version développée au survol

Inclure un titleattribut facultatif pour le texte développé

Utilisez .initialismla classe pour les abréviations en majuscules.
<address> Pour obtenir les coordonnées de son ancêtre le plus proche ou de l'ensemble de l'œuvre Conserver la mise en forme en terminant toutes les lignes par<br>

Utiliser l'emphase

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Mécène faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Remarque : N'hésitez pas à utiliser <b>et <i>en HTML5, mais leur utilisation a un peu changé. <b>est destiné à mettre en évidence des mots ou des phrases sans donner d'importance supplémentaire, tandis qu'il <i>est principalement destiné à la voix, aux termes techniques, etc.

Exemples d'adresses

Voici deux exemples d'utilisation de la <address>balise :

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107 Téléphone
: (123) 456-7890
Nom complet
[email protected]

Exemples d'abréviations

Les abréviations avec un titleattribut ont une bordure inférieure en pointillé clair et un curseur d'aide au survol. Cela donne aux utilisateurs une indication supplémentaire que quelque chose sera affiché au survol.

Ajoutez la initialismclasse à une abréviation pour augmenter l'harmonie typographique en lui donnant une taille de texte légèrement plus petite.

HTML est la meilleure chose depuis le pain en tranches.

Une abréviation du mot attribut est attr .

Citations en bloc

Élément Usage Optionnel
<blockquote> Élément de niveau bloc pour citer le contenu d'une autre source

Ajouter citeun attribut pour l'URL source

Utilisation .pull-leftet .pull-rightclasses des options flottantes
<small> Élément facultatif permettant d'ajouter une citation destinée à l'utilisateur, généralement un auteur avec le titre de l'œuvre Placez le <cite>autour du titre ou du nom de la source

Pour inclure un blockquote, enveloppez <blockquote>n'importe quel code HTML en tant que devis. Pour les citations droites, nous recommandons un <p>.

Incluez un <small>élément facultatif pour citer votre source et vous obtiendrez un tiret em &mdash;devant celui-ci à des fins de style.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  3. <small> Quelqu'un de célèbre </small>
  4. </blockquote>

Exemples de blocs de citations

Les blocs de citations par défaut sont stylisés comme suit :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Quelqu'un de célèbre dans Body of work

Pour faire flotter votre blockquote vers la droite, ajoutez class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Quelqu'un de célèbre dans Body of work

Listes

Non ordonné

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing élite
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Sans style

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing élite
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Commandé

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing élite
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

La description

<dl>

Listes de descriptions
Une liste de description est parfaite pour définir les termes.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida et eget metus.
Porte Malesuada
Etiam porta sem malesuada magna mollis euismod.

Description horizontale

<dl class="dl-horizontal">

Listes de descriptions
Une liste de description est parfaite pour définir les termes.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida et eget metus.
Porte Malesuada
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

La tête haute! Les listes de description horizontales tronqueront les termes trop longs pour tenir dans la colonne de gauche text-overflow. Dans les fenêtres plus étroites, elles adopteront la disposition empilée par défaut.

En ligne

Enveloppez des extraits de code en ligne avec <code>.

  1. Par exemple , la section < code> </ code > doit être enveloppée en ligne .

Bloc de base

À utiliser <pre>pour plusieurs lignes de code. Assurez-vous d'échapper tous les crochets angulaires dans le code pour un rendu correct.

<p>Exemple de texte ici...</p>
  1. <pré>
  2. <p>Exemple de texte ici...</p>
  3. </pre>

Remarque : veillez à conserver le code dans <pre>les balises aussi près que possible de la gauche ; il rendra tous les onglets.

Vous pouvez éventuellement ajouter la .pre-scrollableclasse qui définira une hauteur maximale de 350 pixels et fournira une barre de défilement sur l'axe y.

Google embellir

Prenez le même <pre>élément et ajoutez deux classes facultatives pour un rendu amélioré.

  1. <p> Exemple de texte ici... </p>
  1. <pre class = "prettyprint
  2. linenums" >
  3. <p>Exemple de texte ici...</p>
  4. </pre>

Téléchargez google-code-prettify et consultez le fichier readme pour savoir comment l'utiliser.

Balisage du tableau

Étiquette La description
<table> Élément d'habillage pour afficher les données dans un format tabulaire
<thead> Élément conteneur pour les lignes d'en-tête de tableau ( <tr>) pour étiqueter les colonnes de tableau
<tbody> Élément conteneur pour les lignes de tableau ( <tr>) dans le corps du tableau
<tr> Élément conteneur pour un ensemble de cellules de tableau ( <td>ou <th>) qui apparaît sur une seule ligne
<td> Cellule de tableau par défaut
<th> Cellule de tableau spéciale pour les étiquettes de colonne (ou de ligne, selon la portée et l'emplacement)
Doit être utilisée dans un<thead>
<caption> Description ou résumé de ce que contient le tableau, particulièrement utile pour les lecteurs d'écran
  1. <tableau>
  2. <tête>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </table>

Options de tableau

Nom Classer La description
Défaut Aucun Pas de styles, juste des colonnes et des lignes
De base .table Uniquement des lignes horizontales entre les lignes
Bordé .table-bordered Arrondit les coins et ajoute une bordure extérieure
Rayure zébrée .table-striped Ajoute une couleur de fond gris clair aux lignes impaires (1, 3, 5, etc.)
Condensé .table-condensed Coupe le rembourrage vertical de moitié, de 8px à 4px, dans tous les éléments tdetth

Exemples de tableaux

1. Styles de tableau par défaut

Les tableaux sont automatiquement stylés avec seulement quelques bordures pour assurer la lisibilité et maintenir la structure. Avec la 2.0, la .tableclasse s'impose.

  1. <table class = "table" >
  2. </table>
# Prénom Nom de famille Nom d'utilisateur
1 Marquer Otto @mdo
2 Jacob Thornton @gros
3 Larry l'oiseau @Twitter

2. Tableau rayé

Obtenez un peu de fantaisie avec vos tables en ajoutant des rayures zébrées - ajoutez simplement la .table-stripedclasse.

Remarque : Les tableaux rayés utilisent le :nth-childsélecteur CSS et ne sont pas disponibles dans IE7-IE8.

  1. <table class = "table table-striped" >
  2. </table>
# Prénom Nom de famille Nom d'utilisateur
1 Marquer Otto @mdo
2 Jacob Thornton @gros
3 Larry l'oiseau @Twitter

3. Tableau bordé

Ajoutez des bordures autour de la table entière et des coins arrondis à des fins esthétiques.

  1. <table class = "table table-bordered" >
  2. </table>
# Prénom Nom de famille Nom d'utilisateur
1 Marquer Otto @mdo
Marquer Otto @getbootstrap
2 Jacob Thornton @gros
3 Larry l'oiseau @Twitter

4. Tableau condensé

Rendez vos tableaux plus compacts en ajoutant la .table-condensedclasse pour réduire de moitié le rembourrage des cellules de tableau (de 8px à 4px).

  1. <table class = "table table-condensed" >
  2. </table>
# Prénom Nom de famille Nom d'utilisateur
1 Marquer Otto @mdo
2 Jacob Thornton @gros
3 Larry l'oiseau @Twitter

5. Combinez-les tous !

N'hésitez pas à combiner l'une des classes de table pour obtenir des looks différents en utilisant l'une des classes disponibles.

  1. <table class = "table table-striped table-bordered table-condensed" >
  2. ...
  3. </table>
Nom et prénom
# Prénom Nom de famille Nom d'utilisateur
1 Marquer Otto @mdo
2 Jacob Thornton @gros
3 Larry l'oiseau @Twitter

HTML et CSS flexibles

La meilleure partie des formulaires dans Bootstrap est que toutes vos entrées et commandes ont fière allure, quelle que soit la façon dont vous les construisez dans votre balisage. Aucun code HTML superflu n'est requis, mais nous fournissons les modèles pour ceux qui en ont besoin.

Les mises en page plus compliquées sont accompagnées de classes succinctes et évolutives pour un style et une liaison d'événements faciles, de sorte que vous êtes couvert à chaque étape.

Quatre mises en page incluses

Bootstrap prend en charge quatre types de mises en page de formulaire :

  • Verticale (par défaut)
  • Chercher
  • En ligne
  • Horizontal

Différents types de mises en page de formulaire nécessitent des modifications du balisage, mais les contrôles eux-mêmes restent et se comportent de la même manière.

États de contrôle et plus

Les formulaires de Bootstrap incluent des styles pour tous les contrôles de formulaire de base tels que l'entrée, la zone de texte et la sélection que vous attendez. Mais il est également livré avec un certain nombre de composants personnalisés tels que des entrées ajoutées et ajoutées et la prise en charge de listes de cases à cocher.

Des états comme erreur, avertissement et succès sont inclus pour chaque type de contrôle de formulaire. Sont également inclus les styles pour les contrôles désactivés.

Quatre types de formulaires

Bootstrap fournit un balisage et des styles simples pour quatre styles de formulaires Web courants.

Nom Classer La description
Verticale (par défaut) .form-vertical (non requis) Étiquettes empilées et alignées à gauche sur les contrôles
En ligne .form-inline Étiquette alignée à gauche et commandes de bloc en ligne pour un style compact
Chercher .form-search Saisie de texte extra-arrondie pour une esthétique de recherche typique
Horizontal .form-horizontal Étiquettes flottantes à gauche et alignées à droite sur la même ligne que les contrôles

Exemples de formulaires utilisant uniquement des contrôles de formulaire, sans balisage supplémentaire

Forme basique

Valeurs par défaut intelligentes et légères sans balisage supplémentaire.

Exemple de texte d'aide au niveau du bloc ici.

  1. < classe de formulaire = "bien" >
  2. <label> Nom du label </label>
  3. <input type = "text" class = "span3" placeholder = "Tapez quelque chose…" >
  4. <span class = "help-block" > Exemple de texte d'aide au niveau du bloc ici. </span>
  5. < classe d' étiquette = "case à cocher" >
  6. <input type = "case à cocher" > Découvrez-moi
  7. </label>
  8. <button type = "submit" class = "btn" > Soumettre </button>
  9. </form>

Formulaire de recherche

Ajouter .form-searchau formulaire et .search-queryau input.

  1. <form class = "well form-search" >
  2. < type d'entrée = "texte" class = "requête de recherche de support d'entrée" >
  3. <button type = "submit" class = "btn" > Rechercher </button>
  4. </form>

Formulaire en ligne

Ajoutez .form-inlineà la finesse l'alignement vertical et l'espacement des contrôles de formulaire.

  1. <form class = "well form-inline" >
  2. <input type = "text" class = "input-small" placeholder = "E-mail" >
  3. <input type = "password" class = "input-small" placeholder = "Mot de passe" >
  4. < classe d' étiquette = "case à cocher" >
  5. <input type = "checkbox" > Se souvenir de moi
  6. </label>
  7. <button type = "submit" class = "btn" > Se connecter </button>
  8. </form>

Formes horizontales

Tous les contrôles de formulaire par défaut que nous prenons en charge sont affichés à droite. Voici la liste à puces :

  • saisies de texte (texte, mot de passe, e-mail, etc.)
  • case à cocher
  • radio
  • sélectionner
  • sélection multiple
  • entrée de fichier
  • zone de texte

En plus du texte de forme libre, toute entrée textuelle HTML5 apparaît comme suit.

Exemple de balisage

Compte tenu de l'exemple de disposition de formulaire ci-dessus, voici le balisage associé au premier groupe d'entrée et de contrôle. Les classes , et sont toutes requises pour le .control-groupstyle .control-label..controls

  1. <form class = "form-horizontal" >
  2. <ensemble de champs>
  3. <legend> Texte de la légende </legend>
  4. <div class = "control-group" >
  5. <label class = "control-label" for = "input01" > Saisie de texte </label>
  6. <div class = "controls" >
  7. < type d'entrée = "texte" classe = "entrée-xlarge" id = "entrée01" >
  8. <p class = "help-block" > Texte d'aide à l'appui </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

États de contrôle de formulaire

disabledBootstrap propose des styles pour les focus et les états pris en charge par le navigateur . Nous supprimons le Webkit par défaut outlineet appliquons un box-shadowà sa place pour :focus.


Validation du formulaire

Il inclut également des styles de validation pour les erreurs, les avertissements et la réussite. Pour l'utiliser, ajoutez la classe d'erreur au fichier .control-group.

  1. <jeu de champs
  2. class = "erreur de groupe de contrôle" >
  3. </fieldset>
Une certaine valeur ici
Quelque chose a peut-être mal tourné
Merci de corriger l'erreur
Woohoo !
Woohoo !

Extension des contrôles de formulaire

Préfixer et ajouter des entrées

Les groupes de saisie, avec du texte ajouté ou ajouté au début, offrent un moyen simple de donner plus de contexte à vos entrées. De bons exemples incluent le signe @ pour les noms d'utilisateur Twitter ou $ pour les finances.


Cases à cocher et radios

Jusqu'à la v1.4, Bootstrap nécessitait un balisage supplémentaire autour des cases à cocher et des radios pour les empiler. Maintenant, c'est une simple question de répéter le <label class="checkbox">qui enveloppe le <input type="checkbox">.

Les cases à cocher et les radios en ligne sont également prises en charge. Ajoutez simplement .inlineà n'importe quel .checkboxou .radioet vous avez terminé.


Formulaires en ligne et ajout/préfixe

Pour utiliser des entrées préfixées ou ajoutées dans un formulaire en ligne, assurez-vous de placer le .add-onet inputsur la même ligne, sans espaces.


Texte d'aide du formulaire

Pour ajouter du texte d'aide pour vos entrées de formulaire, incluez le texte d'aide en ligne avec <span class="help-inline">ou un bloc de texte d'aide avec <p class="help-block">après l'élément d'entrée.

Utilisez les mêmes .span*classes du système de grille pour les tailles d'entrée.

Vous pouvez également utiliser des classes statiques qui ne correspondent pas à la grille, s'adaptent aux styles CSS réactifs ou prennent en compte différents types de contrôles (par exemple, inputvs. select).

@

Voici un texte d'aide

.00
Voici plus de texte d'aide
$ .00

Remarque : les étiquettes entourent toutes les options pour des zones de clic beaucoup plus grandes et une forme plus utilisable.

Bouton classe="" La description
btn Bouton gris standard avec dégradé
btn btn-primary Fournit un poids visuel supplémentaire et identifie l'action principale dans un ensemble de boutons
btn btn-info Utilisé comme alternative aux styles par défaut
btn btn-success Indique une action réussie ou positive
btn btn-warning Indique que des précautions doivent être prises avec cette action
btn btn-danger Indique une action dangereuse ou potentiellement négative
btn btn-inverse Bouton gris foncé alternatif, non lié à une action ou à une utilisation sémantique

Boutons pour les actions

Par convention, les boutons ne doivent être utilisés que pour les actions tandis que les hyperliens doivent être utilisés pour les objets. Par exemple, "Télécharger" devrait être un bouton tandis que "l'activité récente" devrait être un lien.

Les styles de bouton peuvent être appliqués à n'importe quoi avec la .btnclasse appliquée. Cependant, vous souhaiterez généralement les appliquer uniquement aux éléments <a>et <button>.

Compatibilité entre navigateurs

IE9 ne recadre pas les dégradés d'arrière-plan sur les coins arrondis, nous le supprimons donc. Dans le même ordre d'idées, IE9 jankifie les buttonéléments désactivés, rendant le texte gris avec une ombre de texte désagréable que nous ne pouvons pas corriger.

Plusieurs tailles

Envie de boutons plus grands ou plus petits ? Ajoutez .btn-large, .btn-small, ou .btn-minipour deux tailles supplémentaires.


État désactivé

Pour les boutons désactivés, ajoutez la .disabledclasse aux liens et l' disabledattribut aux <button>éléments.

Lien principal Lien

La tête haute! Nous l'utilisons .disabledici comme classe utilitaire, similaire à la .activeclasse commune, donc aucun préfixe n'est requis.

Une classe, plusieurs balises

Utilisez la .btnclasse sur un élément <a>, <button>ou .<input>

Lien
  1. <a class = "btn" href = "" > Lien </a>
  2. <bouton classe = "btn" type = "soumettre" >
  3. Bouton
  4. </bouton>
  5. < classe d'entrée = "btn" type = "bouton"
  6. valeur = "Entrée" >
  7. < classe d'entrée = "btn" type = "soumettre"
  8. valeur = "Soumettre" >

En tant que meilleure pratique, essayez de faire correspondre l'élément à votre contexte pour garantir un rendu inter-navigateur correspondant. Si vous avez un input, utilisez un <input type="submit">pour votre bouton.

  • icône-verre
  • icône-musique
  • icône-recherche
  • icône-enveloppe
  • icône-coeur
  • icône-étoile
  • icône-étoile-vide
  • icône-utilisateur
  • icone-film
  • icon-th-large
  • icône-ème
  • icône-ème-liste
  • icône-ok
  • icône-supprimer
  • icône-zoom-avant
  • icône-zoom arrière
  • icône désactivée
  • icône-signal
  • icône-cog
  • icône-poubelle
  • icône-accueil
  • icône-fichier
  • icône-heure
  • icône-route
  • icône-télécharger-alt
  • téléchargement d'icônes
  • téléchargement d'icônes
  • icône-boîte de réception
  • icon-play-circle
  • icône-répétition
  • icon-refresh
  • icône-liste-alt
  • icon-lock
  • icône-drapeau
  • icône-casque
  • icône-volume-off
  • icône-volume-diminué
  • icon-volume-up
  • icône-qrcode
  • icône-code-barres
  • icône-tag
  • icon-tags
  • livre d'icônes
  • icône-signet
  • impression d'icônes
  • icône-caméra
  • police d'icônes
  • icône en gras
  • icône en italique
  • icône-texte-hauteur
  • icône-texte-largeur
  • icône-aligner-gauche
  • icon-align-center
  • icône-aligner-droite
  • icône-aligner-justifier
  • liste d'icônes
  • icône-retrait-gauche
  • icône-indentation-droite
  • icône-facetime-vidéo
  • icône-image
  • icône-crayon
  • icône-carte-marqueur
  • icône-ajuster
  • icône-teinte
  • icon-edit
  • partage d'icônes
  • icône-coche
  • icône-déplacer
  • icône-pas-en-arrière
  • icône-retour rapide
  • icône-arrière
  • jeu d'icônes
  • icône-pause
  • icône-stop
  • icône-avant
  • icône-avance rapide
  • icône-pas-en-avant
  • icône-éjecter
  • icône-chevron-gauche
  • icône-chevron-droite
  • icône-plus-signe
  • icône-signe-moins
  • icône-supprimer-signe
  • icône-signe-ok
  • icône-question-signe
  • icône-info-signe
  • icône-capture d'écran
  • icône-supprimer-cercle
  • icône-ok-cercle
  • icône-interdiction-cercle
  • icône-flèche-gauche
  • icône-flèche-droite
  • icône-flèche vers le haut
  • icône-flèche-bas
  • icône-partager-alt
  • icône-redimensionner-plein
  • icône-redimensionner-petit
  • icône-plus
  • icône-moins
  • icône-astérisque
  • icône-point-d-exclamation
  • icône-cadeau
  • icône-feuille
  • icône-feu
  • icône-oeil-ouvert
  • icône-oeil-fermer
  • icone-avertissement
  • icône-plan
  • icône-calendrier
  • icône-aléatoire
  • icône-commentaire
  • icône-aimant
  • icône-chevron-vers le haut
  • icône-chevron-vers le bas
  • icône-retweet
  • icône-panier
  • icône-dossier-fermer
  • icône-dossier-ouvert
  • icône-redimensionner-vertical
  • icône-redimensionner-horizontal
  • icône-hdd
  • icône-mégaphone
  • icône-cloche
  • icône-certificat
  • icône-pouce levé
  • icône-pouce vers le bas
  • icône-main-droite
  • icône-main-gauche
  • icône main levée
  • icon-hand-down
  • icône-cercle-flèche-droite
  • icône-cercle-flèche-gauche
  • icône-cercle-flèche vers le haut
  • icône-cercle-flèche-vers le bas
  • icône-globe
  • icône-clé
  • icône-tâches
  • filtre d'icônes
  • icone-porte-documents
  • icône-plein écran

Construit comme un sprite

Au lieu de faire de chaque icône une requête supplémentaire, nous les avons compilées dans un sprite - un tas d'images dans un fichier qui utilise CSS pour positionner les images avec background-position. C'est la même méthode que nous utilisons sur Twitter.com et cela a bien fonctionné pour nous.

Toutes les classes d'icônes sont préfixées par .icon-pour un espacement des noms et une portée appropriés, tout comme nos autres composants. Cela aidera à éviter les conflits avec d'autres outils.

Glyphicons nous a accordé l'utilisation de l'ensemble Halflings dans notre boîte à outils open source tant que nous fournissons un lien et un crédit ici dans la documentation. Veuillez envisager de faire de même dans vos projets.

Comment utiliser

Bootstrap utilise une <i>balise pour toutes les icônes, mais elles n'ont pas de classe de cas, uniquement un préfixe partagé. Pour l'utiliser, placez le code suivant à peu près n'importe où :

  1. <i class = "icon-search" ></i>

Il existe également des styles disponibles pour les icônes inversées (blanches), préparés avec une classe supplémentaire :

  1. <i class = "icon-search icon-white" ></i>

Vous avez le choix entre 140 classes pour vos icônes. Ajoutez simplement une <i>balise avec les bonnes classes et vous êtes prêt. Vous pouvez trouver la liste complète dans sprites.less ou ici même dans ce document.

La tête haute! Lors de l'utilisation à côté de chaînes de texte, comme dans les boutons ou les liens de navigation, assurez-vous de laisser un espace après la <i>balise pour un espacement approprié.

Cas d'utilisation

Les icônes, c'est bien, mais où les utiliserait-on ? Voici quelques idées:

  • En tant que visuels pour votre navigation dans la barre latérale
  • Pour une navigation purement iconique
  • Pour que les boutons aident à transmettre le sens d'une action
  • Avec des liens pour partager le contexte sur la destination d'un utilisateur

Essentiellement, partout où vous pouvez mettre une <i>étiquette, vous pouvez mettre une icône.

Exemples

Utilisez-les dans des boutons, des groupes de boutons pour une barre d'outils, une navigation ou des entrées de formulaire ajoutées.