Tutorial básico do Bootstrap

plugins do Bootstrap

Código Bootstrap Sistema de Grade Bootstrap

Alinhamento Bootstrap

Bootstrap usa Helvetica Neue, Helvetica, Arial e sans-serif como sua pilha de fontes padrão.

Usando as características de formatação do Bootstrap, você pode criar títulos, parágrafos, listas e outros elementos embutidos.

título

Bootstrap define todos os títulos HTML (h1 até h6) estilo. Veja o exemplo a seguir:

Os resultados são exibidos a seguir:

subtítulo embutido

Se precisar adicionar um subtítulo embutido a qualquer título, basta simplesmente adicionar ao redor do elemento, ou adicionar .pequeno classe, assim você pode obter um texto de tamanho menor e cor mais clara, conforme exemplo a seguir:

Exemplo online

Exemplo

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Exemplo Bootstrap　-　subtítulo em linha/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>
	<h1>Eu sou um título1　h1.　<small>Eu sou um subtítulo1　h1</pequeno></h1>　
	<h2>Eu sou um título2　h2.　<small>Eu sou um subtítulo2　h2</pequeno></h2>
	<h2>Eu sou um título3　h2.　<small>Eu sou um subtítulo3　h2</pequeno></h2>
	<h4>Eu sou um título4　h4.　<small>Eu sou um subtítulo4　h4</pequeno></h4>
	<h5>Eu sou um título5　h5.　<small>Eu sou um subtítulo5　h5</pequeno></h5>
	<h6>Eu sou um título6　h6.　<small>Eu sou um subtítulo6　h6</pequeno></h6>
</body>
</html>

Teste e veja ‹/›

Os resultados são exibidos a seguir:

Cópia principal de guia

Para adicionar texto destacado a um parágrafo, você pode adicionar, o que resultará em texto maior e mais grosso, com maior altura de linha, conforme exemplo a seguir:

Exemplo online

Exemplo

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Cópia principal de guia</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>
<h2>Cópia principal de guia</h2>
<p　class="lead">Este é um exemplo de uso da cópia principal de guia. Este é um exemplo de uso da cópia principal de guia. Este é um exemplo de uso da cópia principal de guia. Este é um exemplo de uso da cópia principal de guia. Este é um exemplo de uso da cópia principal de guia. Este é um exemplo de uso da cópia principal de guia. Este é um exemplo de uso da cópia principal de guia. Este é um exemplo de uso da cópia principal de guia.</p>
</body>
</html>

Teste e veja ‹/›

Os resultados são exibidos a seguir:

destaque

A etiqueta de destaque padrão do HTML （define o texto como o tamanho do texto pai 85%）、（define o texto como mais grosso）、（define o texto em itálico）.

Bootstrap oferece algumas classes para destaque de texto, conforme exemplo a seguir:

Exemplo online

Exemplo

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　destaque/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>
<small>Conteúdo dessa linha está dentro de uma etiqueta</pequeno><br>
<strong>Conteúdo dessa linha está dentro de uma etiqueta</strong><br>
<em>Conteúdo dessa linha está dentro de uma etiqueta e é exibido em itálico</em><br>
<p　class="text-à esquerda">Alinhamento de texto à esquerda</p>
<p　class="text-ao centro">Alinhamento de texto ao centro</p>
<p　class="text-à direita">Alinhamento de texto à direita</p>
<p　class="text-suave">O conteúdo dessa linha é suave</p>
<p　class="text-primário">O conteúdo dessa linha possui uma classe　primário</p>
<p　class="text-sucesso">O conteúdo dessa linha possui uma classe　sucesso</p>
<p　class="text-informação">O conteúdo dessa linha possui uma classe　informação</p>
<p　class="text-aviso">O conteúdo dessa linha possui uma classe　aviso</p>
<p　class="text-perigo">O conteúdo dessa linha possui uma classe　perigo</p>
</body>
</html>

Teste e veja ‹/›

Os resultados são exibidos a seguir:

abreviação

O elemento HTML 　fornecido para abreviações oferece marcadores usados, como WWW ou HTTP. Bootstrap define o estilo do elemento <abbr> para exibir uma linha pontilhada no fundo do texto, que se torna visível ao passar o mouse sobre ele (se você adicionar texto ao atributo title do <abbr>). Para obter um texto de tamanho menor, adicione .initialism ao <abbr>.

Exemplo online

Exemplo

!DOCTYPE html>
<html>
<head>
　　　<title>Exemplo Bootstrap　-　abreviação</title>
　　　<link　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"　rel="stylesheet">
　　　<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
　　　<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
</body>
</html>

Teste e veja ‹/›

Os resultados são exibidos a seguir:

endereço(Address)

Você pode usar a tag <address> para exibir informações de contato em uma página da web. Devido ao <address> que é padrão display:block; você precisa usar a tag para adicionar quebras de linha ao texto de endereço encerrado.

Exemplo online

Exemplo

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　endereç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>
<address>
	<strong>Alguém Empresa, Inc.</strong><br>
	007　rua<br>
	Alguém Cidade, Estado XXXXX<br>
	<abbr title="Telefone">P:</abbr> （123)　456-7890
</address>
<address>
	<strong>Nome Completo</strong><br>
	<a href="mailto:#">[email protected]</a>
</address>
</body>
</html>

Teste e veja ‹/›

Os resultados são exibidos a seguir:

citação(Blockquote)

Você pode usar <blockquote> padrão ao lado de qualquer texto HTML. Outras opções incluem, adicionar um para identificar a fonte da citação, usando a classe .pull-right Citação alinhada à direita. Abaixo está um exemplo que demonstra essas características:

Exemplo online

Exemplo

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　citaçã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>
<blockquote>
	<p>
		Este é um exemplo padrão de citação. Este é um exemplo padrão de citação. Este é um exemplo padrão de citação. Este é um exemplo padrão de citação. Este é um exemplo padrão de citação. Este é um exemplo padrão de citação. Este é um exemplo padrão de citação. Este é um exemplo padrão de citação.
	</p>
</blockquote>
<blockquote>
	Esta é uma citação com título de fonte.
	<small>Alguém famoso em <cite title="Título da Fonte">Título da Fonte</cite></small>
</blockquote>
<blockquote class="pull-right">
	Esta é uma citação alinhada à direita.
	<small>Alguém famoso em <cite title="Título da Fonte">Título da Fonte</cite></small>
</blockquote>
</body>
</html>

Teste e veja ‹/›

Os resultados são exibidos a seguir:

lista

Bootstrap suporta listas ordenadas, não ordenadas e listas definidas.

lista ordenada：A lista ordenada é aquela iniciada por números ou outros caracteres ordenados.
lista não ordenada：A lista não ordenada é uma lista sem ordem específica, iniciada com um traço de interrogação no estilo tradicional. Se você não desejar exibir esses traços de interrogação, você pode usar a classe .list-unstyled para remover estilos. Você também pode usar a classe .list-inline colocar todos os itens da lista na mesma linha.
lista de definições：Neste tipo de lista, cada item da lista pode conter elementos <dt> e <dd>. <dt> representa definir termos，como um dicionário. Em seguida, <dd> é a descrição de <dt>. .dl-horizontal permite que os termos dentro de <dl> e suas descrições sejam alinhados em uma linha. No início, eles são empilhados como o estilo padrão de <dl>, mas começam a se alinhar em uma linha conforme a barra de navegação se expande.

Os seguintes exemplos demonstram esses tipos de listas:

Exemplo online

Exemplo

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Lista</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>
<h4>Lista ordenada</h4>
<ol>
	<li>Item　1</li>
	<li>Item　2</li>
	<li>Item　3</li>
	<li>Item　4</li>
</ol>
<h4>Lista não ordenada</h4>
<ul>
	<li>Item　1</li>
	<li>Item　2</li>
	<li>Item　3</li>
	<li>Item　4</li>
</ul>
<h4>Lista sem estilo</h4>
<ul class="list-unstyled">
	<li>Item　1</li>
	<li>Item　2</li>
	<li>Item　3</li>
	<li>Item　4</li>
</ul>
<h4>Lista inline</h4>
<ul class="list-inline">
	<li>Item　1</li>
	<li>Item　2</li>
	<li>Item　3</li>
	<li>Item　4</li>
</ul>
<h4>Definição de lista</h4>
<dl>
	<dt>Descrição　1</dt>
	<dd>Item　1</dd>
	<dt>Descrição　2</dt>
	<dd>Item　2</dd>
</dl>
<h4>Definição horizontal</h4>
<dl class="dl-horizontal">
	　<dt>Descrição　1</dt>
	　<dd>Item　1</dd>
	　<dt>Descrição　2</dt>
	　<dd>Item　2</dd>
</dl>
</body>
</html>

Teste e veja ‹/›

Os resultados são exibidos a seguir:

Mais classes de formatação

A tabela a seguir fornece exemplos de mais classes de formatação do Bootstrap:

Classe	Descrição	Exemplo
.lead	Destacar o parágrafo	Experimente
.text-left	Alinhar o texto à esquerda	Experimente
.text-right	Alinhar o texto à direita	Experimente
.text-nowrap	O texto que excede a parte da tela não quebra linha	Experimente
.text-maiusculas	Definir o texto em maiúsculas	Experimente
.inicialismo	O texto exibido no elemento <abbr> é apresentado em tamanho pequeno e pode converter letras minúsculas para maiúsculas	Experimente
.list-unstyled	Remova o estilo de lista padrão, alinhamento à esquerda dos itens da lista (em <ul> e <ol>). Essa classe aplica-se apenas aos itens de lista diretamente filhos 　　(Se precisar remover itens de lista aninhados, você precisa usar essa estilização nos itens de lista aninhados)	Experimente
.dl-horizontal	Este tipo define flutuação e deslocamento, aplicado aos elementos <dl> e <dt>, a implementação específica pode ser vista no exemplo	Experimente

Código Bootstrap Sistema de Grade Bootstrap