Twitter Bootstrap ci rende la vita più semplice con il suo sistema a griglia.
Ogni riga (row) ha 12 colonne e possiamo gestirle come preferiamo, a seconda del tipo di sito o di applicazione che stiamo realizzando.
Le media-queries
Tutto si basa sulle media queries, che non sono altro che delle dichiarazioni presenti nel CSS che specificano come deve presentarsi il sito o una parte di esso a seconda del dispositivo che lo sta visitando.
Subito l’esempio di Bootstrap:
/* Small devices, (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
Come vedete, ogni tipo di dispositivo ha le sue media queries, che volendo, possiamo modificare a nostro piacimento.
Nel video ho realizzato alcuni esempi che possono darvi un’idea concreta di come utilizzare le classi di Twitter Bootstrap, buona visione.
Link utili:
- Bootstrap – il sito ufficiale
- Start Bootstrap – Templates e temi gratuiti da scaricare
- Bootstrapzero – Collezione di templates gratuiti e a pagamento
- Bootstrap Hero – Inesauribile risorsa Bootstrap in cui troverete componenti, templates, link e riferimenti a tutto il materiale disponibile su questo framework
1 commento