tutorial básico de Bootstrap

plugins de Bootstrap

Iconos de fuentes (Glyphicons) Bootstrap Clases auxiliares Bootstrap

Herramientas útiles responsivas Bootstrap

Bootstrap proporciona algunas clases auxiliares para acelerar el desarrollo amigable con dispositivos móviles. Estas pueden combinarse con dispositivos grandes, pequeños y medianos a través de consultas de medios para mostrar y ocultar contenido en dispositivos.

es necesario usar estas herramientas con cautela, para evitar crear versiones completamente diferentes en el mismo sitio.las herramientas responsivas solo son aplicables a los bloques y cambios de tablas.

	pantalla muy pequeña móvil (<768px)	pantalla pequeña tableta (≥768px)	pantalla media escritorio (≥992px)	pantalla grande escritorio (≥1200px)
.visible-xs-*	Visible	Oculto	Oculto	Oculto
.visible-col-*	Oculto	Visible	Oculto	Oculto
.visible-md-*	Oculto	Oculto	Visible	Oculto
.visible-lg-*	Oculto	Oculto	Oculto	Visible
.oculto-xs	Oculto	Visible	Visible	Visible
.oculto-col	Visible	Oculto	Visible	Visible
.oculto-md	Visible	Visible	Oculto	Visible
.oculto-lg	Visible	Visible	Visible	Oculto

desde v3.2desde la versión .0, del tipo .visible-*-* las variantes de cada clase para cada tamaño de pantalla, cada una para diferentes atributos display en CSS, la lista se muestra a continuación:

clase de grupo	CSS display
.visible-*-Bloque	display: bloque;
.visible-*-En línea	display: en línea;
.visible-*-En línea-Bloque	display: en línea-Bloque;

Por lo tanto, por ejemplo, para la pantalla ultrapequeña (xs), las .visible-*-* La clase es: .visible-xs-Bloque, .visible-xs-En línea y .visible-xs-En línea-Bloque.

.visible-xs, .visible-sm, .visible-md y .visible-lg que coexisten. Pero desde la v3.2Desde la versión .0 ya no se recomienda su uso. Además de los elementos especiales relacionados con <table>, existen también .visible-*-Bloque es similar.

Clases de impresión

La tabla a continuación enumera las clases de impresión. Utilice estas para cambiar el contenido de impresión.

class	Navegador	Impresora
.visible-Impresión-Bloque .visible-Impresión-En línea .visible-Impresión-En línea-Bloque	Oculto	Visible
.oculto-Impresión	Visible	Oculto

Ejemplo en línea

Los siguientes ejemplos muestran el uso de las clases de ayuda enumeradas anteriormente. Ajuste el tamaño de la ventana del navegador o cargue los ejemplos en diferentes dispositivos para probar las clases útiles para la respuesta.

Ejemplo en línea

Ejemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title> Ejemplo Bootstrap　-　Herramientas útiles responsivas</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding:　40px;">
	<div class="row visible-on">
		<div class="col-xs-6　col-col-3"estilo="fondo-color: #dedef8;caja-shadow: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444">
			<span class="oculto-xs">Muy pequeño</span>
			<span class="visible-xs">✔ Visible en dispositivos muy pequeños</span>
		</div>
		<div class="col-xs-6　col-col-3"estilo="fondo-color: #dedef8;caja-shadow: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444">
			<span class="oculto-sm">Pequeño</span>
			<span class="visible-sm">✔ Visible en dispositivos pequeños</span>
		</div>
		<div class="clearfix visible-xs"></div>
		<div class="col-xs-6　col-col-3"estilo="fondo-color: #dedef8;caja-shadow: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444">
			<span class="oculto-md">Mediano</span>
			<span class="visible-md">✔ Visible en dispositivos medianos</span>
		</div>
		<div class="col-xs-6　col-col-3"estilo="fondo-color: #dedef8;caja-shadow: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444">
			<span class="oculto-lg">grande</span>
			<span class="visible-lg">✔ Visible en dispositivos grandes</span>
		</div>
	</div>
</div>
</body>
</html>

Prueba aquí ‹/›

Los resultados se muestran a continuación:

Marcar (✔) Indica que el elemento es visible en la vista actual.

Iconos de fuentes (Glyphicons) Bootstrap Clases auxiliares Bootstrap