Isso parece bom, mas ainda não dissemos ao nosso index.html
arquivo para usar qualquer um desses arquivos. Para simplificar, vamos substituir o conteúdo desse arquivo por um arquivo html barebones primeiro:
jQuery e Bootstrap // Seu código aparecerá aqui.
Em seguida, basta arrastar e soltar cada arquivo da seção do navegador do projeto para o código, dentro do tags, como você pode ver no seguinte screencast. Certifique-se de que a referência ao jQuery apareça antes da referência ao Bootstrap porque o último depende do anterior:
É isso - você adicionou as referências para jQuery e Bootstrap e agora pode começar a escrever código.
Vamos agora adicionar uma barra de navegação e colocá-la no topo de nossa página. Sinta-se à vontade para incluir 4-5 vincula com texto fictício e não o vincula a nenhum documento por enquanto - apenas insira o seguinte trecho de código dentro do corpo do documento.
Não se esqueça de passar algum tempo familiarizando-se com o recurso de preenchimento automático do Netbeans, que mostrará as classes disponibilizadas pelo Bootstrap quando você começar a digitar.
No coração do trecho de código abaixo está o Bootstrap recipiente classe, que é usada para colocar o conteúdo dentro de um contêiner horizontal que será redimensionado automaticamente dependendo do tamanho da tela em que está sendo visualizado. Não menos importante é a classe de fluido de contêiner, que garantirá que o conteúdo interno ocupará toda a largura da tela.
Outro recurso distintivo do Bootstrap é que ele elimina a necessidade de tabelas no código HTML. Em vez disso, ele usa um sistema de grade para fazer o layout do conteúdo e torná-lo adequado em dispositivos grandes e pequenos (de telefones a grandes telas de desktops ou laptops).
No sistema de grade do Bootstrap, o layout da tela é dividido em 12 colunas:
Uma configuração típica consiste em usar o 12 colunas layout dividido em 3 grupos de 4 colunas cada, da seguinte forma:
Para indicar esse fato no código e para que seja exibido dessa forma começando em dispositivos de tamanho médio (como laptops) e acima, adicione o seguinte código abaixo do marcação:
...Este é o texto no GRUPO 1Este é o texto no GRUPO 2Este é o texto do GRUPO 3
Você provavelmente deve ter notado que as classes de coluna na grade do Bootstrap indicam o layout inicial para um tamanho de dispositivo específico e acima, como md neste exemplo significa meio (que também cobre lgou dispositivos grandes).
Para dispositivos menores (sm e xs), o conteúdo divs fica empilhado e aparece um acima do outro.
No screencast a seguir, você pode ver como sua página deve estar agora. Observe que você pode redimensionar a janela do seu navegador para simular diferentes tamanhos de tela após iniciar o projeto usando o botão Executar projeto, conforme aprendemos em Parte 1.
Parabéns! Você deve ter escrito uma página simples, mas funcional e responsiva agora. Não se esqueça de verificar o site do Bootstrap para se familiarizar com a funcionalidade quase ilimitada desta estrutura.
Como sempre, caso você tenha alguma dúvida ou comentário, não hesite em nos contatar através do formulário abaixo.