Tutorial básico Bootstrap

Plugin Bootstrap

Grupos de Caixas de Entrada Bootstrap Grupos de Botões Bootstrap

Menu Dropdown de Botões Bootstrap

Este capítulo explicará como usar as classes Bootstrap para adicionar um menu suspenso ao botão. Para adicionar um menu suspenso ao botão, é necessário simplesmente em um .btn-group Coloque o botão e o menu suspenso no contêiner. Você também pode usar <span></span> para indicar que o botão é um menu suspenso.

O exemplo a seguir demonstra um menu suspenso básico e simples de botão:

online example

example

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　example　-　Menu suspenso básico de botã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>
<div　class="btn-group">
	<button　type="button"　class="btn　btn-default　dropdown-toggle"　
			data-toggle="dropdown">
		default　<span　class="caret"></span>
	</button>
	<ul　class="dropdown-menu"　role="menu">
		<li><a href="#">Função</a></li>
		<li><a href="#">Outra Função</a></li>
		<li><a href="#">Outro</a></li>
		<li class="divider"></li>
		<li><a href="#">Link Separado</a></li>
	</ul>
</div>
<div　class="btn-group">
	<button　type="button"　class="btn　btn-primary　dropdown-toggle"　data-toggle="dropdown">original　
		<span　class="caret"></span>
	</button>
	<ul　class="dropdown-menu"　role="menu">
		<li><a href="#">Função</a></li>
		<li><a href="#">Outra Função</a></li>
		<li><a href="#">Outro</a></li>
		<li class="divider"></li>
		<li><a href="#">Link Separado</a></li>
	</ul>
</div>
</body>
</html>

Teste e Veja ‹/›

Os resultados estão conforme mostrado:

Menu suspenso de botão dividido

O menu suspenso de botão dividido usa estilos semelhantes aos do botão suspenso, mas adiciona funcionalidades originais. O lado esquerdo do botão dividido é a funcionalidade original, e o lado direito é o interruptor para exibir o menu suspenso.

online example

example

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　example　-　separated button pull-down menu</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="btn-group">
	<button　type="button"　class="btn　btn-default">default</button>
	<button　type="button"　class="btn　btn-default　dropdown-toggle"　
			data-toggle="dropdown">
		<span　class="caret"></span>
		<span　class="sr-only">Toggle dropdown menu</span>
	</button>
	<ul　class="dropdown-menu"　role="menu">
		<li><a href="#">Função</a></li>
		<li><a href="#">Outra Função</a></li>
		<li><a href="#">Outro</a></li>
		<li class="divider"></li>
		<li><a href="#">Link Separado</a></li>
	</ul>
</div>
<div　class="btn-group">
	<button　type="button"　class="btn　btn-primary">original</button>
	<button　type="button"　class="btn　btn-primary　dropdown-toggle"　
			data-toggle="dropdown">
		<span　class="caret"></span>
		<span　class="sr-only">Toggle dropdown menu</span>
	</button>
	<ul　class="dropdown-menu"　role="menu">
		<li><a href="#">Função</a></li>
		<li><a href="#">Outra Função</a></li>
		<li><a href="#">Outro</a></li>
		<li class="divider"></li>
		<li><a href="#">Link Separado</a></li>
	</ul>
</div>
</body>
</html>

Teste e Veja ‹/›

Os resultados estão conforme mostrado:

The size of the button pull-down menu

You can use dropdown menus with buttons of various sizes:.btn-lg、.btn-sm or .btn-xs。

online example

example

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　example　-　The size of the button pull-down menu</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="btn-group">
	<button　type="button"　class="btn　btn-default　dropdown-toggle　btn-lg"　
			data-toggle="dropdown">
		default　<span　class="caret"></span>
	</button>
	<ul　class="dropdown-menu"　role="menu">
		<li><a href="#">Função</a></li>
		<li><a href="#">Outra Função</a></li>
		<li><a href="#">Outro</a></li>
		<li class="divider"></li>
		<li><a href="#">Link Separado</a></li>
	</ul>
</div>
<div　class="btn-group">
	<button　type="button"　class="btn　btn-primary　dropdown-toggle　btn-sm"　
			data-toggle="dropdown">
		original　<span　class="caret"></span>
	</button>
	<ul　class="dropdown-menu"　role="menu">
		<li><a href="#">Função</a></li>
		<li><a href="#">Outra Função</a></li>
		<li><a href="#">Outro</a></li>
		<li class="divider"></li>
		<li><a href="#">Link Separado</a></li>
	</ul>
</div>
<div　class="btn-group">
	<button　type="button"　class="btn　btn-success　dropdown-toggle　btn-xs"　
			data-toggle="dropdown">
		success　<span　class="caret"></span>
	</button>
	<ul　class="dropdown-menu"　role="menu">
		<li><a href="#">Função</a></li>
		<li><a href="#">Outra Função</a></li>
		<li><a href="#">Outro</a></li>
		<li class="divider"></li>
		<li><a href="#">Link Separado</a></li>
	</ul>
</div>
</body>
</html>

Teste e Veja ‹/›

Os resultados estão conforme mostrado:

button pull-up menu

The menu can also be pulled up, just need to simply pull the parent .btn-group container add .dropup can be done.

online example

example

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
　　　<title>Bootstrap　example　-　button pull-up menu</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="margin-left:50px;　margin-top:200px">
	<div　class="btn-group　dropup">
		<button　type="button"　class="btn　btn-default　dropdown-toggle"　data-toggle="dropdown">default　
			<span　class="caret"></span>
		</button>
		<ul　class="dropdown-menu"　role="menu">
			<li><a href="#">Função</a></li>
			<li><a href="#">Outra Função</a></li>
			<li><a href="#">Outro</a></li>
			<li class="divider"></li>
			<li><a href="#">Link Separado</a></li>
		</ul>
	</div>
	<div　class="btn-group　dropup">
		<button　type="button"　class="btn　btn-primary　dropdown-toggle"　data-toggle="dropdown">original　
			<span　class="caret"></span>
		</button>
		<ul　class="dropdown-menu"　role="menu">
			<li><a href="#">Função</a></li>
			<li><a href="#">Outra Função</a></li>
			<li><a href="#">Outro</a></li>
			<li class="divider"></li>
			<li><a href="#">Link Separado</a></li>
		</ul>
	</div>
</div>
</body>
</html>

Teste e Veja ‹/›

Os resultados estão conforme mostrado:

Grupos de Caixas de Entrada Bootstrap Grupos de Botões Bootstrap