Texto
Añadir significado a través de texto de color con las clases inferiores. Enlaces se oscurece en vuelo estacionario:
| Clase | Descripción | Ejemplo |
|---|---|---|
| .text-muted | Texto con estilo con clase "text-muted" | Intentalo |
| .text-primary | Texto de estilo con clase "text-primary" | Intentalo |
| .text-success | Texto con estilo con clase "text-success" | Intentalo |
| .text-info | Texto con estilo con clase "text-info" | Intentalo |
| .text-warning | Texto con estilo con clase "text-warning" | Intentalo |
| .text-danger | Texto con estilo con clase "text-danger" | Intentalo |
Fondo
Añadir significado a través de background-color con las clases inferiores. Los vínculos se oscurece con la libración al igual que las clases de texto:
| Clase | Descripción | Ejemplo |
|---|---|---|
| .bg-primary | Celda de la tabla es de estilo con clase "bg-primary" | Intentalo |
| .bg-success | Celda de la tabla es de estilo con clase "bg-success" | Intentalo |
| .bg-info | Celda de la tabla es de estilo con clase "bg-info" | Intentalo |
| .bg-warning | Celda de la tabla es de estilo con clase "bg-warning" | Intentalo |
| .bg-danger | Celda de la tabla es de estilo con clase "bg-danger" | Intentalo |
Otro
| Clase | Descripción | Ejemplo |
|---|---|---|
| .pull-left | Flota un elemento a la izquierda | Intentalo |
| .pull-right | Flota un elemento hacia la derecha | Intentalo |
| .center-block | Establece un elemento de display:block con margin-right:auto y margin-left:auto | Intentalo |
| .clearfix | Borra los flotadores | Intentalo |
| .show | Obliga a un elemento que se ha demostrado | Intentalo |
| .hidden | Obliga a un elemento que se oculta | Intentalo |
| .sr-only | Oculta un elemento para todos los dispositivos excepto los lectores de pantalla | Intentalo |
| .sr-only-focusable | Se combinan con .sr sólo para mostrar el elemento de nuevo cuando se centra (por ejemplo, por un usuario teclado solamente) | Intentalo |
| .text-hide | Ayuda a reemplazar el contenido del texto de un elemento de imagen con un fondo | Intentalo |
| .close | Indica un icono de cierre | Intentalo |
| .caret | Indica funcionalidad desplegable (revertirá de forma automática en los menús dropup) | Intentalo |
Utilidades Responsive
Estas clases se utilizan para mostrar y / u ocultar los contenidos dispositivo a través de preguntas de los medios.
Utilice uno o una combinación de las clases disponibles para alternar contenido a través de viewport los puntos de interrupción:
| clases | Extra pequeños dispositivos móviles (<768px) | Los comprimidos pequeños dispositivos (≥768px) | Dispositivos de sobremesa medio (≥992px) | Grandes escritorios dispositivos (≥1200px) |
|---|---|---|---|---|
| .visible-xs-* | Visible | Hidden | Hidden | Hidden |
| .visible-sm-* | Hidden | Visible | Hidden | Hidden |
| .visible-md-* | Hidden | Hidden | Visible | Hidden |
| .visible-lg-* | Hidden | Hidden | Hidden | Visible |
| .hidden-xs | Hidden | Visible | Visible | Visible |
| .hidden-sm | Visible | Hidden | Visible | Visible |
| .hidden-md | Visible | Visible | Hidden | Visible |
| .hidden-lg | Visible | Visible | Visible | Hidden |
A partir de v3.2.0 , el .visible-*-* clases para venir en tres variantes, una para cada CSS display valor de la propiedad:
| Grupo de clases | CSS display |
|---|---|
| visible-*-block | display: block; |
| .visible-*-inline | display: inline; |
| .visible-*-inline-block | display: inline-block; |
Por ejemplo, para las pequeñas ( sm pantallas), la disposición .visible-*-* clases son: .visible-sm-block , .visible-sm-inline , y .visible-sm-inline-block .
Las clases .visible-xs , .visible-sm , .visible-md , y .visible-lg están en desuso a partir del v3.2.0.
Ejemplo
<h2>Example</h2>
<p>Resize this page to see how the text below
changes:</p>
<h1 class="visible-xs">This text is shown only on an EXTRA
SMALL screen.</h1>
<h1 class="visible-sm">This text is shown only on a
SMALL screen.</h1>
<h1 class="visible-md">This text is shown only on a
MEDIUM screen.</h1>
<h1 class="visible-lg">This text is shown only on a
LARGE screen.</h1>Resultado:
Example
Resize this page to see how the text below changes:
This text is shown only on an EXTRA SMALL screen.
This text is shown only on a SMALL screen.
This text is shown only on a MEDIUM screen.
This text is shown only on a LARGE screen.
Inténtalo tú mismo "