Twitter Bootstrap: un semplice esempio

Twitter bootstrap è un’ottima libreria per creare siti responsivi attraverso l’utilizzo di layout a griglie (grid system).
Vediamo un semplicissimo esempio di utilizzo per capire i concetti fondamentali alla base di questa utilissima libreria.

Per configurare bootstrap è necessario come minimo includere un file nel nostro template:

≤link href=”http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css” rel=”stylesheet”≥

1. Container

Creiamo un DIV con classe container che conterrà tutti gli altri tag della pagina.

≤div class=”container”≥

≤/div≥

La classe .container è molto utile e crea un’area centrata nella pagina all’interno della quale possiamo inserire altri contenuti.
La classe .container è equivalente alla creazione di un DIV con una larghezza fissa e con i margini “auto” per centrarla. Il beneficio derivante dall’uso della classe bootstrap .container è che, essendo responsiva, adatterà la sua larghezza in base al device sulla quale verrà visualizzata.

2. H1

Adesso inseriamo un titolo all’interno del tag H1:
≤h1≥TWITTER BOOTSTRAP TUTORIAL≤/h1≥

3. Navbar

Inseriamo la barra di navigazione, utilizzando le classi twitter bootstrap costruite ad hoc:
≤div class=’navbar navbar-inverse’≥
≤div class=’nav-collapse’ style=”height: auto;”≥
≤ul class=”nav”≥
≤li class=”active”≥≤a href=”#”≥Home≤/a≥≤/li≥
≤li≥≤a href=”#”≥Pagina Uno≤/a≥≤/li≥
≤li≥≤a href=”#”≥Page Due≤/a≥≤/li≥
≤/ul≥
≤/div≥
≤/div≥

La classe .navbar contiene tutti gli stili per la nostra barra di navigazione, mentre la classe .navbar-inverse applica gli stili per un template “black style”.
Ovviamente si possono personalizzare gli stili aggiungendo codice CSS al proprio file.
All’interno del DIV .navbar aggiungiamo un altro DIV con classe .nav-collapse e uno stile in linea CSS con proprietà “height:auto”. Questo serve a mostrare una vista differente quando il browser ha una larghezza inferiore a 979px.

Possiamo anche aggiungere una classe .nav alla lista non ordinata di elementi e la classe .active alla lista “Home” per applicare altri stili del file bootstrap.

4. Contenuti

Passiamo ora alla parte centrale dei contenuti.

Abbiamo completato la parte di navigazione principale, ora occorre predisporre l’area dei contenuti e una colonna laterale:
≤div id=’content’ class=’row-fluid’≥
≤div class=’span9 main’≥
≤h2≥Main Content Section≤/h2≥
≤/div≥
≤div class=’span3 sidebar’≥
≤h2≥Sidebar≤/h2≥
≤/div≥
≤/div≥

E’ questa l’occasione per capire il funzionamento del grid system di twitter bootstrap.
Il sistema utilizza un layout a 12 colonne, il che significa che la pagina può essere divisa in 12 colonne di eguale larghezza.
Nel codice sopra riportato abbiamo due colonne, rispettivamente di classe .span9 e .span3 indicanti una larghezza pari a 9/12 e 3/12. Il beneficio di usare il sistema a griglie è che lavora con la larghezza di ciascuna colonna relativa alla larghezza dello schermo, pertanto non occorre preoccuparsi di scrivere altre media-queries per far si che il template di adatti alle varie risoluzioni.

5. Sidebar

Twitter bootstrap mette a disposizione un set di classi ed elementi disponibili per l’uso.
In questo esempio utilizzaremo la classe .nav-stacked per creare un pannello di navigazione addizionale:
≤ul class=”nav nav-tabs nav-stacked”≥
≤li≥≤a href=’#’≥Another Link 1≤/a≥≤/li≥
≤li≥≤a href=’#’≥Another Link 2≤/a≥≤/li≥
≤li≥≤a href=’#’≥Another Link 3≤/a≥≤/li
≤/ul≥

Le classi .nav-tabs e .nav-stacked creano il pannello di navigazione per noi.

Questo esempio molto semplice serve a illustrare alcune delle enormi potenzialità offerte da twitter bootstrap.

Abbiamo visto come utilizzare il sistema delle griglie, i differenti tipi di navigazione disponibili e alcune basi del responsive design.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.