Tutorial básico Bootstrap

Plugins Bootstrap

Imagens do Bootstrap Formulários do Bootstrap

Botões do Bootstrap

Este capítulo explicará como usar botões Bootstrap com exemplos. Qualquer elemento com a classe .btn Os elementos herdarão o estilo padrão de botão arredondado cinza. No entanto, o Bootstrap oferece algumas opções para definir o estilo dos botões, conforme indicado na tabela a seguir:

Os seguintes estilos podem ser usados em elementos <a>, <button> ou <input>:

Classe	Descrição	Exemplo
.btn	Adicionar estilo básico ao botão	Experimente
.btn-default	Padrão/Botão padrão	Experimente
.btn-primary	Estilo de botão original (não operado)	Experimente
.btn-success	Indica uma ação bem-sucedida	Experimente
.btn-info	Este estilo pode ser usado para botões que exibem informações pop-up	Experimente
.btn-warning	Indica um botão que requer operação cautelosa	Experimente
.btn-danger	Indica uma operação de botão de ação perigosa	Experimente
.btn-link	Faça o botão parecer um link (ainda mantendo o comportamento do botão)	Experimente
.btn-lg	Faça um botão grande	Experimente
.btn-sm	Faça um botão pequeno	Experimente
.btn-xs	Faça um botão especialmente pequeno	Experimente
.btn-block	Botão de bloco (estica até o elemento pai)100% de largura)	Experimente
.active	O botão foi clicado	Experimente
.disabled	Botão desativado	Experimente

O exemplo a seguir demonstra todas as classes de botão mencionadas acima:

Exemplo online

Exemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Opções 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>
<!--　Botão padrão　-->
<button type="button" class="btn btn-default">Botão padrão</button>/button>
<!--　Oferece efeitos visuais adicionais, identificando uma ação original em um grupo de botões　-->
<button type="button" class="btn btn-primary">Botão original</button>/button>
<!--　Indica uma ação bem-sucedida ou positiva　-->
<button type="button" class="btn btn-<button class="success">Botão de sucesso</button>/button>
<!--　Botão de contexto de mensagem de aviso de informação　-->
<button type="button" class="btn btn-<button class="info">Botão de informação</button>/button>
<!--　Indica uma ação que deve ser tomada com cautela　-->
<button type="button" class="btn btn-<button class="warning">Botão de aviso</button>/button>
<!--　Indica uma ação perigosa ou negativa潜力　-->
<button type="button" class="btn btn-<button class="danger">Botão de perigo</button>/button>
<!--　Não enfatiza que é um botão, parece um link, mas mantém o comportamento do botão　-->
<button type="button" class="btn btn-<button class="link">Botão de link</button>/button>
</body>
</html>

Teste Veja ‹/›

Resultados conforme mostrado a seguir:

Tamanho do botão

A tabela a seguir lista as classes para obter botões de diferentes tamanhos:

Class	Descrição
.btn-lg	Isso fará com que o botão pareça um pouco maior.
.btn-sm	Isso fará com que o botão pareça um pouco menor.
.btn-xs	Isso fará com que o botão pareça especialmente pequeno.
.btn-block	Isso criará um botão de bloco que ocupará toda a largura do elemento pai.

O exemplo a seguir demonstra todas as classes de botão mencionadas acima:

Exemplo online

Exemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Tamanho do 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>
<p>
　　　<button type="button" class="btn btn-primary btn-lg">Botão original grande</button>/button>
　　　<button type="button" class="btn btn-default btn-lg">Botão grande</button>/button>
</p>
<p>
　　　<button type="button" class="btn btn-primary">Botão original de tamanho padrão</button>/button>
　　　<button type="button" class="btn btn-default">Botão de tamanho padrão</button>/button>
</p>
<p>
　　　<button type="button" class="btn btn-primary btn-sm">Botão original pequeno</button>/button>
　　　<button type="button" class="btn btn-default btn-sm">Botão pequeno</button>/button>
</p>
<p>
　　　<button type="button" class="btn btn-primary btn-xs">Botão original especialmente pequeno</button>/button>
　　　<button type="button" class="btn btn-default btn-xs">Botão especialmente pequeno</button>/button>
</p>
<p>
　　　<button type="button" class="btn btn-primary btn-lg btn-<button class="block">Botão de bloco original</button>/button>
　　　<button type="button" class="btn btn-default btn-lg btn-<button class="block">Botão de bloco</button>/button>
</p>
</body>
</html>

