Se non l’avete già fatto, vi consiglio di leggere la prima parte della guida, qui!
Inseriamo il carousel
<div id=”carousel” class=”carousel slide” data-ride=”carousel”>
<!– indicatori –>
<ol class=”carousel-indicators”>
<li data-target=”#carousel” data-slide=”0″ class=”active”></li>
<li data-target=”#carousel” data-slide=”1″></li>
<li data-target=”#carousel” data-slide=”2″></li>
</ol>
<!–qui le slide–>
<div class=”carousel-inner”>
<div class=”item active”><img src=”http://placehold.it/1140×500/ff0000/000000″/> </div>
<div class=”item”><img src=”http://placehold.it/1140×500/0000ff/000000″/> </div>
<div class=”item”><img src=”http://placehold.it/1140×500/00ff00/000000″/> </div>
</div>
<!– i controlli –>
<a class=”left carousel-control” href=”#carousel” role=”button” data-slide=”prev”> <span class=”glyphicon glyphicon-chevron-left”></span></a>
<a class=”right carousel-control” href=”#carousel” role=”button” data-slide=”next”> <span class=”glyphicon glyphicon-chevron-right”></span></a>
</div>
Il secondo componente che inseriremo è il carousel responsivo proposto fra gli strumenti predefiniti di bootstrap. Il componente è semplice quanto duttile. Qui a fini didattici ci limiteremo a inserire un carousel minimale collegato a tre placeholder. Riportiamo di seguito carousel e il suo contenuto:
Il carousel è strutturato in tre parti: gli indicatori, le slide (item può contenere anche una didascalia) e i controlli (se li omettiamo avremo uno slider automatico). Usando la sintassi dichiarativa possiamo configurare il carousel semplicemente seguendo questo schema. Brevemente:
- la classe “carousel” applica il componente
- la classe “slide” conferisce l’animazione di scorrimento orizzontale (senza si passerebbe da una slide all’altra senza animazioni)
- data-ride=”carousel” provvede all’animazione automatica di passaggio da una slide all’altra, in sua assenza si devono utilizzare i pulsanti
Possiamo avere un controllo fine del comportamento del carousel con i seguenti attributi “data-“:
- data-interval: indica l’ammontare di tempo che intercorre fra una slide e l’altra (di default data-interval=5000)
- data-pause: attiva o meno la pausa del carousel quando il puntatore passa sulle slide (data-pause=”hover”)
- data-wrap: indica se il loop delle foto è o meno continuo o c’è una pausa al completamento delle slide (data-pause:true)
- data-keyboard: attiva o meno il controllo del carousel da tastiera
Il content e la griglia
Sotto al carousel inseriremo una griglia bootstrap su due righe per gestire una citazione e tre widget. Questo ci da modo di approfondire il funzionamento della griglia responsiva. La griglia è organizzata in righe (.row) e colonne (col-x-y). La griglia di bootstrap è di 12 colonne per 4 viste per cui esistono 12 classe per ciascuna vista. In questo modo grazie alle media query è possibile gestire l’ampiezza di ciascuna colonna in base alla dimensione della finestra. Quindi se in modalità large (lg) voglio ottenere una struttura a due colonne dovrò scrivere:
|
1
2
3
4
|
<div class=“row”>
<div class“col-lg-6”></div>
<div class“col-lg-6”></div>
</div>
|
in questo caso quando passerò il breakpoint relativo alla vista medium dato che non ho utilizzato classi per le colonne della griglia corrispondente le due colonne verranno settate al 100% e al posto di due colonne avremo due righe. Per gestire dimensioni differenti per la vista medium (ad esempio una dimensione di 8/12 per la colonna sinistra e 4/12 er la destra aggiungerò le opportune colonne:
|
1
2
3
4
|
<div class=“row”>
<div class“col-lg-6 col-md-8”></div>
<div class“col-lg-6 col-md-4”></div>
</div>
|
se invece voglio mantenere due colonne uguali sia in small, medium e large è sufficiente inserire le classi che regolamentano le colonna nella vista a risoluzione più bassa ovvero:
|
1
2
3
4
|
<div class=“row”>
<div class“col-sm-6”></div>
<div class“col-sm-6”></div>
</div>
|
in questo caso otterremo due righe solamente nella vista extra small. Ora che abbiamo chiarito le basi del funzionamento della griglia concentriamoci su #content. Al suo interno inseriremo due riche così strutturate:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<div class=“row voffset4”>
<div id=“citation” class=“col-md-6 text-center col-md-offset-3”>
<blockquote>“Il design non è come sembra o come appare. Il design è come funziona”.
<footer><cite>Steve Jobs</cite></footer>
</blockquote>
</div>
</div>
<div class=“row voffset4” id=“widgets”>
<div class=“col-md-4 col-xs-6”>
<h3 class=“text-center”>Title</h3>
<img class=“img-thumbnail img-responsive” src=“http://placehold.it/360×200/cccccc/000000”/>
<p class=“voffset2”>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce justo metus, accumsan viverra iaculis in, pulvinar vel nulla. Aliquam semper erat maximus scelerisque accumsan.</p>
<a class=“btn btn-default pull-right voffset2”>Leggi tutto...</a> </div>
<div class=“col-md-4 col-xs-6”>
<h3 class=“text-center”>Title</h3>
<img class=“img-thumbnail img-responsive” src=“http://placehold.it/360×200/cccccc/000000”/>
<p class=“voffset2”>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce justo metus, accumsan viverra iaculis in, pulvinar vel nulla. Aliquam semper erat maximus scelerisque accumsan.</p>
<a class=“btn btn-default pull-right voffset2”>Leggi tutto...</a> </div>
<div class=“col-md-4 hidden-sm hidden-xs”>
<h3 class=“text-center”>Title</h3>
<img class=“img-thumbnail img-responsive” src=“http://placehold.it/360×200/cccccc/000000”/>
<p class=“voffset2”>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce justo metus, accumsan viverra iaculis in, pulvinar vel nulla. Aliquam semper erat maximus scelerisque accumsan.</p>
<a class=“btn btn-default pull-right voffset2”>Leggi tutto...</a> </div>
</div>
</div>
|
La prima riga contiene una sola cella a cui è attribuito un col-md-6 e un col-md-offset-3 questo significa che la colonna da 6 verrà centrata e il suo contenuto occuperà la metà dello spazio disponibile (in questo modo la citazione sarà disposta su 2 righe in praticamente tutte le viste a parte la xs. Il comportamento sarà identico per la vista medium e large mentre nella vista small e extrasmall la cella andrà a 100% in assenza di regole definite.
La seconda riga contiene 3 widget costituiti da titolo (h3), immagine e testo. Qui il comportamento prevede 3 colone per la vista large e media (ottenuta utilizzando col-md-4) mentre per la vista small e extra small viene nascosta l’ultima colonna con hidden-xs e hidden-sm e settando 2 colonne usando col-xs-6 sulle celle rimanenti.
Nel dettaglio
In questa parte di codice sono state utilizzate inoltre alcune classi di supporto e alcune custom non facenti parte del framework (.voffsetX).I titoli h3 sono stati centrati con la classe di supporto text-center. Le immagini sono state rese responsive usando img-responsive mentre con img-thumnail abbiamo aggiunto i bordi bianchi arrotondati. Ogni widget ha un link di approfondimento, le classi che lo formattano sono:
- btn e btn-default che gli conferiscono l’aspetto di un pulsante
- pull-right che lo flottano a destra
Inseriamo il footer
Concludiamo la pagina inserendo un menù nel footer. In questo caso non sarà necessario usare la griglia:
|
1
2
3
4
5
|
<div id=“footerWrap” class=“voffset5”>
<footer class=“container”>
<p class=“text-center”>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce justo metus</p>
</footer>
</div>
|
Il foglio di stile personalizzato
Benché si sia cercato di utilizzare esclusivamente quanto messo a disposizione del framework sono stati necessari alcuni stili che ho inserito in un file denominato style.css (da collegare subito dopo a quello di bootstrap)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
/* modifica allo stile di default per la citazione */
#citation blockquote{ font-size:2.4rem; border-left: none;}
/* offset verticali */
.voffset { margin–top: 2px; }
.voffset1 { margin–top: 5px; }
.voffset2 { margin–top: 10px; }
.voffset3 { margin–top: 15px; }
.voffset4 { margin–top: 30px; }
.voffset5 { margin–top: 40px; }
.voffset6 { margin–top: 60px; }
.voffset7 { margin–top: 80px; }
.voffset8 { margin–top: 100px; }
.voffset9 { margin–top: 150px; }
/* stile per il footer e il suo wrapper */
#footerWrap { background-color:#222222; padding:40px 0;}
#footerWrap p { color:#fff;}
|
Conclusione
La guida aveva l’obiettivo di fornire una panoramica generale dell’utilizzo di bootstrap attraverso la creazione di una homepage. E’ possibile scaricare lo zip dell’esercizio svolto da qui.
Si potrebbe decidere quali elementi (tags) adoperare a seconda di quello che abbiamo intenzione di fare. Questo linguaggio infatti non ha variabili da dichiarare, non esegue operazioni aritmetiche e non prende decisioni. Ha però delle regole da rispettare, la più importante è la struttura all’interno della quale vanno collocati tutti i singoli elementi (tags). Questa struttura dovrà essere sempre presente su ogni pagina che andremo a creare. Vediamo come e da cosa è composta la struttura tipo di base:
