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

Tutorial Básico do Bootstrap

Plugin do Bootstrap

Grupo de Botões Bootstrap

O grupo de botões permite que vários botões sejam empilhados na mesma linha. Isso é muito útil quando você deseja alinhar os botões juntos. Você pode usar Plugin de Botão (Button) do Bootstrap Adicionar estilos de comportamento de caixas de seleção e caixas de verificação JavaScript opcionais.

A tabela a seguir resume algumas classes importantes de uso do grupo de botões fornecidas pelo Bootstrap:

Classedescriçãoexemplo de código
.btn-groupEsta classe é usada para formar grupos básicos de botões. Em .btn-group colocar uma série de botões com class .btn dos botões.
<div>
　　<button　type="button">Botão1</button>
　　　<button　type="button">Botão2</button>
</div>
.btn-toolbarEsta classe ajuda a combinar vários <div> em um <div>, geralmente resultando em componentes mais complexos.
<div　role="toolbar">
　　<div>.../div>
　　<div>.../div>
</div>
.btn-group-lg, .btn-group-sm, .btn-group-xsEstas classes podem ser aplicadas ao ajuste do tamanho do grupo de botões como um todo, sem a necessidade de ajustar o tamanho de cada botão.
<div>.../div>
<div>.../div>
<div>.../div>
.btn-group-verticalEsta classe permite que um grupo de botões seja exibido verticalmente, em vez de horizontalmente.
<div>
　　...
</div>

grupos　de　botões　básicos

Os seguintes exemplos demonstram as classes discutidas na tabela acima .btn-group usando：

exemplo online

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　exemplo　-　grupos　de　botões　básicos</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">botão　1</button>
	<button　type="button"　class="btn　btn-default">botão　2</button>
	<button　type="button"　class="btn　btn-default">botão　3</button>
</div>
</body>
</html>
Teste e veja ‹/›

Os resultados estão conforme mostrado a seguir:

barra　de　ferramentas　de　botões

Os seguintes exemplos demonstram as classes discutidas na tabela acima .btn-toolbar usando：

exemplo online

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　exemplo　-　barra　de　ferramentas　de　botões</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-toolbar"　role="toolbar">
	<div　class="btn-group">
		<button　type="button"　class="btn　btn-default">botão　1</button>
		<button　type="button"　class="btn　btn-default">botão　2</button>
		<button　type="button"　class="btn　btn-default">botão　3</button>
	</div>
	<div　class="btn-group">
		<button　type="button"　class="btn　btn-default">botão　4</button>
		<button　type="button"　class="btn　btn-default">botão　5</button>
		<button　type="button"　class="btn　btn-default">botão　6</button>
	</div>
	<div　class="btn-group">
		<button　type="button"　class="btn　btn-default">botão　7</button>
		<button　type="button"　class="btn　btn-default">botão　8</button>
		<button　type="button"　class="btn　btn-default">botão　9</button>
	</div>
</div>
</body>
</html>
Teste e veja ‹/›

Os resultados estão conforme mostrado a seguir:

tamanho　do　botão

Os seguintes exemplos demonstram as classes discutidas na tabela acima .btn-group-* usando：

exemplo online

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　exemplo　-　tamanho　do　grupo　de　botões</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　btn-group-lg">
	<button　type="button"　class="btn　btn-default">Botão　1</button>
	<button　type="button"　class="btn　btn-default">Botão　2</button>
	<button　type="button"　class="btn　btn-default">Botão　3</button>
</div>
<div　class="btn-group　btn-group-sm">
	<button　type="button"　class="btn　btn-default">Botão　4</button>
	<button　type="button"　class="btn　btn-default">Botão　5</button>
	<button　type="button"　class="btn　btn-default">Botão　6</button>
</div>
<div　class="btn-group　btn-group-xs">
	<button　type="button"　class="btn　btn-default">Botão　7</button>
	<button　type="button"　class="btn　btn-default">Botão　8</button>
	<button　type="button"　class="btn　btn-default">Botão　9</button>
</div>
</body>
</html>
Teste e veja ‹/›

Os resultados estão conforme mostrado a seguir:

嵌套

Você pode anexar outro grupo de botões dentro de um grupo de botões, ou seja, dentro de um .btn-group 嵌套 .btn-group 。Quando você quiser usar o menu suspenso com uma série de botões, usará este.

exemplo online

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
	<title>Bootstrap　exemplo　-　nested　button　group</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">botão　1</button>
	<button　type="button"　class="btn　btn-default">botão　2</button>
	<div　class="btn-group">
		<button　type="button"　class="btn　btn-default　dropdown-toggle"　data-toggle="dropdown">
			Clique para Expandir
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="#">Link Suspensível　1</a></li>
			<li><a href="#">Link Suspensível　2</a></li>
		</ul>
　　</div>
</div>
</body>
</html>
Teste e veja ‹/›

Os resultados estão conforme mostrado a seguir:

vertical　button　group

Os seguintes exemplos demonstram as classes discutidas na tabela acima .btn-group-vertical usando：

exemplo online

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
　　　<title>Bootstrap　exemplo　-　vertical　button　group</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-vertical">
	<button　type="button"　class="btn　btn-default">botão　1</button>
	<button　type="button"　class="btn　btn-default">botão　2</button>
	<div　class="btn-group-vertical">
		<button　type="button"　class="btn　btn-default　dropdown-toggle"　data-toggle="dropdown">
			Clique para Expandir
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="#">Link Suspensível　1</a></li>
			<li><a href="#">Link Suspensível　2</a></li>
		</ul>
	</div>
</div>
</body>
</html>
Teste e veja ‹/›

Os resultados estão conforme mostrado a seguir:

Menu Suspensível de Botões BootstrapMenu Suspensível Bootstrap