O Botão Bootstrap é um elemento muito utilizado nas páginas feitas em Bootstrap. Contudo, antes disso é necessário saber como utilizar e instalar o Bootstrap. Você pode estar utilizando o template inicial recomendado pelo próprio site do Bootstrap:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<!-- Meta tags Obrigatórias -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Olá, mundo!</title>
</head>
<body>
<h1>Olá, mundo!</h1>
<!-- JavaScript (Opcional) -->
<!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html> Enfim, tendo instalado o Bootstrap, podemos então prosseguir para os assuntos sobre o botão Bootstrap. Neste artigo veremos:
- O que é um Botão Bootstrap
- Botão do boostrap Básico
- Botões Outline
- Tamanhos do Botão Bootstrap
- Estado Ativo e Desativo
- CheckBox e Radios
- Botão DropDown
O que é um Botão Bootstrap
Os botões Bootstrap são botões personalizados, com suporte a tamanhos, estilos e muito mais. Portanto, são utilizados dentro de formulários, diálogos ou outras coisas.
O Bootstrap possui vários estilos de botões pré-definidos para diversos propósitos, além de outros recursos extras para mais controle.
A classe .btn
A classe .btn é a classe que define um botão no Bootstrap. Originalmente, criado para ser utilizado junto ao elemento <button>. Porém, é possível utilizar com outros elementos, como os links <a> e os inputs <input>.
Quando usando classes de botão em elementos link <a> que funcionam como gatilhos in-page (igual aos conteúdos colapsáveis), estas âncoras devem receber o atributo role=”button” para indicar seu propósito a tecnologias assistivas, como navegadores.
Botão do Boostrap Básico
Vamos verificar o código abaixo contendo exemplos simples de botões do Bootstrap:
<button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-link">Link</button>
Com isso, obtemos então o resultado dos botões abaixo:
Observe também, que além da classe .btn, foi utilizado uma segunda classe, que é a classe que define o estilo e cor do botão Bootstrap.
As cores são definidas baseados em padrões de tecnologia assistida. Porém, podemos usar quaisquer uma delas para qualquer objetivo.
Vamos ver agora o exemplo abaixo usando o botão Bootstrap dentro da tag link e das tags inputs:
<a class="btn btn-primary" href="#" role="button">Link</a> <button class="btn btn-primary" type="submit">Botão</button> <input class="btn btn-primary" type="button" value="Input"> <input class="btn btn-primary" type="submit" value="Submit"> <input class="btn btn-primary" type="reset" value="Reset">
O resultado do exemplo acima será então:
Botões Outline
Caso queira utilizar o botação só que sem uma cor de fundo, é possível então utilizar as classes originais acrescentando .btn-outline-…
. Segue o exemplo conforme o código abaixo:
<button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-light">Light</button> <button type="button" class="btn btn-outline-dark">Dark</button>
Desta forma, temos então o seguinte resultado:
Tamanhos do Botão Bootstrap
O Botão Bootstrap também permite a estilização do seu tamanho, podendo ser um tamanho maior ou menor que o original.
Para os botões ficarem maiores, é necessário utilizar a classe btn.lg, já para os botões menores, utiliza-se a classe btn-sm.
Vejamos então os exemplos abaixo:
<button type="button" class="btn btn-primary btn-lg">Botão grande</button> <button type="button" class="btn btn-primary">Botão normal</button> <button type="button" class="btn btn-primary btn-sm">Botão pequeno</button>
Dessa forma, observe abaixo os diferentes tamanhos para o botão Bootstrap:
Podemos ainda criar um botão que ocupe um bloco inteiro do tamanho do elemento pai, os btn-block:
<div style="width: 500px;">
<button type="button" class="btn btn-primary btn-lg btn-block">Botão block-level</button>
</div> Observe que no exemplo anterior, delimitamos uma largura de 500px para a div pai. Portanto, dessa forma, nosso botão terá o mesmo comprimento conforme a imagem abaixo:
Estado Ativo e Desativo
Os botões também podem receber um estado de ativado ou de desativado.
Quando ativados, ou seja, pressionado, significa que eles estão ativados. No caso do elemento <button>, não é necessário usar essa classe, pois, a mesma já possui uma pseudo-classe que realiza essa operação. Já para outros elementos, você pode forçar essa aparência incluindo a classe .active ou o atributo aria-pressed=”true”.
Vejamos então o exemplo abaixo:
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Link primário</a> <a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
O resultado será conforme a imagem posterior:
Já para desativar um botão utilize o atributo disabled em qualquer elemento <button>. O Elemento <a> não suporta este atributo, portanto, é necessário utilizar a c.asse disabled. Dessa forma, vejamos o exemplo abaixo:
<button type="button" class="btn btn-lg btn-primary" disabled>Botão primário</button> <button type="button" class="btn btn-secondary btn-lg" disabled>Botão</button> <br><br> <a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link primário</a> <a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
Portanto, teremos então o seguinte resultado:
CheckBox e Radios
Também é possível utilizar um botão Bootstrap para checkbox e para radios. Vejamos o exemplo abaixo para checkbox:
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="checkbox" checked autocomplete="off"> Checado
</label>
</div> Dessa forma, observe então que a classe btn foi colocada dentro do label, e não no input.
Com isso, temos o resultado como na imagem abaixo:
Vejamos então para o caso de um grupo de inputs do tipo radio:
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Ativo
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div> Com isso, teremos então o exemplo da imagem a seguir:
Botão DropDown
Você também pode estar criando botões do tipo dropdown no boostrap.
Vejamos o exemplo abaixo:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Botão dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Alguma ação</a>
<a class="dropdown-item" href="#">Outra ação</a>
<a class="dropdown-item" href="#">Alguma coisa aqui</a>
</div>
</div> Dessa forma, o resultado será como nas imagens abaixo:
Posteriormente, quando selecionado, aparece a lista dropdown:
Você pode estar explorando mais sobre os dropdowns, na documentação oficial do Bootstrap.
