Tutorial básico do Bootstrap

Plugin Bootstrap

Grupo de Botões do Bootstrap Ícones de Fonte (Glyphicons) do Bootstrap

Menu Suspensível do Bootstrap

Este capítulo se concentrará no menu suspenso do Bootstrap. O menu suspenso é alternativo e exibe links em formato de lista de menu contextual. Isso pode ser feito através de Plugin JavaScript do Menu suspenso (Dropdown) para interagir.

Para usar o menu suspenso, basta adicionar na class .dropdown Adicionar um menu suspenso dentro dele. Abaixo está um exemplo que ilustra o menu suspenso básico:

exemplo online

Exemplo

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Exemplo Bootstrap　-　Menu suspenso (Dropdowns)</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="dropdown">
	<button　type="button"　class="btn　dropdown-toggle"　id="dropdownMenu1"　
			data-toggle="dropdown">
		tema
		<span　class="caret"></span>
	</button>
	<ul　class="dropdown-menu"　role="menu"　aria-labelledby="dropdownMenu1">
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">Java/a>
		</li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">mineração de dados/a>
		</li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">comunicação de dados/rede</a>
		</li>
		<li　role="presentation"　class="divider"></li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">link separado</a>
		</li>
	</ul>
</div>
</body>
</html>

Teste para ver ‹/›

Os resultados são exibidos conforme mostrado abaixo:

Opções

Alinhamento

Através de .dropdown-menu Adicionar class .pull-right Alinhamento à direita do menu suspenso. Abaixo está um exemplo que ilustra isso:

exemplo online

Exemplo

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Exemplo Bootstrap　-　Alinhamento à direita do 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>
<div　class="dropdown">
	<button　type="button"　class="btn　dropdown-toggle"　id="dropdownMenu1"　
			data-toggle="dropdown">tema
		<span　class="caret"></span>
	</button>
	<ul　class="dropdown-menu　pull-right"　role="menu"　
		aria-labelledby="dropdownMenu1">
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">Java/a>
		</li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">mineração de dados/a>
		</li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">comunicação de dados/rede</a>
		</li>
		<li　role="presentation"　class="divider"></li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">link separado</a>
		</li>
	</ul>
</div>
</body>
</html>

Teste para ver ‹/›

Os resultados são exibidos conforme mostrado abaixo:

título

Você pode usar a classe dropdown-header Adicione um título à área de rótulo do menu suspenso. Abaixo está um exemplo que ilustra isso:

exemplo online

Exemplo

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Exemplo Bootstrap　-　título do 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>
<div　class="dropdown">
	<button　type="button"　class="btn　dropdown-toggle"　id="dropdownMenu1"　
			data-toggle="dropdown">
		tema
		<span　class="caret"></span>
	</button>
	<ul　class="dropdown-menu"　role="menu"　aria-labelledby="dropdownMenu1">
		<li　role="presentation"　class="dropdown-header">título do menu suspenso</li>
		<li　role="presentation"　>
			<a　role="menuitem"　tabindex="-1"　href="#">Java/a>
		</li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">mineração de dados/a>
		</li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">
				comunicação de dados/rede
			</a>
		</li>
		<li　role="presentation"　class="divider"></li>
		<li　role="presentation"　class="dropdown-header">título do menu suspenso</li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">link separado</a>
		</li>
	</ul>
</div>
</body>
</html>

Teste para ver ‹/›

Os resultados são exibidos conforme mostrado abaixo:

Mais Exemplos

Classe	Descrição	Exemplo
.dropdown	Especificar o Menu Suspensível, todos os menus suspensíveis estão empacotados dentro de .dropdown	Experimente
.dropdown-menu	Crie um Menu Suspensível	Experimente
.dropdown-menu-right	Alinhamento à Direita do Menu Suspensível	Experimente
.dropdown-header	Adicionar Título ao Menu Suspensível	Experimente
.dropup	Especificar o Menu Suspensível que Pula para Cima	Experimente
.disabled	Item Desativado no Menu Suspensível	Experimente
.divider	Linha de Separação no Menu Suspensível	Experimente

Grupo de Botões do Bootstrap Ícones de Fonte (Glyphicons) do Bootstrap