freeCodeCamp/guide/portuguese/bootstrap/buttons/index.md

2.7 KiB

title localeTitle
Buttons Botões

Botões

A estrutura do Bootstrap fornece várias opções de estilo para botões. Esses estilos ajudam você a fornecer uma representação visual ao usuário do que o botão pode fazer.

Como usar:

Para usar os botões de bootstrap, você segue as mesmas etapas para criar um botão em HTML, exceto que também aplica a classe CSS aplicável ao botão. Um exemplo de código foi fornecido abaixo.

Exemplo de código:

<button type="button" class="btn btn-primary">Primary</button>

Primário

Você também pode usar botões de bootstrap com os elementos <a> e <input> , conforme mostrado nos exemplos abaixo.

<a class="btn btn-primary" href="#" role="button">This button is a link</a>

Este botão é um link

<input class="btn btn-primary" type="submit" value="Submit">

Lista de Classes do Botão de Inicialização:

Esta é uma lista das classes CSS que o bootstrap fornece para os botões.

.btn Este é o botão básico do bootstrap.

Basic

.btn-default Este é o botão padrão do bootstrap.

Padrão

.btn-primary Este é o botão principal do bootstrap.

Primário

.btn-success Este é o botão de sucesso do bootstrap.

Sucesso

.btn-info Este é o botão de informações do bootstrap.

Info

.btn-warning Este é o botão de aviso do bootstrap.

Aviso

.btn-danger Este é o botão de perigo do bootstrap.

perigo

.btn-link Este é o botão de link do bootstrap.

Ligação

.btn-light Este é o botão de luz do bootstrap.

Leve

Tamanhos de botão de inicialização:

Esta é uma lista das classes CSS para tamanhos diferentes dos botões.

.btn-lg Este é o botão grande do bootstrap.

ampla

.btn-sm Este é o pequeno botão do bootstrap.

Pequeno

.btn-xs Este é o botão extra pequeno do bootstrap.

Muito pequeno

Bootstrap Delineou Botões:

É possível também ter botões delineados em vez de totalmente coloridos nos botões. Isso é conseguido colocando o outline correção intermediária entre a classe de botão desejada. Um uso de amostra seria o seguinte:

<button type="button" class="btn btn-outline-primary">Primary</button>

Os botões descritos fazem parte do Bootstrap desde a versão 4, por favor, certifique-se de que você está usando a versão correta, caso não consiga fazê-los funcionar.

Nota: Não inclua o ponto no Atributo de Classe HTML, referindo-se às classes com um ponto só é usado ao ajustar as classes em CSS.

Mais Informações: