Dicas de design web para tornar o seu site ou blog preparado para a Web Móvel. Aprenda a dominar o Bootstrap, para alcançar bons resultados. Leia as dicas!
Com o lançamento da versão 3, o Bootstrap melhorou bastante o seu suporte à web móvel, usando como base a sua estrutura já responsiva.
Que tipos de coisas o Bootstrap inclui em seu CSS para ajudar com isso? Vamos examinar algumas coisas e obter alguma visão que possa nos ajudar em nossos próprios projetos personalizados.
Definindo consultas adequadas de mídia
O Bootstrap tem pontos de interrupção claramente definidos para diferentes tipos de dispositivos, especificados usando consultas de mídia CSS. A seguir estão as categorias de ponto de interrupção utilizadas para os diferentes tipos de dispositivos:
- Dispositivos extra pequenos (por exemplo, telefones celulares) são o padrão, criando o conceito de “primeiro celular” no Bootstrap. Isso abrange dispositivos menores que 768px de largura.
- Os “Dispositivos pequenos” (por exemplo, comprimidos) são direcionados com @media (min-width: 768px) and (max-width: 991px) { … }.
- Dispositivos de tamanho médio (por exemplo computadores de mesa) tem um tamanho menor do que tela 1200px e maior do que 991px, @media (min-width: 992px) and (max-width: 1199px) { … }.
- Dispositivos maiores (por exemplo, monitores de tela larga) são maiores do que 1200 px, com o uso de @media (min-width: 1200px) { … }.
Nota: Os dispositivos móveis que usamos hoje vêm com 2 diferentes orientações de tela: Retrato e paisagem. Portanto, o acima é principalmente verdadeiro apenas para visualização de paisagens. Por exemplo, se você estiver usando um telefone Samsung Galaxy Note III, a visão da paisagem cai na categoria “Dispositivos pequenos”, enquanto que a exibição vertical ficaria em “Dispositivos extra pequenos”.
Esse tipo de categorização é comum em estruturas responsivas e é algo que você certamente pode se beneficiar de entender melhor.
O sistema de grade desmistificou
Se você está familiarizado com o sistema de grade da Bootstrap, você pode saber que existe uma estrutura HTML específica necessária para configurar corretamente suas redes. Vamos desmistificar.
Vamos primeiro dar uma olhada no HTML do Bootstrap para uma configuração de duas colunas:
Como mostrado acima, o sistema de grade da Bootstrap começa com um elemento de recipiente. .container definem quanto espaço um sistema de grade deve usar. Eles podem ser de dois tipos: container tem larguras diferentes para diferentes tipos de dispositivos enquanto que .container-fluid expande para ajustar a largura do dispositivo.
Com a ajuda de consultas de mídia, o Bootstrap oferece larguras diferentes para .container dependendo do tamanho do dispositivo:
- Dispositivos extra pequenos (<768px): width: auto (ou sem largura)
- Dispositivos pequenos (≥768px): width: 750px
- Dispositivos médios (≥992px): width: 970px
- Dispositivos maiores (≥1200px): width: 1170px
Aqui estão mais algumas declarações CSS que são aplicadas na classe .container
Como visto na imagem acima, .container impede que o conteúdo dentro do elemento toque na borda do navegador usando 15px de preenchimento em cada lado. Ele também garante que o recipiente seja centrado usando auto para margens esquerda e direita.
As linhas são outro elemento importante no sistema de grade da Bootstrap. Antes de criar colunas, você pode definir uma linha usando a classe .row. Aqui está um trecho do CSS do Bootstrap para a classe .row:
Como mostrado acima, nossa linha possui margens negativas esquerda e direita de -15px para permitir que a linha toque a borda de seu elemento de recipiente. Isso funciona como um invólucro para armazenar colunas, que podem somar até 12 em número.
Você deve ter notado que as margens sobre a linha parecem estar neutralizando a 15px de preenchimento aplicada ao recipiente. Se analisarmos as colunas, podemos ver por que isso é necessário.
Aqui está um trecho do CSS do Bootstrap para a classe .col-xs-6
Conforme mostrado, o preenchimento esquerdo e direito de 15px é aplicado às colunas, resultando em algo como a imagem abaixo:
Devido às margens negativas na linha, as colunas estão tocando as bordas da linha e as bordas do recipiente. Mas o preenchimento faz com que os conteúdos que entram nessas colunas permaneçam 15px longe das bordas do recipiente.
Os recipientes são usados para múltiplos propósitos, não apenas para o sistema de grade, portanto, o preenchimento de 15px ajuda a evitar que o conteúdo toque as bordas do navegador (ao usar .container-fluid). As fileiras têm as margens negativas para que elas não sejam empurradas pelo preenchimento do recipiente.
Se você está pensando em projetar sua própria estrutura, você pode querer considerar usar esta técnica de preenchimento / margem.
Conclusão
Essas dicas são apenas algumas coisas no Bootstrap 3. Além disso, você poderia estar interessado em alguns templates bootstrap. O site é a melhor maneira de testar suas ideias – crie novas!