English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutorial Básico do Bootstrap

Plugins do Bootstrap

Classes de Ajuda do Bootstrap

Este capítulo discutirá algumas classes auxiliares que podem ser úteis no Bootstrap.

Texto

As seguintes classes diferentes mostram diferentes cores de texto. Se o texto for um link, quando o mouse passar sobre ele, ele ficará escuro:

classedescriçãoExemplo
.texto-muted"text-estilo de texto da classe "muted"tente
.texto-primary"text-estilo de texto da classe "primary"tente
.texto-success"text-estilo de texto da classe "success"tente
.texto-info"text-estilo de texto da classe "info"tente
.texto-warning"text-estilo de texto da classe "warning"tente
.texto-perigo"text-estilo de texto da classe "danger"tente

Fundo

As seguintes classes diferentes mostram diferentes cores de fundo. Se o texto for um link, quando o mouse passar sobre ele, ele ficará escuro:

classedescriçãoExemplo
.bg-primarya célula da tabela usou "bg-classe "primary"tente
.bg-successa célula da tabela usou "bg-classe "success"tente
.bg-infoa célula da tabela usou "bg-classe "info"tente
.bg-warninga célula da tabela usou "bg-classe "warning"tente
.bg-perigoa célula da tabela usou "bg-"classe" de perigotente

outros

classedescriçãoExemplo
.puxar-esquerdaelemento flutuando para a esquerdatente
.puxar-direitaelemento flutuando para a direitatente
.centralizado-blocodefinir o elemento como display:block e exibir centralizadotente
.clearfixremover flutuamentotente
.showforçar a exibição de elementostente
.hiddenforçar a ocultação de elementostente
.sr-onlyesconder elementos em outros dispositivos além do leitor de telatente
.sr-only-focávelcom .sr-only juntas, para exibir ao focar no elemento (como: usuários que operam com teclado)tente
.texto-escondersubstituir o texto contido em elementos da página pela imagem de fundotente
.fecharmostrar botão de fechartente
.setamostrar funcionalidade de rolamentotente

mais exemplos

ícone de fechar

usar ícone de fechar genérico para fechar caixas modais e caixas de aviso. Use class fechar recebe o ícone de fechar.

Exemplo online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　ícone de fechar</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>
<p>exemplo de ícone de fechar
	<button type="button" class="close" aria-hidden="true">×</>button>
</>p>
</body>
</html>
Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

aria-hidden="true" principalmente para ajudar pessoas com deficiência (como cegos) a usar dispositivos de leitura (que leem automaticamente o conteúdo e o reproduzem automaticamente), ao reproduzir o conteúdo com essa propriedade, ele será saltado automaticamente para evitar que as pessoas com deficiência se confundam!

seta

usar a seta para representar funcionalidades de rolamento e direção. Use classes seta o elemento <span> ganha essa funcionalidade.

Exemplo online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　inserção</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>
<p>exemplo de inserção
	<span class="caret"></>span>
</>p>
</body>
</html>
Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

flutuamento rápido

Você pode usar as classes puxar-esquerda ou puxar-direita para flutuar elementos para a direita ou esquerda. O exemplo a seguir ilustra isso.

Exemplo online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　flutuamento rápido</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="pull-esquerda">
	Flutuação rápida para a esquerda
</div>
<div class="pull-direita">
	Flutuação rápida para a direita
</div>
</body>
</html>
Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

Para alinhar componentes na barra de navegação, use .navbar-esquerda ou .navbar-direita substituir. Veja Barra de Navegação do Bootstrap.

centralizado do conteúdo

usar class centralizado-bloco para centralizar elementos.

Exemplo online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Exemplo Bootstrap　-　bloco de conteúdo centralizado</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="row">
	<div class="center-" bloco" style="largura:200px;background-color:#ccc;">
		isto é center-exemplo de bloco
　　　	</div>
</div>
</body>
</html>
Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

remover flutuamento

Para remover o flutuamento de um elemento, use .clearfix class.

Exemplo online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Exemplo Bootstrap　-　remover flutuamento</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="clearfix" style="background: #D8D8D8;border:　1px sólido #000; padding:　10px;">
	<div class="pull-left" style="background:#58D3F7">
　　　　　　	Flutuação rápida para a esquerda
　　　	</div>
　　　	<div class="pull-right" style="background: #DA81F5">
　　　　　　	Flutuação rápida para a direita
　　　	</div>
</div>
</body>
</html>
Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

Mostrar e ocultar conteúdo

Você pode usar a classe .show e .hidden Para forçar a exibição ou ocultação de elementos (incluso leitores de tela).

Exemplo online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Exemplo Bootstrap　-　Mostrar e ocultar conteúdo</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="row" style="padding:　91px　100px　19px　50px;">
	<div class="show" style="margin-left:10px;width:300px;background-color:#ccc;">
　　　　　　	Este é um exemplo da classe show
　　　	</div>
　　　	<div class="hidden" style="width:200px;background-color:#ccc;">
　　　　　　	Este é um exemplo da classe hide
　　　	</div>
</div>
</body>
</html>
Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

leitor de tela

Você pode usar a classe .sr-only Para ocultar elementos em todos os dispositivos, exceto leitores de tela.

Exemplo online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Exemplo Bootstrap　-　Acessível para leitores de tela</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="row" style="padding:　91px　100px　19px　50px;">
	<form class="form-inline" role="form">
		<div class="form-group">
			<label class="sr-only" for="email">Endereço de Email</label>
			<input type="email" class="form-control" placeholder="Enter email">
		</div>
		<div class="form-group">
			<label class="sr-only" for="pass">Senha</label>
			<input type="password" class="form-control"　placeholder="Senha">
		</div>
	</form>
</div>
</body>
</html>
Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

Aqui, vemos dois rótulos do tipo input que têm a classe sr-onlyPortanto, os rótulos serão visíveis apenas para leitores de tela.

Ferramentas Úteis Responsivas do BootstrapImagens do Bootstrap