As dicas de design web responsivo CSS do Bootstrap que todas as pessoas deveriam saber. Descubra porque razão, as coisas desta forma.
Quer você seja um Designer Web, Webmaster ou Blogger, convém saber mais sobre design web responsivo, dicas CSS e Bootstrap. Temos várias dicas simples, mas eficazes, que vão retirar todas as suas dúvidas, antes que você pense em como você não sabia disso.
Depois de termos publicado a parte 1 sobre Bootstrap, está de na hora de revelar mais dicas, para que você domine o assunto.
Definindo Largura de Coluna adequada
O Bootstrap usa percentagens (%) como a unidade para definir as larguras das colunas, ajudando com a capacidade de resposta. Conforme mencionado acima, existem 4 categorias diferentes de pontos de interrupção baseados em dispositivos. Cada categoria tem suas próprias classes definidas para colunas de diferentes tamanhos
- Dispositivos extra pequenos usam .col-xs-*.
- Os dispositivos pequenos usam .col-sm-*.
- Os dispositivos médios usam .col-md-*.
- Dispositivos grandes usam .col-lg-*.
O caracter de asterisco (*) é substituído por um número. Por exemplo, .col-xs-6 cria uma coluna 6 vezes o tamanho de uma coluna .col-xs-1 ; .col-sm-4 cria uma coluna quatro vezes o tamanho de .col-sm-1, e assim por diante.
Por padrão, todas as colunas não possuem largura definida, que padrão é largura: auto. No entanto, dentro das consultas de mídia, o Bootstrap fornece valores de largura para cada classe de coluna.
Aqui está um trecho do Bootstrap CSS para as classes de coluna com asteriscos substituindo os tamanhos por brevidade (xs, sm, md, etc.):
Vamos analisar o código acima. Uma classe .col-lg-6 terá uma largura de 50% em dispositivos grandes, mas quando vista em dispositivos médios, pequenos e extra-pequenos, a width: auto é usada. Isso garante que as colunas sejam convertidas em um layout empilhado (em vez de lado a lado) em dispositivos menores.
Tabelas responsivas
As tabelas, usadas para exibir dados tabulares, também são sensíveis no Bootstrap.
Para usar estilos de tabela Bootstrap, usamos a classe .table, que possui o seguinte CSS:
Bootstrap força tabelas para ajustar a largura do elemento pai aplicando uma largura de 100%. Mas isso tem um problema. Uma tabela de várias colunas será espremida em dispositivos menores e pode não ser legível.
Bootstrap tem outra classe para remediar isso: .table-responsive. Aqui está o CSS:
Esses estilos fazem com que a tabela se torne rolável no eixo horizontal em dispositivos menores.
Imagens responsivas
Trabalhar com imagens maiores pode ser um problema para dispositivos menores. O Bootstrap usa uma classe de .img-responsive para tornar qualquer imagem sensível:
Esta combinação de max-width: 100% e height: auto assegurará a redução das imagens proporcionalmente em dispositivos menores, mantendo-se dentro das restrições do elemento pai em dispositivos maiores.
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 idéias – crie novas!