Praticamente qualquer pessoa que tenha interesse no design de sites deve dedicar algum tempo a aprender Bootstrap. Ao lado de um certificado de conclusão jQuery, é uma das proficiências mais importantes que um criador pode possuir.
A codificação está no seu cerne, tudo se resume a encontrar o método mais elegante e eficiente para alcançar os seus objetivos, e a estrutura do Bootstrap pode ajudar muito com isto. É uma das estruturas mais fáceis e mais utilizadas, e vem com uma tonelada de características diferentes que podem reduzir o processo de ter de escrever CSS complexos e integrar funções JavaScript mais avançadas.
Contudo, talvez a maior vantagem do Bootstrap é que o código escrito nesta estrutura é responsivo pelo design. À medida que a compatibilidade entre plataformas se torna cada vez mais necessária, os programadores que se empenham em aprendem Bootstrap estão bem posicionados para criar conteúdos a que todos os seus usuários possam acessar prontamente.
Tentar aprender Bootstrap não precisa ser um processo difícil. Dessa forma, iremos te ajudar a aprender algumas das coisas mais importantes que pode conseguir com o Bootstrap, para que possa se tornar um codificador mais proficiente e estar pronto para enfrentar tarefas mais difíceis como ganhar o seu certificado de conclusão jQuery.
Criar uma barra de navegação
Criar uma barra de navegação básica é tão simples como aplicar a tag de navegação Bootstrap ao seu HTML. No seu formato mais básico, uma barra de navegação parece-se com nav class=”navbar navbar-default”. Uma barra de navegação tradicional terá tipicamente algumas outras classes aninhadas na tag de navegação principal. Assim, você pode organizar o conteúdo da barra de navegação colocando em um contêiner dive e depois aninhando elementos dentro deste.
Normalmente, deseja-se criar uma classe de cabeçalho usada para exibir o nome do aplicativo ou do site, um logotipo, ou outro identificador de marca. Os links que irão compor a barra de navegação devem ser organizados como links numa lista não ordenada. Dessa forma, os bootstraps preenchem automaticamente a lista na horizontal por padrão. Com essa estrutura em vigor, poderá atribuir os fundamentos do seu design através do CSS tradicional. Como é normalmente o caso, você vai querer fazer uso de definições de classe claras, mas limpas para evitar confusão e tornar mais fácil a alteração da barra de navegação.
Existem várias classes fáceis incorporadas para se aprender no Bootstrap que lhe permitem ajustar facilmente o formato destas barras de navegação. As classes Bootstrap como navbar-right permitem-lhe justificar o alinhamento, enquanto uma variedade de opções fixas lhe permitem assegurar que a barra bloqueia no lugar, independentemente do local onde o usuário navegue na página. Existem várias classes de Bootstrap que funcionam de forma inteligente em conjunto com as barras de navegação, ao passo que encontrar a mistura certa de componentes exigirá brincar com elas.
Criação de um menu dropdown
Uma barra de navegação pode fazer muito para aumentar a acessibilidade do usuário de um site ou aplicativo. Os menus suspensos lhe permitem obter mais utilização da sua barra de navegação Bootstrap, permitindo expandir os componentes da barra com um clique ou uma rolagem.
Se pretende adicionar a funcionalidade de um menu dropdown, pode fazê-lo com duas simples adições ao seu código de barras de navegação existente. Primeiro, você deve certificar-se de que o div que contém os elementos é caracterizado com a classe suspensa Bootstrap. Além disso, atribua um elemento de dados às ligações dentro da sua lista a que pretende atribuir a funcionalidade dropdown.
Isto requer a adição de um valor de “dropdown” e uma classe de “dropdown-toggle”. Estes elementos precisam então de ser aninhados com as suas próprias listas de hiperligações que constituem o menu de expansão. Funcionalmente, estes funcionam exatamente da mesma forma que o seu elemento principal.
Estas poucas classes simples para aprender no Bootstrap criarão a funcionalidade de um dropdown. Contudo, por uma questão de interação com o usuário, você vai querer se certificar de que as pessoas reconhecem quais as ligações que oferecem dropdowns e quais as que não oferecem. Você pode conseguir isto escondendo um elemento atribuído à classe Boostrap “caret” dentro da ligação. Estes fundamentos de Bootstrap podem ser aplicados a qualquer número de elementos diferentes para criar uma funcionalidade dropdown avançada fora da barra de navegação Bootstrap ou dentro de componentes mais especializados de uma barra de navegação.
Criação de janelas modais
Os modais para aprender em Bootstrap são compostos por dois componentes necessários: o próprio modal e o gatilho que o executa. Embora os botões sejam um dos elementos mais comuns para desencadear um modal, qualquer número diferente de elementos – incluindo botões, imagens, ou formas – também pode ser utilizado. Criar um gatilho é tão simples como atribuir dois atributos de Bootstrap ao elemento. Você vai precisar de um atributo data-toggle com o valor “modal” e atribuir o data-target com a ID do seu modal.
O próprio modal deve ser atribuído como um div. No seu mais básico, só precisa de conter o ID de referência ao seu CSS, contudo, a inclusão de atributos de classe e função pode proporcionar ao modal efeitos adicionais e melhorar a sua acessibilidade. Uma vez que este esqueleto esteja no lugar, poderá apenas aninhar o conteúdo do seu modal. Embora isto possa ser tão simplista ou complexo quanto desejar, é geralmente recomendado que decomponha a estrutura do seu modal em um cabeçalho, corpo e rodapé.
Independentemente do que vai dentro do modal Bootstrap, é importante que coloque um atributo “data-dismiss” com o valor de “fechar” em algum lugar no modal. Isto pode tomar a forma de um botão ou algo mais complexo como um formulário de entrada. Entretanto, sem este atributo, os seus usuários não terão forma de se livrarem do modal uma vez que este apareça na tela.
Ainda há muito que aprender no Bootstrap
Barras de navegação, menus dropdown e modais são apenas alguns dos usos para se aprender no Bootstrap, e são uma grande introdução aos fundamentos da estrutura. Quanto mais se aprender Bootstrap, mais se compreenderá a versatilidade da estrutura.
No entanto, o Bootstrap é apenas uma utilidade no kit de ferramentas dos programadores. Passar a outras proficiências como ganhar o seu certificado de conclusão jQuery pode melhorar a sua gama como programador, simplificar muito a sua carga de trabalho, e torná-lo mais interessante para potenciais empregadores.