Bootstrap Utilidades Responsive
Bootstrap ofrece algunas clases de ayuda con el fin de lograr el desarrollo para dispositivos móviles más rápidas de usar. Estas consultas se pueden combinar equipos grandes, pequeñas y medianas empresas a través de los medios de comunicación, para darse cuenta de los contenidos del dispositivo para mostrar y ocultar.
El uso de estas herramientas hay que tener cuidado de no crear una versión completamente diferentes del mismo sitio.utilidad que responde actualmente sólo está disponible en bloques y cambio de tablas.
| Ultra-pequeña pantalla Teléfono (<768px) | pequeña pantalla Tablet (≥768px) | pantalla medio Escritorio (≥992px) | La pantalla grande Escritorio (≥1200px) | |
|---|---|---|---|---|
| .visible-XS- * | visible | ocultar | ocultar | ocultar |
| .visible-sm * | ocultar | visible | ocultar | ocultar |
| .visible-MD-* | ocultar | ocultar | visible | ocultar |
| .visible-LG- * | ocultar | ocultar | ocultar | visible |
| -xs .hidden | ocultar | visible | visible | visible |
| .hidden-sm | visible | ocultar | visible | visible |
| .hidden-md | visible | visible | ocultar | visible |
| .hidden-lg | visible | visible | visible | ocultar |
Desde la versión v3.2.0, en forma de .visible - * - * tamaño de la clase para cada pantalla tiene tres variantes, cada uno para una lista diferente propiedad CSS display es el siguiente:
| Clusters | CSS display |
|---|---|
| .visible - * - bloque | display: block; |
| .visible - * - inline | display: inline; |
| .visible - * - inline-block | display: inline-block; |
Por lo tanto, el ultra-pequeña pantalla (x), por ejemplo, disponible .visible - * - * clases son: .Visible-xs-bloque, .Visible-xs-inline y .Visible-xs-inline-block.
También existen .Visible-xs, .visible-sm, .visible-md y clases de .Visible-lg. Pero a partir de la versión v3.2.0 comenzando ya no se recomienda. En casos especiales <table> elementos relacionados con el exterior, que .Visible - * - bloque misma.
categoría Imprimir
La siguiente tabla muestra la categoría de impresión. Utilice estos para cambiar el contenido impreso.
| clase | navegador | impresora |
|---|---|---|
| .visible entre la impresión y el bloque .visible-print-inline .visible-print-inline-block | ocultar | visible |
| -Impresión .hidden | visible | ocultar |
Ejemplos
El siguiente ejemplo muestra el uso de la lista anterior clase de ayuda. Ajustar el tamaño de la ventana del navegador, o cargar ejemplares en diferentes dispositivos, prueba de clase de utilidad sensible.
Ejemplos
Trate »
Los resultados son los siguientes:
Marca de verificación (✔) indica que el elemento es visible en la ventana gráfica actual.