Bootstrap - Botões
Este capítulo cobre a idade de uso do botão Bootstrap com exemplos. Qualquer coisa que tenha uma classe de.btnirá herdar a aparência padrão de um botão cinza com cantos arredondados. No entanto, o Bootstrap fornece algumas opções para definir o estilo dos botões, que estão resumidas na tabela a seguir -
| Sr. Não. | Classe e descrição |
|---|---|
| 1 | btn Botão padrão / padrão. |
| 2 | btn-primary Fornece peso visual extra e identifica a ação principal em um conjunto de botões. |
| 3 | btn-success Indica uma ação bem-sucedida ou positiva. |
| 4 | btn-info Botão contextual para mensagens de alerta informativas. |
| 5 | btn-warning Indica que cuidado deve ser tomado com esta ação. |
| 6 | btn-danger Indica uma ação perigosa ou potencialmente negativa. |
| 7 | btn-link Retire a ênfase de um botão fazendo-o parecer um link enquanto mantém o comportamento do botão. |
O exemplo a seguir demonstra todas as classes de botão acima -
<!-- Standard button -->
<button type = "button" class = "btn btn-default">Default Button</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type = "button" class = "btn btn-primary">Primary Button</button>
<!-- Indicates a successful or positive action -->
<button type = "button" class = "btn btn-success">Success Button</button>
<!-- Contextual button for informational alert messages -->
<button type = "button" class = "btn btn-info">Info Button</button>
<!-- Indicates caution should be taken with this action -->
<button type = "button" class = "btn btn-warning">Warning Button</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type = "button" class = "btn btn-danger">Danger Button</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type = "button" class = "btn btn-link">Link Button</button>Tamanho do botão
A tabela a seguir resume as classes usadas para obter botões de vários tamanhos -
| Sr. Não. | Classe e descrição |
|---|---|
| 1 | .btn-lg Isso torna o tamanho do botão grande. |
| 2 | .btn-sm Isso torna o tamanho do botão pequeno. |
| 3 | .btn-xs Isso torna o tamanho do botão muito pequeno. |
| 4 | .btn-block Isso cria botões de nível de bloco - aqueles que se estendem por toda a largura de um pai. |
O exemplo a seguir demonstra isso -
<p>
<button type = "button" class = "btn btn-primary btn-lg">
Large Primary button
</button>
<button type = "button" class = "btn btn-default btn-lg">
Large button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary">
Default size Primary button
</button>
<button type = "button" class = "btn btn-default">
Default size button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-sm">
Small Primary button
</button>
<button type = "button" class = "btn btn-default btn-sm">
Small button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-xs">
Extra small Primary button
</button>
<button type = "button" class = "btn btn-default btn-xs">
Extra small button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-lg btn-block">
Block level Primary button
</button>
<button type = "button" class = "btn btn-default btn-lg btn-block">
Block level button
</button>
</p>Estado do Botão
O Bootstrap fornece classes que permitem alterar o estado dos botões como ativo, desabilitado etc., cada uma das quais é discutida nas seções a seguir.
Estado ativo
Os botões aparecerão pressionados (com fundo mais escuro, borda mais escura e sombra inserida) quando ativos. A tabela a seguir resume as classes usadas para tornar ativos os elementos de botão e âncora -
| Elemento | Classe |
|---|---|
| Elemento de botão | Usar .active classe para mostrar que está ativado. |
| Elemento âncora | Usar .active classe para <a> botões para mostrar que está ativado. |
O exemplo a seguir demonstra isso -
<p>
<button type = "button" class = "btn btn-default btn-lg ">
Default Button
</button>
<button type = "button" class = "btn btn-default btn-lg active">
Active Button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-lg">
Primary button
</button>
<button type = "button" class = "btn btn-primary btn-lg active">
Active Primary button
</button>
</p>Estado desativado
Quando você desativa um botão, a cor dele desbota em 50% e perde o gradiente.
A tabela a seguir resume as classes usadas para desativar o elemento botão e o elemento âncora -
| Elemento | Classe |
|---|---|
| Elemento de botão | Adicione o disabled atributo para botões <button>. |
| Elemento âncora | Adicione o disabled classe para <a> botões. Note- Esta classe mudará apenas a aparência do <a>, não sua funcionalidade. Você precisa usar JavaScript personalizado para desativar os links aqui. |
O exemplo a seguir demonstra isso -
<p>
<button type = "button" class = "btn btn-default btn-lg">
Default Button
</button>
<button type = "button" class = "btn btn-default btn-lg" disabled = "disabled">
Disabled Button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-lg">
Primary button
</button>
<button type = "button" class = "btn btn-primary btn-lg" disabled = "disabled">
Disabled Primary button
</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">
Disabled Link
</a>
</p>
<p>
<a href = "#" class = "btn btn-primary btn-lg" role = "button">
Primary link
</a>
<a href = "#" class = "btn btn-primary btn-lg disabled" role = "button">
Disabled Primary link
</a>
</p>Tags de botão
Você pode usar classes de botão com o elemento <a>, <button> ou <input>. Mas é recomendado que você o use com elementos <button> principalmente para evitar problemas de inconsistência entre navegadores.
O exemplo a seguir demonstra isso -
<a class = "btn btn-default" href = "#" role = "button">Link</a>
<button class = "btn btn-default" type = "submit">Button</button>
<input class = "btn btn-default" type = "button" value = "Input">
<input class = "btn btn-default" type = "submit" value = "Submit">