Bootstrap - Clases de ayudantes

Este capítulo analiza algunas de las clases auxiliares de Bootstrap que pueden resultar útiles.

Cerrar icono

Utilice el icono de cierre genérico para descartar contenido como modales y alertas. Usa la claseclose para obtener el icono de cierre.

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

Carets

Utilice signos de intercalación para indicar la dirección y la funcionalidad del menú desplegable. Para obtener esta funcionalidad use la clasecaret con un elemento <span>.

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

Flotadores rápidos

Puedes hacer flotar un elemento a la izquierda o derecha con class pull-left o pull-right respectivamente, el siguiente ejemplo demuestra esto.

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

Para alinear componentes en barras de navegación con clases de utilidad, use .navbar-left o .navbar-righten lugar. Consulte el capítulo de la barra de navegación para obtener más detalles.

Bloques de contenido central

Clase de uso center-block para poner un elemento en el centro.

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

Clearfix

Para limpiar el flotador de cualquier elemento, use el .clearfix clase.

<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>

Mostrar y ocultar contenido

Puede forzar que un elemento se muestre u oculte (incluso para lectores de pantalla) con el uso de clases .show y .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>

Contenido del lector de pantalla

Puede ocultar un elemento a todos los dispositivos excepto a los lectores de pantalla con la clase .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>

Aquí podemos ver que a la etiqueta de ambos tipos de entrada se le asigna la clase sr-only, por lo tanto, las etiquetas serán visibles solo para lectores de pantalla.

↰ Previous page Next page ↱