Como codificar elementos básicos da página da Web com Bootstrap - dummies

< Além dos layouts puros, o Bootstrap também pode criar componentes da página da Web encontrados em quase todos os sites. A idéia aqui é a mesma coisa que quando se trabalha com layouts - em vez de recriar a roda sempre que projetar seu próprio botão ou barra de ferramentas, seria melhor usar o código pré-compilado, que já foi testado em vários navegadores e dispositivos.

Os exemplos a seguir mostram como criar rapidamente componentes da Web comuns.

Botões de design

Os botões são um elemento básico em muitas páginas da web, mas geralmente podem ser difíceis de configurar e de estilo. Como mostrado aqui, os botões podem ter vários tipos e tamanhos.

Código de inicialização para criar botões

Atributo

Predefinição de classe	Descrição	Tipo de botão
btn-defaultbtn-primarybtn-successbtn-danger	Tipo de botão padrão com efeito de deslocamento	Botão azul com efeito flutuante Botão verde com efeito flutuante Botão vermelho com efeito flutuante Tamanho do botão
btn-lgbtn-defaultbtn-sm	Botão grande tamanho	Tamanho do botão padrão Tamanho do botão pequeno Para criar um botão, escreva o seguinte código HTML:

Comece com o elemento

1. HTML. No botão de abertura << >
2. incluem tipo = "botão" . Inclua o atributo de classe com o valor do atributo de classe btn
3. e adicione prefixos de classe adicionais com base no efeito desejado. Para adicionar estilos adicionais, continue adicionando o nome do prefixo classe
4. no atributo classe HTML .

O código a seguir combina o tipo de botão e o tamanho do botão:

Botão principal grande

Botão padrão grande

Botão de sucesso padrão

Botão padrão padrão

Botão de perigo pequeno

Botão padrão pequeno

Tipos e tamanhos do botão Bootstrap.

Verifique o tipo de botão adicional, o tamanho do botão e outras opções de botão.

Navegando com barras de ferramentas

páginas da web com várias páginas ou visualizações geralmente possuem uma ou mais barras de ferramentas para ajudar usuários com navegação. Aqui estão algumas opções da barra de ferramentas.

Código de inicialização para criar barras de ferramentas de navegação

Atributo

Prefixo de classe	Descrição	Tipo de barra de ferramentas
separadores de navegação	pips de navegação Barra de ferramentas de navegação com guias	Comprimido, ou barra de ferramentas de navegação de botão sólido Tipo de botão da barra de ferramentas
desdobrável	menu suspenso do cursor inferior Botão ou guia como menu suspenso	ícone do menu suspenso da seta para baixo Desinstalar itens de menu Para criar uma barra de ferramentas de navegação de comprimidos ou sólidos, escreva o seguinte HTML:

Comece uma lista não ordenada usando o elemento

1. ul . Na tag
2. de abertura, inclua
   class = "nav nav-pills" . Crie botões usando a tag
   • . Inclua
   • class = "active" em uma tag de abertura para designar qual guia na barra de ferramentas principal deve aparecer como realçado visualmente quando o mouse paira sobre o botão.
   • Para criar um menu suspenso, anote uma lista desordenada. Veja o código ao lado do menu suspenso "Mais" com prefixos de classe
   • " , " cursor " e " menu suspenso " .

     Você pode vincular a outras páginas da Web em seu menu drop-down usando a marca . O código a seguir cria uma barra de ferramentas usando o Bootstrap:

Timeline

• Sobre
• Fotos
• Amigos
• Mais

• Lugares

  • Esportes
  • Música
  • Barra de ferramentas do Bootstrap com menus suspensos.

A classe

dropdown-toggle e o dados-toggle = "dropdown" atributo e valor funcionam juntos para adicionar menus suspensos a elementos como links. Confira as opções adicionais da barra de ferramentas. Adicionar ícones

Os ícones são freqüentemente usados ​​com botões para ajudar a transmitir algum tipo de ação. Por exemplo, seu programa de e-mail provavelmente usa um botão com um ícone de lixeira para excluir emails. Os ícones comunicam rapidamente uma ação sugerida aos usuários sem muita explicação.

Estes ícones são chamados

glifos, e Glyph Icons fornece os glifos usados ​​no Bootstrap. O Bootstrap suporta mais de 200 glifos, que você pode adicionar aos botões ou barras de ferramentas usando a marca

. O código de exemplo a seguir cria três botões com uma estrela, um clipe de papel e um glifo de lixeira. Star

Anexe

Trash

Botões de inicialização com ícones.

Verifique aqui os nomes de todos os glifos Bootstrap.