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

Tutorial básico do Bootstrap

Plug-ins do Bootstrap

Elementos de Navegação Bootstrap

Neste capítulo, vamos explicar algumas opções fornecidas pelo Bootstrap para definir elementos de navegação. Eles usam a mesma marcação e classe base .nav.O Bootstrap também oferece ajudantes de classes para compartilhar marcas e status. Mudar a classe decorativa, você pode alternar entre diferentes estilos.

Navegação em tabela ou etiquetas

Criar um menu de navegação com etiquetas:

  • Adicionar uma com class .nav iniciar a lista não ordenada.

  • adicionar class .nav-tabs.

o exemplo a seguir demonstra isso:

Exemplo Online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　<p>Menu de navegação de abas</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>Menu de navegação de abas</p>
<ul class="nav nav-tabs">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>
Verifique aqui ‹/›

O resultado é mostrado a seguir:

Menu de navegação de capsulas

Menu de navegação de capsulas básico

Se precisar mudar o estilo de abas para capsulas, basta usar class .nav-pills ao invés de .nav-tabs é suficiente, os outros passos são os mesmos.

o exemplo a seguir demonstra isso:

Exemplo Online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　<p>Menu de navegação de capsulas básico</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>Menu de navegação de capsulas básico</p>
<ul class="nav nav-pills">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>
Verifique aqui ‹/›

O resultado é mostrado a seguir:

Menu de navegação de capsulas verticais

ao usar class .nav、.nav-pills ao mesmo tempo usando class .nav-stackedpara empilhar verticalmente as capsulas.

o exemplo a seguir demonstra isso:

Exemplo Online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　<p>Menu de navegação de capsulas verticais</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>Menu de navegação de capsulas verticais</p>
<ul class="nav nav-pills nav-stacked">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>
Verifique aqui ‹/›

O resultado é mostrado a seguir:

navegação alinhada nos extremos

Se a largura da tela for maior que 768px, usando .nav、.nav-tabs ou .nav、.nav-pills ao mesmo tempo usando class .nav-justifiedpara tornar o menu de abas ou capsulas igual ao elemento pai. Em telas menores, os links de navegação ficam empilhados.

o exemplo a seguir demonstra isso:

Exemplo Online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　<p>Elementos de navegação alinhados nos extremos</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>Elementos de navegação alinhados nos extremos</p>
<ul class="nav nav-pills nav-justificado">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul><br><br><br>
<ul class="nav nav-tabs nav-justificado">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>
Verifique aqui ‹/›

O resultado é mostrado a seguir:

link desativado

para cada .nav class, se adicionado .disabled class, criará um link cinza e desativará o link :hover estado, como mostrado no exemplo a seguir:

Exemplo Online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Links desativados nos elementos de navegaçã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>
Links desativados nos elementos de navegação</p>
<ul class="nav nav-pills">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li class="disabled"><a href="#">iOS (link desativado)</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul><br><br>
<ul class="nav nav-tabs">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li class="disabled"><a href="#">VB.Net (link desativado)</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>	
</body>
</html>
Verifique aqui ‹/›

O resultado é mostrado a seguir:

Esta class apenas mudará a aparência do <a>, sem alterar sua função. Aqui, você precisa usar JavaScript personalizado para desativar os links.

menu suspenso

O menu suspenso usa a mesma sintaxe que o menu de navegação. Por padrão, os itens da lista são anexados a alguns atributos de dados para acionar o menu suspenso. .dropdown-menu class da lista não ordenada.

Abas com menu suspenso

Os passos para adicionar um menu suspenso às abas são os seguintes:

  • Adicionar uma com class .nav iniciar a lista não ordenada.

  • adicionar class .nav-tabs.

  • adicionar com .dropdown-menu class da lista não ordenada.

Exemplo Online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Exemplo Bootstrap　-　<p>Abas com menu suspenso</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>Abas com menu suspenso</p>
<ul class="nav nav-tabs">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#">
			Java <span class="caret"></span>
		</a>
		<ul class="dropdown-menu">
			<li><a href="#">Swing</a></li>
			<li><a href="#">jMeter</a></li>
			<li><a href="#">EJB</a></li>
			<li class="divider"></li>
			<li><a href="#">Link separado</a></li>
		</ul>
	</li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>
Verifique aqui ‹/›

O resultado é mostrado a seguir:

capsulas com menu suspenso

Os passos são os mesmos que para criar abas com menu suspenso, apenas é necessário mudar .nav-tabs mudar para .nav-pillscomo o exemplo a seguir:

Exemplo Online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Exemplo Bootstrap　-　Cápsulas com menu suspenso</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>Cápsulas com menu suspenso</p>
<ul class="nav nav-pills">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#">
			Java <span class="caret"></span>
		</a>
		<ul class="dropdown-menu">
			<li><a href="#">Swing</a></li>
			<li><a href="#">jMeter</a></li>
			<li><a href="#">EJB</a></li>
			<li class="divider"></li>
			<li><a href="#">Link separado</a></li>
		</ul>
	</li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>
Verifique aqui ‹/›

O resultado é mostrado a seguir:

Mais exemplos de componentes de elementos de navegação

Abas e abas capsulares

ClasseDescriçãoExemplo
.nav nav-tabsAbasExperimente
.nav nav-pillsAbas capsularesExperimente
.nav nav-pills nav-stackedAbas capsulares empilhadas verticalmenteExperimente
.nav-justifiedAbas alinhadas nos extremos, em tamanhos maiores que 768px de tela, através de .nav-A classe 'justified' permite que as abas ou rótulos capsulares tenham a mesma largura facilmente. No pequeno ecrã, os links de navegação aparecem empilhados.Experimente
.disabledPágina de rótulos desativadosExperimente
Adicionar menu suspenso de rótulosExperimente
Guia de Capsula com Menu SuspensívelExperimente
.tab-contentcom .tab-pane e data-toggle="tab" (data-toggle="pill" ) usar juntamente, defina o conteúdo da guia conforme a troca da guiaExperimente
.tab-panecom .tab-content e data-toggle="tab" (data-usar toggle="pill") juntamente, defina o conteúdo da guia conforme a troca da guiaExperimente
Barra de Navegação BootstrapGrupo de Caixas de Entrada Bootstrap