Teste Veja ‹/›

Resultados conforme mostrado a seguir:

Estado do botão

Bootstrap oferece classes para estados de botão como ativo, desativado, etc., que serão detalhadas a seguir.

Estado ativo

O botão ficará com a aparência de estar pressionado ao estar ativo (fundo escuro, borda escura, sombra).

A tabela a seguir lista as classes que ativam o elemento botão e o elemento âncora:

elemento	Class
elemento botão	Adicionar .active A classe é usada para mostrar que o botão está ativo.
elemento âncora	Adicionar .active A classe <a> é usada para mostrar que o botão está ativo.

O exemplo a seguir ilustra isso:

Exemplo online

Exemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Estado de ativação do 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>
<p>
	<button type="button" class="btn btn-default btn-lg">botão padrão/button>
　　　	<button type="button" class="btn btn-default btn-lg active">botão ativo/button>
</p>
<p>
　　　	<button type="button" class="btn btn-primary btn-lg">botão original/button>
　　　	<button type="button" class="btn btn-primary btn-lg active">botão original ativo/button>
</p>
</body>
</html>

Teste Veja ‹/›

Resultados conforme mostrado a seguir:

Estado de desativação

Quando você desativa um botão, sua cor se desbota 50%，e perde a gradiente.

A tabela a seguir lista as classes que permitem que o elemento botão e o elemento âncora sejam apresentados como desativados:

elemento	Class
elemento botão	Adicionar disabled Atributo ao botão <button>.
elemento âncora	Adicionar disabled class até o botão <a>.

O exemplo a seguir ilustra isso:

Exemplo online

Exemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Estado de desativação do 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>
<p>
　　　<button type="button" class="btn btn-default btn-lg">botão padrão/button>
　　　<button type="button" class="btn btn-default btn-lg" disabled="disabled">botão desativado/button>
</p>
<p>
　　　<button type="button" class="btn btn-primary btn-lg">botão original/button>
　　　<button type="button" class="btn btn-primary btn-lg" disabled="disabled">botão original desativado/button>
</p>
<p>
　　　<a href="#" class="btn btn-default btn-lg" role="button">link/a>
　　　<a href="#" class="btn btn-default btn-lg disabled" role="button">link desativado/a>
</p>
<p>
　　　<a href="#" class="btn btn-primary btn-lg" role="button">link original/a>
　　　<a href="#" class="btn btn-primary btn-lg disabled" role="button">link original desativado/a>
</p>
</body>
</html>

Teste Veja ‹/›

Resultados conforme mostrado a seguir:

Etiqueta do botão

Você pode usar a classe de botão em <a>、<button> ou <input> elementos. No entanto, é recomendado usar a classe de botão no elemento <button> para evitar problemas de incompatibilidade entre navegadores.

O exemplo a seguir ilustra isso:

Exemplo online

Exemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Etiqueta do 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>
<a class="btn btn-default" href="#" role="button">link/a>
<button class="btn btn-default" type="submit">botão</button>
<input class="btn btn-default" type="button" value="Entrada">
<input class="btn btn-default" type="submit" value="Enviar">
</body>
</html>

Teste Veja ‹/›

Resultados conforme mostrado a seguir:

Grupo de botões

Usando .btn diretamente dentro de div-group pode criar grupos de botões:

Exemplo online

Exemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Botão (Button) plugin botão de opção única/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="container">
　　<h2>Grupo de botões/h2>
　　<p>.btn-group classe para criar grupos de botões:</p>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　</div>
</div>
</body>
</html>

Teste Veja ‹/›

Usando .btn-group-lg|sm|xs para controlar o tamanho do grupo de botões:

Exemplo online

Exemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　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="container">
　　<h2>Grupo de botões Button　-　Definir tamanho do botão</h2>
　　<p>Usando .btn-group-*　Classe para controlar o tamanho dos botões no grupo de botões.</p>
　　<h2>Botão grande:</h2>
　　<div class="btn-group btn-group-lg">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　</div>
　　<h2>Tamanho padrão do botão:</h2>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　</div>
　　<h2>Pequeno botão:</h2>
　　<div class="btn-group btn-group-sm">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　</div>
　　<h2>Botões super pequenos:</h2>
　　<div class="btn-group btn-group-xs">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　</div>
</div>
</body>
</html>

Teste Veja ‹/›

Se quiser ajustar os botões na direção vertical, pode usar .btn-group-vertical para definir:

Exemplo online

Exemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　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="container">
　　<h2>Grupo de botões verticais</h2>
　　<p>Se quiser ajustar os botões na direção vertical, pode usar .btn-group-vertical para definir:/p>
　　<div class="btn-group-vertical">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　</div>
</div>
</body>
</html>

Teste Veja ‹/›

Grupo de botões ajustável

Pode ser feito através de .btn-group-justified para definir o grupo de botões ajustável.

Os seguintes exemplos usam a tag a para mostrar:

Exemplo online

Exemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　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="container">
　　<h2>Grupo de botões ajustável/h2>
　　<p>Pode ser feito através de .btn-group-justified" para definir o grupo de botões ajustável./p>
　　<div class="btn-group btn-group-justified">
　　　　<a href="#" class="btn btn-primary">Apple</a>
　　　　<a href="#" class="btn btn-primary">Samsung</a>
　　　　<a href="#" class="btn btn-primary">Sony</a>
　　</div>
</div>
</body>
</html>

Teste Veja ‹/›

Atenção: Se for o elemento <button>, você precisa usar .btn na camada externa-usar a classe .group para envolver:

Exemplo online

Exemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　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="container">
　　<h2>Grupo de botões ajustável/h2>
　　<div class="btn-group btn-group-justified">
　　　　<div class="btn-group">
　　　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　</div>
　　　　<div class="btn-group">
　　　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　</div>
　　　　<div class="btn-group">
　　　　　　<button type="button" class="btn btn-primary">Sony</button>
　　　　</div>
　　</div>
</div>
</body>
</html>

Teste Veja ‹/›

Grupo de botões com menu suspenso embutido

Os botões do grupo embutido podem ser configurados para menu suspenso, conforme exemplo a seguir:

Exemplo online

Exemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　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="container">
　　<h2>Grupo de botões embutidos/h2>
　　<p>Criar menu suspenso com grupo de botões embutidos：</p>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<div class="btn-group">
　　　　　　<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
　　　　　　Sony <span class="caret"></span></button>
　　　　　　<ul class="dropdown-menu" role="menu">
　　　　　　　　<li><a href="#">Tablet</a></li>
　　　　　　　　<li><a href="#">Smartphone</a></li>
　　　　　　</ul>
　　　　</div>
　　</div>
</div>
</body>
</html>

Teste Veja ‹/›

Separador de botões

Exemplo online

Exemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　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="container">
　　<h2>Separador de botões</h2>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　　　<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
　　　　　　<span class="caret"></span>
　　　　</button>
　　　　<ul class="dropdown-menu" role="menu">
　　　　　　<li><a href="#">Tablet</a></li>
　　　　　　<li><a href="#">Smartphone</a></li>
　　　　</ul>
　　</div>
</div>
</body>
</html>

Teste Veja ‹/›

Imagens do Bootstrap Formulários do Bootstrap