Uma básica introdução a respeito do que é o Bootstrap, fazendo referências sobre o que é a grid, conceito e metodologia de trabalho oriundos do mundo do design gráfico. Bem como uma rápida explicação do LESS, o que é e como funciona.
2. O Bootstrap
é:
Basicamente é um
coleção (framework) de
vários elementos e
funções personalizáveis
para desenvolvimento
de projetos web.
3. E as suas vantagens
são:
• Padronização de Interface e código
• Opensource
• Documentação detalhada
• Cross-browser
• Otimização para layouts responsivos
6. Definição
No design gráfico:
“Um grid é um conjunto específico de relações de
alinhamento que funcionam como guias para a
distribuição de elementos num formato.”
AGNER, Luiz- Fundamento do Grid
- http://pt.slideshare.net/agner/a-construo-do-grid
http://joeycofone.blogspot.com.br/2010/11/letter-to-grid.html
10. E suas
vantagens?
• Uniformidade, consistência, estética e identidade.
• Organização e clareza do conteúdo (hierarquia)
• Facilidade de distinção entre as diferentes
informações
http://design.blog.br/design-grafico/grids-o-que-sao-e-para-que-servem
13. Ok. E daí?
Com um sistema de grids bem aplicado, geralmente utilizando 12 colunas, você pode
padronizar a sua interface, tornando-a maleável às mudanças, além de conseguir criar “ritmo”,
proporcionando um “diálogo”.
http://thiagonasc.com/desenvolvimento-web/desenvolvendo-com-bootstrap-3-um-framework-front-end-que-vale-a-pena
14. O Básico
- Divide-se o layout num total de 12 colunas.
- Se você deseja quebrar em duas colunas,
ou mais, basta que o somatório seja igual a
12. Ex. Col-6 + Col-6 = Col-12. E assim
sucessivamente.
- Cada conjunto de colunas, inicialmente,
deve fazer parte de uma linha (.row).
- A cada linha você pode criar um conjunto
de colunas diferentes das linhas
antecessoras e/ou sucessoras
- A classe “.container” agrupa uma ou mais
conjunto de linhas (.rows).
- O conteúdo (texto, imagens, etc) deve ser
colocado dentro de colunas, e somente as
colunas podem ser filhos imediatos de
linhas.
http://thiagonasc.com/desenvolvimento-web/desenvolvendo-com-bootstrap-3-um-framework-front-end-que-vale-a-pena
16. As Classes
Para as diferentes resoluções, o bootstrap utiliza
uma classe específica:
Para um mesmo elemento,
você pode especificar
várias classes para se
adaptar a cada resolução.Acima de 1200px
Superior ou igual a 992px
.col-lg- (large)
.col-md- (medium)
Superior ou igual a 768px .col-sm- (small)
Até 767px .col-xs- (extra small)
17. Em código:
A largura (-x-[n]) das
colunas para resoluções
não necessariamente
devem ser as mesmas.
Basta que tudo sempre
seja igual a 12*.
18. E caso queira aninhar as colunas..
Basta continuar seguindo
as regras básicas:
adicionar uma linha
(.row), “zerando” seu
esquema organização de
colunas, tornando
independente da linha
anterior.
20. O que é “LESS”?
É um CSS dinâmico. Pronto.
Ok. Ele é um pré-processador de
CSS. Melhorou?
A mesma sintaxe que
você vê no CSS é a
mesma usada no LESS.