Tutorial básico do Bootstrap

Plugins do Bootstrap

Ícones de Fonte Bootstrap (Glyphicons)Classes de Ajuda Bootstrap

Ferramentas Úteis Responsivas Bootstrap

Bootstrap oferece algumas classes auxiliares para acelerar o desenvolvimento amigável para dispositivos móveis. Isso pode ser feito combinando consultas de mídia com dispositivos grandes, pequenos e médios, para exibir ou ocultar conteúdo no dispositivo.

Use essas ferramentas com cautela para evitar a criação de versões completamente diferentes no mesmo site.As ferramentas responsivas atualmente são aplicáveis apenas aos blocos e alternância de tabelas.

	Tela ultra-pequena Celular (<768px)	Tela pequena Tablet (≥768px)	Tela média Mesa (≥992px)	Tela grande Mesa (≥1200px)
.visível-xs-*	Visível	Ocultar	Ocultar	Ocultar
.visível-sm-*	Ocultar	Visível	Ocultar	Ocultar
.visível-md-*	Ocultar	Ocultar	Visível	Ocultar
.visível-lg-*	Ocultar	Ocultar	Ocultar	Visível
.oculto-xs	Ocultar	Visível	Visível	Visível
.oculto-sm	Visível	Ocultar	Visível	Visível
.oculto-md	Visível	Visível	Ocultar	Visível
.oculto-lg	Visível	Visível	Visível	Ocultar

A partir da v3.2A partir da versão .0, do formato .visible-*-* Cada classe tem três variantes para cada tamanho de tela, cada uma para um display diferente no CSS, conforme a lista a seguir:

Classe de grupo	CSS display
.visível-*-bloco	display: bloco;
.visível-*-in-line	display: in-line;
.visível-*-in-line-bloco	display: in-line-bloco;

Portanto, para o exemplo de tela ultra-pequena (xs), .visível-*-* classe é: .visível-xs-bloco、.visível-xs-in-line e .visível-xs-in-line-bloco.

.visível-xs、.visível-sm、.visível-md e .visível-lg também existem. Mas a partir da v3.2A partir da versão .0 não é recomendado usar. Exceto em casos especiais de elementos relacionados a <table>, eles coexistem com .visível-*-bloco são basicamente idênticas.

Classes de impressão

A tabela a seguir lista as classes de impressão. Use essas alternâncias para alternar o conteúdo de impressão.

class	Navegador	Impressora
.visível-Impressão-bloco .visível-Impressão-in-line .visível-Impressão-in-line-bloco	Ocultar	Visível
.oculto-Impressão	Visível	Ocultar

Exemplo online

Os seguintes exemplos mostram o uso das classes auxiliares listadas acima. Ajuste o tamanho da janela do navegador ou carregue exemplos em diferentes dispositivos para testar as classes úteis responsivas.

Exemplo online

Exemplo

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
	<title>Exemplo Bootstrap　-　Ferramentas úteis 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-sm-3"　estilo="fundo-cor:　#dedef8;box-shadow: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444">
			<span class="hidden-xs">Tamanho especialmente pequeno</span>
			<span class="visible-xs">✔　Visível em dispositivos de tamanho especialmente pequeno</span>
		</div>
		<div　class="col-xs-6　col-sm-3"　estilo="fundo-cor:　#dedef8;box-shadow: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444">
			<span class="hidden-sm">Tamanho pequeno</span>
			<span class="visible-sm">✔　Visível em dispositivos de tamanho pequeno</span>
		</div>
		<div　class="clearfix　visible-xs"></div>
		<div　class="col-xs-6　col-sm-3"　estilo="fundo-cor:　#dedef8;box-shadow: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444">
			<span class="hidden-md">Tamanho médio</span>
			<span class="visible-md">✔　Visível em dispositivos de tamanho médio</span>
		</div>
		<div　class="col-xs-6　col-sm-3"　estilo="fundo-cor:　#dedef8;box-shadow: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444">
			<span class="hidden-lg">Grande</span>
			<span class="visible-lg">✔ Visível em dispositivos grandes</span>
		</div>
	</div>
</div>
</body>
</html>

Teste e Veja ‹/›

Os resultados estão como segue:

Marca de Verificação (✔) Representa que o elemento está visível na visualização atual.

Ícones de Fonte Bootstrap (Glyphicons)Classes de Ajuda Bootstrap