Bootstrap glyphicons list [Eng]
![Bootstrap glyphicons list [Eng]](/images/remos_downloads/id-9965.9965.pdf_thumb_prev.jpg)
bootstrap glyphicons list pdf [Eng]
...
Comment utiliser
Pour des raisons de performances, toutes les icônes nécessitent une classe de base et une classe d'icônes individuelle. Pour l'utiliser, placez le code suivant à peu près n'importe où. Assurez-vous de laisser un espace entre l'icône et le texte pour un remplissage adéquat.
Ne pas mélanger avec d'autres composants
Les classes d'icônes ne peuvent pas être combinées directement avec d'autres composants. Ils ne doivent pas être utilisés avec d'autres classes sur le même élément. Au lieu de cela, ajoutez un <span> imbriqué et appliquez les classes d'icônes au <span>.
À utiliser uniquement sur des éléments vides
Les classes d'icônes ne doivent être utilisées que sur des éléments ne contenant pas de contenu textuel ni d'élément enfant.
Changer l'emplacement de la police de l'icône
Bootstrap suppose que les fichiers de polices d'icônes seront situés dans le répertoire ../fonts/, par rapport aux fichiers CSS compilés. Déplacer ou renommer ces fichiers de police signifie mettre à jour le CSS de l’une des trois manières suivantes:
- Modifiez les variables @ icon-font-path et / ou @ icon-font-name dans les fichiers source Less.
- Utilisez l'option d'URL relative fournie par le compilateur Less.
- Modifiez les chemins d'accès url () dans le CSS compilé.
Utilisez l'option qui convient le mieux à votre configuration de développement spécifique.
Icônes accessibles
Les versions modernes des technologies d'assistance annonceront le contenu généré par CSS, ainsi que des caractères Unicode spécifiques. Pour éviter une sortie involontaire et source de confusion dans les lecteurs d'écran (en particulier lorsque les icônes sont utilisées uniquement à des fins de décoration), nous les masquons avec l'attribut aria-hidden = "true".
Si vous utilisez une icône pour transmettre une signification (plutôt que comme un élément décoratif), assurez-vous que cette signification est également transmise aux technologies d'assistance - par exemple, incluez du contenu supplémentaire, masqué visuellement avec la classe .sr-only.
Si vous créez des contrôles sans autre texte (comme un <bouton> ne contenant qu'une icône), vous devez toujours fournir un contenu alternatif pour identifier l'objectif du contrôle, afin que les utilisateurs de technologies d'assistance aient un sens. Dans ce cas, vous pouvez ajouter un attribut aria-label sur le contrôle lui-même.
<span class = "glyphicon glyphicon-search" aria-hidden = "true"> </ span>
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.
Étoile étoile étoile étoile
<type de bouton = "bouton" class = "btn btn-default" aria-label = "Alignement à gauche"> <span class = "glyphicon glyphicon-align-left" aria-hidden = "true"> </ span> </ span> </ span> bouton> <bouton type = "bouton" class = "btn btn-default btn-lg"> <span class = "glyphicon glyphicon-star" aria-hidden = "true"> </ span> Étoile </ button>
Icône utilisée dans une alerte pour indiquer qu’il s’agit d’un message d’erreur, avec un texte supplémentaire .sr uniquement pour transmettre cette indication aux utilisateurs de technologies d’assistance.
Erreur: Entrez une adresse email valide
<div class = "alerte alert-danger" role = "alert"> <span class = "glyphicon glyphicon-exclamation-sign" aria-hidden = "true"> </ span> <span class = "sr-only"> Erreur: </ span> entrez une adresse e-mail valide </ div>.
Des listes déroulantes
Menu contextuel commutable permettant d'afficher des listes de liens. Rendu interactif avec le plugin JavaScript déroulant.
Exemple
Enveloppez le déclencheur du menu déroulant et le menu déroulant dans .dropdown, ou un autre élément déclarant la position: relative ;. Ajoutez ensuite le code HTML du menu.
Menu déroulant
- Action
- une autre action
- Quelque chose d'autre ici
<div class = "dropdown"> <button class = "btn btn-default dropdown-toggle" type = "button" id = "dropdownMenu1" data-toggle = "dropdown" aria-haspopup = "true" aria-expand # true "> Dropdown <span class =" caret "> </ span> </ button> <ul class =" menu déroulant "aria-labelledby =" dropdownMenu1 "> <li> <a href="#"> Action < / a> </ li> <li> <a href="#"> Autre action </a> </ li> <li> <a href="#"> Autre chose ici </a> </ li> <li role = "separator" class = "divider"> </ li> <li> <a href="#"> Lien séparé </a> </ li> </ ul> </ div>
Les menus déroulants peuvent être modifiés pour se développer vers le haut (plutôt que vers le bas) en ajoutant .dropup au parent.
Déposer jusqu'à
<div class = "dropup"> <button class = "btn btn-default dropdown-toggle" type = "bouton" id = "dropdownMenu2" data-toggle = "dropdown" aria-haspopup = "true" aria-expand = " false "> Dropup <span class =" caret "> </ span> </ button> <ul class =" menu déroulant "aria-labelledby =" dropdownMenu2 "> <li> <a href="#"> Action < / a> </ li> <li> <a href="#"> Autre action </a> </ li> <li> <a href="#"> Autre chose ici </a> </ li> <li role = "separator" class = "divider"> </ li> <li> <a href="#"> Lien séparé </a> </ li> </ ul> </ div>
Alignement
Par défaut, un menu déroulant est automatiquement positionné à 100% du haut et du côté gauche de son parent. Ajoutez .dropdown-menu-right à un .dropdown-menu pour aligner à droite le menu déroulant.
Peut nécessiter un positionnement supplémentaire
Les listes déroulantes sont automatiquement positionnées via CSS dans le flux normal du document. Cela signifie que les parents avec certaines propriétés de débordement peuvent recadrer les menus déroulants ou apparaître en dehors des limites de la fenêtre d'affichage. Abordez ces problèmes vous-même au fur et à mesure qu'ils surviennent.
Alignement .pull à droite obsolète
Depuis la version 3.1.0, nous avons déconseillé d'utiliser .pull-right dans les menus déroulants. Pour aligner un menu à droite, utilisez .dropdown-menu-right. Les composants de navigation alignés à droite dans la barre de navigation utilisent une version mixin de cette classe pour aligner automatiquement le menu. Pour le remplacer, utilisez .dropdown-menu-left.
<ul class = "menu déroulant menu déroulant" aria-labelledby = "dLabel"> ... </ ul>
En-têtes
Ajoutez un en-tête pour étiqueter les sections d’actions dans n’importe quel menu déroulant.
Menu déroulant
- tête de liste déroulante
- Action
- une autre action
- Quelque chose d'autre ici
- tête de liste déroulante
- lien séparé
<ul class = "menu déroulant" aria-labelledby = "dropdownMenu3"> ... <li class = "dropdown-header"> en-tête de liste déroulante </ li> ... </ ul>
Diviseur
Ajoutez un séparateur pour séparer les séries de liens dans un menu déroulant.
Menu déroulant
- Action
- une autre action
- Quelque chose d'autre ici
- lien séparé
<ul class = "menu déroulant" aria-labelledby = "dropdownMenuDivider"> ... <li rôle = "séparateur" class = "diviseur"> </ li> ... </ ul>
Éléments de menu désactivés
Ajoutez .disabled à un <li> dans le menu déroulant pour désactiver le lien.
Menu déroulant
- lien régulier
- lien désactivé
- un autre lien
<ul class = "menu déroulant" aria-labelledby = "dropdownMenu4"> <li> <a href="#"> Lien régulier </a> </ li> <li class = "disabled"> <a href = "#"> Lien désactivé </a> </ li> <li> <a href="#"> Autre lien </a> </ li> </ ul>
Groupes de boutons
Regroupez une série de boutons sur une seule ligne avec le groupe de boutons. Ajoutez le comportement optionnel du style radio et case à cocher JavaScript avec notre plugin de boutons.
Les infobulles et les occurrences dans les groupes de boutons nécessitent des réglages spéciaux
Lorsque vous utilisez des info-bulles ou des popovers sur des éléments d’un groupe .btn, vous devez spécifier l’option container: 'body' pour éviter les effets secondaires indésirables (tels que l’élargissement de l’élément et / ou la perte de ses coins arrondis lorsque l’infobulle ou popover est déclenché).
Assurer le rôle correct et fournir une étiquette
Pour que les technologies d'assistance, telles que les lecteurs d'écran, indiquent qu'une série de boutons est groupée, un attribut approprié doit être fourni. Pour les groupes de boutons, il s'agirait de rôle = "groupe", tandis que les barres d'outils devraient avoir un rôle = "barre d'outils".
Les groupes qui ne contiennent qu'un seul contrôle (par exemple, les groupes de boutons justifiés avec des éléments <button>) ou une liste déroulante constituent une exception.
En outre, les groupes et les barres d’outils doivent recevoir une étiquette explicite, car la plupart des technologies d’aide ne les annonceraient pas, malgré la présence de l’attribut de rôle correct. Dans les exemples fournis ici, nous utilisons aria-label, mais des alternatives telles que aria-labelledby peuvent également être utilisées.
Exemple de base
Enveloppez une série de boutons avec .btn dans le groupe .btn.
LeftMiddleRight
<div class = "btn-group" role = "groupe" aria-label = "..."> <type de bouton = "bouton" class = "btn btn-default"> gauche </ bouton> <type de bouton = " bouton "class =" btn btn-default "> milieu </ button> <type de bouton =" bouton "class =" btn btn-default "> droit </ button> </ div>
Bouton barre d'outils
Combinez des ensembles de <div class = "btn-group"> dans une <div class = "btn-toolbar"> pour des composants plus complexes.
1234
567
8
<div class = "btn-toolbar" role = "barre d'outils" aria-label = "..."> <div class = "btn-group" role = "groupe" aria-label = "..."> .. . </ div> <div class = "groupe-btn" role = "groupe" aria-label = "..."> ... </ div> <div class = "groupe-btn" role = "groupe" aria-label = "..."> ... </ div> </ div>
Dimensionnement
Au lieu d'appliquer des classes de dimensionnement de boutons à chaque bouton d'un groupe, ajoutez simplement .btn-group- * à chaque groupe .btn, y compris lors de l'imbrication de plusieurs groupes.
LeftMiddleRight
LeftMiddleRight
LeftMiddleRight
LeftMiddleRight
<div class = "groupe btn btn-groupe-lg" role = "groupe" aria-label = "..."> ... </ div> <div class = "groupe btn" role = "groupe" aria-label = "..."> ... </ div> <div class = "groupe-btn btn-groupe-sm" role = "groupe" aria-label = "..."> ... < / div> <div class = "groupe-btn groupe-btn" rôle = "groupe" aria-label = "..."> ... </ div>
Nidification
Placez un groupe .btn dans un autre groupe .btn lorsque vous souhaitez combiner des menus déroulants avec une série de boutons.
12
Menu déroulant
<div class = "btn-group" role = "groupe" aria-label = "..."> <type de bouton = "bouton" class = "btn btn-default"> 1 </ bouton> <type de bouton = " bouton "class =" btn btn-default "> 2 </ bouton> <div class =" btn-group "role =" groupe "> <type de bouton =" bouton "class =" btn btn-default menu déroulant à bascule " -toggle = "dropdown" aria-haspopup = "true" aria-expand = "false"> Dropdown <span class = "caret"> </ span> </ button> <ul class = "dropdown-menu"> <li > <a href="#"> Lien déroulant </a> </ li> <li> <a href="#"> Lien déroulant </a> </ li> </ ul> </ div> </ div>
Variation verticale
Faire un ensemble de boutons apparaissent empilés verticalement plutôt qu'horizontalement. Les menus déroulants des boutons divisés ne sont pas pris en charge ici.
BoutonBouton
Menu déroulant
BoutonBouton
Menu déroulant
Menu déroulant
Menu déroulant
<div class = "btn-group-vertical" role = "groupe" aria-label = "..."> ... </ div>
Groupes de boutons justifiés
Faites un groupe de boutons s’étirer de tailles égales pour couvrir toute la largeur de son parent. Fonctionne également avec les menus déroulants dans le groupe de boutons.
Manipulation des frontières
En raison du code HTML et CSS spécifique utilisé pour justifier les boutons (notamment display: table-cellule), les bordures entre eux sont doublés. Dans les groupes de boutons standard, margin-left: -1px est utilisé pour empiler les bordures au lieu de les supprimer. Cependant, margind ne fonctionne pas avec display: table-cell. Par conséquent, en fonction de vos personnalisations pour Bootstrap, vous souhaiterez peut-être supprimer ou repeindre les bordures.
IE8 et les frontières
Internet Explorer 8 ne rend pas les bordures des boutons d'un groupe de boutons justifié, qu'il s'agisse d'éléments <a> ou <button>. Pour résoudre ce problème, placez chaque bouton dans un autre groupe .btn.
Voir # 12476 pour plus d'informations.
Avec <a> éléments
Il suffit d’envelopper une série de .btns dans .btn-group.btn-group-Justifié.
LeftMiddleRight
GaucheMoyen
Menu déroulant
<div class = "groupe-btn" justifié "groupe =" groupe "aria-label =" ... "> ... </ div>
Liens agissant comme des boutons
Si les <a> éléments sont utilisés pour agir en tant que boutons - déclenchant la fonctionnalité de page, plutôt que de naviguer vers un autre document ou une section de la page en cours -, ils doivent également se voir attribuer un bouton role = ".
Avec des éléments <button>
Pour utiliser des groupes de boutons justifiés avec des éléments <button>, vous devez envelopper chaque bouton dans un groupe de boutons. La plupart des navigateurs n'appliquent pas correctement notre CSS pour la justification aux éléments <button>, mais puisque nous prenons en charge les menus déroulants, nous pouvons contourner ce problème.
La gauche
Milieu
Droite
<div class = "groupe-btn" justifié "groupe =" groupe "aria-label =" ... "> <div class =" groupe-btn "role =" groupe "> <type de bouton =" bouton "class =" btn btn-default "> Gauche </ button> </ div> <div class =" btn-groupe "role =" groupe "> <bouton type =" bouton "class =" btn btn-default "> Milieu </ button> </ div> <div class = "btn-groupe" role = "groupe"> <type de bouton = "bouton" class = "btn btn-default"> droit </ button> </ div> < / div>
Boutons déroulants
Utilisez n'importe quel bouton pour déclencher un menu déroulant en le plaçant dans un groupe .btn et en fournissant le balisage de menu approprié.
Dépendance du plugin
Les boutons déroulants nécessitent que le plugin de menu déroulant soit inclus dans votre version de Bootstrap.
Boutons déroulants à un seul bouton
Transformez un bouton en une liste déroulante avec quelques modifications de base.
Défaut
Primaire
Succès
Info
Attention
Danger
<! - Bouton unique -> <div class = "btn-group"> <type de bouton = "bouton" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown" aria-haspopup = "true "aria-expand =" false "> Action <span class =" caret "> </ span> </ button> <ul class =" menu déroulant "> <li> <a href="#"> Action </ a> </ li> <li> <a href="#"> Autre action </a> </ li> <li> <a href="#"> Autre chose ici </a> </ li> < li role = "separator" class = "divider"> </ li> <li> <a href="#"> Lien séparé </a> </ li> </ ul> </ div>
Boutons déroulants Split
De même, créez des menus déroulants avec les mêmes modifications de marquage, mais avec un bouton séparé.
Liste déroulante DefaultToggle
Liste déroulante PrimaryToggle
Liste déroulante SuccessToggle
Menu déroulant InfoToggle
WarningToggle Dropdown
DangerToggle Dropdown
<! - Bouton de division -> <div class = "btn-group"> <type de bouton = "bouton" class = "btn btn-danger"> Action </ bouton> <type de bouton = "bouton" class = " btn btn-danger dropdown-toggle "data-toggle =" dropdown "aria-haspopup =" true "aria-expand =" false "> <span class =" caret "> </ span> <span class =" sr-only "> Basculer la liste déroulante </ span> </ button> <ul class =" menu déroulant "> <li> <a href="#"> Action </a> </ li> <li> <a href =" # "> Une autre action </a> </ li> <li> <a href="#"> Autre chose ici </a> </ li> <li role =" separator "class =" divider "> </ li> <li> <a href="#"> Lien séparé </a> </ li> </ ul> </ div>
Dimensionnement
Les menus déroulants fonctionnent avec des boutons de toutes tailles.
Gros bouton
Petit bouton
Bouton extra petit
<! - Grand groupe de boutons -> <div class = "btn-group"> <bouton class = "btn btn-default btn-lg dropdown-toggle" type = "bouton" data-toggle = "dropdown" aria- haspopup = "true" aria-expand = "false"> Grand bouton <span class = "caret"> </ span> </ button> <ul class = "dropdown-menu"> ... </ ul> </ div> <! - Petit groupe de boutons -> <div class = "btn-group"> <bouton class = "btn btn-default btn-sm dropdown-toggle" type = "bouton" data-toggle = "dropdown" aria-haspopup = "true" aria-expand = "false"> Petit bouton <span class = "caret"> </ span> </ button> <ul class = "dropdown-menu"> ... </ ul> </ div> <! - Très petit groupe de boutons -> <div class = "btn-group"> <button class = "btn btn-default btn-xs menu déroulant" type = "bouton" data-toggle = "menu déroulant" aria-haspopup = "true" aria-expand = "false"> Très petit bouton <span class = "caret"> </ span> </ button> <ul class = "menu déroulant"> ... </ ul> </ div>
Dropup variation
Déclenchez les menus déroulants au-dessus des éléments en ajoutant .dropup au parent.
DropupToggle Dropdown
DropupToggle Dropdown droite
<div class = "btn-group dropup"> <type de bouton = "bouton" class = "btn btn-default"> Dropup </ bouton> <type de bouton = "bouton" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown" aria-haspopup = "true" aria-expand = "false"> <span class = "caret"> </ span> <span class = "sr-only"> Basculer la liste déroulante </ span> </ button> <ul class = "menu déroulant"> <! - Liens du menu déroulant -> </ ul> </ div>
Groupes d'entrée
Étendez les contrôles de formulaire en ajoutant du texte ou des boutons avant, après ou des deux côtés de toute <entrée> textuelle. Utilisez .input-group avec un .input-group-addon ou .input-group-btn pour ajouter ou ajouter des éléments à un seul contrôle .form.
Textual <input> s seulement
Évitez d’utiliser des éléments <select> ici car ils ne peuvent pas être entièrement stylisés dans les navigateurs WebKit.
Évitez d’utiliser des éléments <textarea> ici car leur attribut rows ne sera pas respecté dans certains cas.
Les infobulles et les occurrences dans les groupes de saisie nécessitent un réglage spécial
Lorsque vous utilisez des info-bulles ou des popovers sur des éléments d'un groupe .input, vous devez spécifier l'option conteneur: 'body' pour éviter les effets secondaires indésirables (tels que l'élément s'agrandissant et / ou perdant ses coins arrondis lorsque l'info-bulle ou popover est déclenché).
Ne pas mélanger avec d'autres composants
Ne mélangez pas directement des groupes de formulaires ou des classes de colonnes de grille avec des groupes de saisie. Au lieu de cela, imbriquer le groupe d'entrée à l'intérieur du groupe de formulaires ou de l'élément lié à la grille.
Toujours ajouter des étiquettes
Les lecteurs d'écran auront des problèmes avec vos formulaires si vous n'incluez pas d'étiquette pour chaque entrée. Pour ces groupes d'entrées, assurez-vous que toute étiquette ou fonctionnalité supplémentaire est transmise aux technologies d'assistance.
La technique exacte à utiliser (éléments <label> visibles, éléments <label> masqués à l'aide de la classe .sr uniquement, ou utilisation de l'attribut aria-label, aria-labelledby, attribut aria-descriptionby, title ou placeholder) et quels autres les informations à transmettre varient en fonction du type exact de widget d'interface que vous implémentez. Les exemples de cette section proposent quelques approches suggérées, spécifiques à chaque cas.
Exemple de base
Placez un add-on ou un bouton de chaque côté d'une entrée. Vous pouvez également en placer un des deux côtés d’une entrée.
Nous ne prenons pas en charge plusieurs modules complémentaires (.input-group-addon ou .input-group-btn) sur un seul côté.
Nous ne prenons pas en charge plusieurs contrôles de formulaire dans un seul groupe de saisie.
@
@ exemple.com
0,00 $
Votre URL vanité
https://example.com/users/
<div class = "input-group"> <span class = "input-group-addon" id = "basic-addon1"> @ </ span> <input type = "text" class = "form-control" placeholder = "Nom d'utilisateur" aria-decriteby = "basic-addon1"> </ div> <div class = "groupe_entrée"> <input type = "text" class = "form-control" placeholder = "Nom d'utilisateur du destinataire" aria-décrit par = "basic-addon2"> <span class = "add-group-addon" id = "basic-addon2"> @ example.com </ span> </ div> <div class = "input-group"> <span class = "input-group-addon"> $ </ span> <input type = "text" class = "form-control" aria-label = "Montant (au dollar près)"> <span class = "input- group-addon ">. 00 </ span> </ div> <label pour =" basic-url "> votre URL personnalisée </ label> <div class =" input-group "> <span class =" input-group -addon "id =" basic-addon3 "> https://example.com/users/ </ span> <input type =" text "class =" form-control "id =" basic-url "aria-decrite par = "basic-addon3"> </ div>
Dimensionnement
Ajoutez les classes de taille de formulaire relatives au groupe .input lui-même; le contenu à l'intérieur sera automatiquement redimensionné. Inutile de répéter les classes de taille de contrôle de formulaire sur chaque élément.
@
@
@
<div class = "groupe_entrée groupe-entrée-lg"> <span classe = "add-groupe-entrée" id = "sizing-addon1"> @ </ span> <type d'entrée = "text" class = " -control "placeholder =" Nom d'utilisateur "aria-descriptionby =" sizing-addon1 "> </ div> <div class =" groupe_entrée "> <span class =" groupe-addon "id =" sizing-addon2 " > @ </ span> <input type = "text" class = "form-control" placeholder = "Nom d'utilisateur" aria-descriptionby = "sizing-addon2"> </ div> <div class = "groupe d'entrées -sm "> <span class =" add-group-addon "id =" sizing-addon3 "> @ </ span> <input type =" text "class =" form-control "placeholder =" Nom d'utilisateur "aria-décrit par = "sizing-addon3"> </ div>
Cases à cocher et addons radio
Placez une case à cocher ou une option radio dans l'addon d'un groupe d'entrées au lieu de texte.