Bootstrap 4 Botões
Estilos de botões
O Bootstrap 4 fornece diferentes estilos de botões:
Exemplo
<button type="button" class="btn">Basic</button>
<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-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button
type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
As classes de botão podem ser usadas em elementos <a>, <button>, ou
<input>:
Exemplo
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
Por que colocamos um # no atributo href do link?
Como não temos nenhuma página para vinculá-lo e não queremos receber uma mensagem "404", colocamos # como o link. Na vida real, é claro que deveria ser um URL real para a página "Pesquisar".
Esboço do botão
O Bootstrap 4 fornece oito botões de contorno/borda:
Exemplo
<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-info">Info</button>
<button
type="button" class="btn btn-outline-warning">Warning</button>
<button
type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button
type="button" class="btn btn-outline-light text-dark">Light</button>
Tamanhos de botão
Use a .btn-lgclasse para botões grandes ou .btn-smclasse para botões pequenos:
Exemplo
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
Botões de nível de bloco
Adicione classe .btn-blockpara criar um botão de nível de bloco que abrange toda a largura do elemento pai.
Exemplo
<button type="button" class="btn btn-primary btn-block">Full-Width
Button</button>
Botões ativos/desativados
Um botão pode ser definido para um estado ativo (aparece pressionado) ou desativado (não pode ser clicado):
A classe .activefaz com que um botão pareça pressionado e o disabledatributo torna um botão não clicável. Observe que os elementos <a> não suportam o atributo disabled e, portanto, devem usar a .disabledclasse para fazê-lo parecer desabilitado visualmente.
Exemplo
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary
disabled">Disabled Link</a>
Botões giratórios
Você também pode adicionar "spinners" a um botão, sobre o qual você aprenderá mais em nosso Tutorial BS4 Spinners :
Exemplo
<button class="btn btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
</button>
<button class="btn
btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button
class="btn btn-primary" disabled>
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span
class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>