Neste post veremos o layout de um site Bootstrap para mostrar os incríveis recursos desse framework de código aberto. Dentro artigos anteriores havíamos instalado um ambiente de desenvolvimento e os plugins necessários para facilitar nosso trabalho.
Lembre-se de que como gerente de conteúdo do Linux Adictos Não me permite inserir o código dos exemplos que carreguei no GitHub. Para baixá-los você deve instalar o pacote Git em sua distribuição e então escrever os seguintes comandos:
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
Você precisará executar esses dois comandos periodicamente para baixar os novos arquivos.
Analisando o código
Agora, no explorador de arquivos, abra example2.html com VSCodium. (Abrir com o botão direito) Vemos o seguinte:
- Na linha 1, informamos ao navegador o tipo de documento para que ele saiba como renderizá-lo.
- A linha 2 indica o idioma do site, que informa ao navegador como representar determinados caracteres e o idioma do conteúdo para os mecanismos de busca, o que facilita o posicionamento. Em nosso código é definido como es, mas existem variantes regionais como es_ES para espanhol da Espanha ou es_AR para espanhol da Argentina.
- A partir da linha 3 temos um container de metadados localizado entre as tags S . Os metadados fornecem informações sobre o documento. Em nosso exemplo:
- A linha 4 indica o padrão usado para codificação de caracteres. Talvez você já tenha visto que, em vez de caracteres acentuados ou símbolos especiais, um ponto de interrogação dentro de um diamante é exibido. Isso ocorre porque o navegador usa codificação imprópria. A instrução na linha 8 evita isso declarando-o explicitamente.
- Na linha 5, informamos ao navegador como ele deve se adaptar a diferentes formatos de tela.
- O título que definimos na linha 6 será exibido na barra superior do navegador e nos motores de busca.
- Na linha 7, informamos ao navegador onde encontrar os elementos do framework Bootstrap relacionados ao estilo.
- A partir da linha 10 começa o container. O corpo inclui o conteúdo da página web e o link para os scripts Bootstrap que darão interatividade ao nosso site.
- A linha 13 indica o final do documento.
Layout de um site Bootstrap
Conceitos-chave para o layout de um site Bootstrap
Como dissemos em artigos anteriores, O Bootstrap adota a primeira abordagem móvel. Quando essa abordagem é aplicada, o design é feito com o dispositivo com o menor tamanho de tela em mente e, em seguida, são adicionadas camadas para adaptá-lo aos tamanhos a seguir.
Aqui devemos levar em conta dois conceitos-chave:
- Pontos de interrupção.
- Consultoria de mídia.
Os pontos de interrupção indicam de qual largura de tela o layout é modificado., As consultas de mídia aplicam parâmetros de estilo com base em determinadas características do navegador e do sistema operacional. Em outras palavras, cada ponto de interrupção terá um estilo correspondente.
O Bootstrap vem com seis pontos de interrupção predefinidos que podem ser modificados por programadores mais avançados. Os pontos padrão são:
- Extra Pequeno: Não possui um identificador predefinido e se aplica a telas com menos de 576 pixels de largura.
- Pequeno: É identificado com sm e é usado para telas a partir de 576 pixels.
- Médio: É identificado com md e é usado para telas a partir de 768 pixels.
- Comprimento: Identificado como lg é usado para telas a partir de 992 pixels.
- Extra longo: Possui o identificador lg e aplica os estilos a telas a partir de 1200 pixels.
- Extra extralongo: Marcado com o identificador xxl, é utilizado para aplicar o desenho em telas a partir de 1400 pixels.
Esses tamanhos não foram escolhidos casualmente como cada um dos pontos de interrupção pode conter contêineres cujas larguras são múltiplos de 12. Eles também não são direcionados a um dispositivo específico, mas se adaptam a diferentes categorias de dispositivos e tamanhos de tela.
Dentro dos diferentes tamanhos de tela encontramos os containers. Estes são responsáveis por hospedar, preencher e alinhar o conteúdo do site em um determinado dispositivo ou janela gráfica.
;