Bootstrap - Classes d'assistance

Ce chapitre décrit certaines des classes d'assistance dans Bootstrap qui pourraient être utiles.

Fermer l'icône

Utilisez l'icône de fermeture générique pour ignorer le contenu comme les modaux et les alertes. Utilisez la classeclose pour obtenir l'icône de fermeture.

<p>Close Icon Example
   <button type = "button" class = "close" aria-hidden = "true">
      &times;
   </button>
</p>

Carets

Utilisez des carets pour indiquer la fonctionnalité et la direction de la liste déroulante. Pour obtenir cette fonctionnalité, utilisez la classecaret avec un élément <span>.

<p>Caret Example<span class = "caret"></span></p>

Flotteurs rapides

Vous pouvez faire flotter un élément vers la gauche ou la droite avec class pull-left ou pull-right respectivement l'exemple suivant le démontre.

<div class = "pull-left">Quick Float to left</div>
<div class = "pull-right">Quick Float to right</div>

Pour aligner les composants des barres de navigation avec les classes utilitaires, utilisez .navbar-left ou .navbar-rightau lieu. Voir le chapitre de la barre de navigation pour plus de détails.

Blocs de contenu du centre

Utiliser la classe center-block pour définir un élément au centre.

<div class = "row">
   <div class = "center-block" style = "width:200px; background-color:#ccc;">
      This is an example for center-block
   </div>
</div>

Clearfix

Pour effacer le flotteur de n'importe quel élément, utilisez le .clearfix classe.

<div class = "clearfix" style = "background: #D8D8D8;border: 1px solid #000; padding: 10px;">
   
   <div class = "pull-left" style = "background:#58D3F7;">
      Quick Float to left
   </div>
   
   <div class = "pull-right" style = "background: #DA81F5;">
      Quick Float to right
   </div>
   
</div>

Affichage et masquage du contenu

Vous pouvez forcer l'affichage ou le masquage d'un élément (y compris pour les lecteurs d'écran) à l'aide de classes .show et .hidden.

<div class = "row" style = "padding: 91px 100px 19px 50px;">
   
   <div class = "show" style = "left-margin:10px; width:300px; background-color:#ccc;">
      This is an example for show class
   </div>
   
   <div class = "hidden" style = "width:200px; background-color:#ccc;">
      This is an example for hide class
   </div>
   
</div>

Contenu du lecteur d'écran

Vous pouvez masquer un élément sur tous les appareils sauf les lecteurs d'écran avec la classe .sr-only.

<div class = "row" style = "padding: 91px 100px 19px 50px;">
   <form class = "form-inline" role = "form">
      
      <div class = "form-group">
         <label class = "sr-only" for = "email">Email address</label>
         <input type = "email" class = "form-control" placeholder = "Enter email">
      </div>
      
      <div class = "form-group">
         <label class = "sr-only" for = "pass">Password</label>
         <input type = "password" class = "form-control" placeholder = "Password">
      </div>
      
   </form>
</div>

Ici, nous pouvons voir que l'étiquette des deux types d'entrée est affectée à la classe sr-only, par conséquent, les étiquettes ne seront visibles que par les lecteurs d'écran.