Usando os componentes do Bootstrap

Bootstrap Tem duas grandes bases sólidas que nos dão um ponto de partida padrão para as diferentes soluções de web design que precisamos ou queremos fazer, são o Grid e o CSS básico, com essas duas ferramentas podemos construir uma grande base central onde podemos coloque-o para descansar todos os diferentes elementos que constituem a nossa interface.
Como todas as bases, estas sozinhas não fazem o resto da construção, para atingir um maior grau de sofisticação e detalhamento é necessário utilizar componentes adicionais que estão localizados em nossa base e é claro que sua potência será afetada pela solidez. deste último.
Em caso de Bootstrap Temos vários componentes que nos ajudam a maximizar o detalhe dos nossos designs, componentes que vão desde ícones, painéis, até cabeçalhos. Elementos que nos ajudam a diferenciar e destacar nossa aplicação de outras.
Os componentes em Bootstrap Eles podem ser usados ​​em nossas páginas independentemente dos demais, ou seja, podemos gerar quantos componentes precisarmos em um único documento sem que entrem em conflito com os demais.
Além disso, o estilo básico por padrão já está pré-definido, para que possamos construir nossa aplicação rapidamente e sem muito esforço, onde no final podemos customizar toda a nossa aplicação alterando o estilo base para nossos próprios estilos.
Os componentes podem ser de CSS, JavaScript ou ambos, então alguns além do CSS Base eles exigirão bibliotecas de terceiros, como jQuery, isso pode parecer um tanto desconfortável, mas a realidade é que a implementação é tão simples que nem perceberemos que estamos usando mais coisas do que o que é fornecido por padrão Bootstrap.
Um dos primeiros componentes que precisamos entender são os ícones, já que com esses pequenos pedaços de imagem podemos fazer o usuário entender a funcionalidade de qualquer parte do nosso design, assim quando vemos um ícone de um grande X sabemos que está relacionado ao fechamento da seção atual ou no caso de vermos um ícone na forma de + saberemos que é para acrescentar algo.
GlifosEm Bootstrap existe uma biblioteca de ícones Glifos, muito popular em web design e que nos oferece praticamente um ícone para cada ação que podemos realizar em uma página web, isso nos dá muito trabalho, já que não precisamos ficar pensando em procurar alguém para desenhar peças gráficas que atendam esses propósitos.
Na imagem a seguir podemos ver os ícones que temos diretamente no site da Bootstrap:

PROLONGAR

Esta é apenas uma pequena amostra dos ícones que temos disponíveis, mas se navegarmos na página oficial veremos todas as opções que temos para nosso uso.
O uso desses ícones é muito simples, basta adicionar a classe glifício para o elemento HTML e, em seguida, adicione a classe do ícone correspondente da lista disponível. Os ícones são geralmente adicionados a itens como ou desde assim certificamo-nos de que são apenas visuais, obtendo assim o melhor resultado possível. Vejamos então no código a seguir um exemplo de como usar este componente em HTML.

 Usando os glifos no bootstrap
Pagar em
Correspondência
Comercial
Caixote de reciclagem
Fechar Sessão

Neste código, simplesmente colocamos as inclusões de nossas bibliotecas de Bootstrap correspondente, adicionando jQuery como uma biblioteca de terceiros e, em seguida, adicione a biblioteca js do Bootstrap, é importante manter essa ordem, pois a biblioteca js de Bootstrap necessidade de jQuery e se for incluído, isso nos dará um erro na implementação.
Em seguida, em nosso, criamos algumas seções onde adicionamos o GlifosPara nossos propósitos, colocar os ícones dentro da etiqueta foi suficiente. Se executarmos em nosso navegador, obteremos o seguinte resultado:

Como podemos ver, os ícones acompanham as mensagens dando-lhes mais peso e compreensão, por exemplo na caixa de pesquisa se alguém não fala inglês não vai entender a mensagem procurarMas se você já usou sistemas de computador e vê o ícone da lupa imediatamente, sabe que se refere a pesquisas, esse é o verdadeiro poder deste componente.
Outro componente importante são as guias de navegação, que nos permitem organizar nosso conteúdo na mesma página, evitando consumir muito espaço e facilitando a vida do usuário por não ter que aprender um grande número de seções em nossa aplicação web.
Para usar essas guias, precisamos da ajuda da classe nav, isso o que ele faz é remover o estilo padrão de HTML dos elementos e seus filhos , facilitando assim o uso e sua posterior adaptação ao nosso design. Para usar isso, simplesmente temos que adicionar as classes nav Y nav-tabs para um elemento e com isso obteremos o resultado adequado.
Vamos ver o código a seguir onde implementamos esta solução, como no exemplo anterior, devemos incluir os arquivos bootstrap.css, bootstrap-theme.css, bootstrap.js Y jquery.js, vamos ver nosso código:

 Usando os glifos no bootstrap

Segurança
Registros
Conteúdo

Como notamos o uso do elemento com esta classe nos permite fazer uma estrutura HTML normal, mas o resultado como veremos a seguir nos dá outra forma de organizar as informações. Podemos destacar outro aspecto interessante do nosso código e é a combinação do Glifos com esta solução, demonstrando o que explicamos sobre a independência dos elementos.

PROLONGAR

Outro componente muito útil são os menus suspensos, que nos permitem condensar muitas opções em um pequeno espaço, especialmente para aquelas páginas da web que têm muitas categorias que precisam ser organizadas.
SuspensoO componente de Bootstrap quem lida com isso é chamado Suspenso e como o componente anterior é aplicado no elemento entretanto, sua construção é um pouco mais complexa, embora não ultrapasse o estilo de trabalho HTML.
Devemos primeiro ter um elemento que é o cabeçalho da lista suspensa, então devemos ter o que conterá as opções a serem exibidas. Para isso vamos reformular o exemplo anterior para adicionar um drop-down na aba de conteúdo, com isso podemos entender melhor nosso exemplo.
Para resumir um pouco, vamos apenas mostrar o conteúdo do já que o cabeçalho será o mesmo. Vamos ver o código para a funcionalidade do nosso menu suspenso:

Segurança
Registros
Conteúdo

Vídeos
Imagens
Áudio

Então, vemos como em um elemento começamos a lista suspensa com a classe suspenso, então, dentro disso, definimos um elemento como o gatilho de opção ao adicionar a classe dropdown-toggle e finalmente criamos um o que a classe tem menu suspenso para identificar que tem todas as opções que veremos. Se executarmos nosso exemplo no navegador, obteremos o seguinte resultado:

PROLONGAR

Claro que isso é apenas uma pequena parte do que podemos alcançar, já que é possível incluir mais efeitos e com estilos diferentes alterar o visual destes. Com isso terminamos este tutorial, onde vimos três dos componentes mais úteis que podemos usar em Bootstrap, conseguindo assim uma personalização muito maior da nossa aplicação.