Apr122017 by Maichol SerfilippiNo Comments

Bootstrap – Strumenti liberi, seconda parte

Se non l’avete già fatto, vi consiglio di leggere la prima parte della guida, qui!

Inseriamo il carousel

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:

</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:

</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:

</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:

<blockquote>“Il design non è come sembra o come appare. Il design è come funziona”.

<footer><cite>Steve Jobs</cite></footer>

</blockquote>

</div>

<h3 class=“text-center”>Title</h3>

<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>

<h3 class=“text-center”>Title</h3>

<a class=“btn btn-default pull-right voffset2”>Leggi tutto...</a> </div>

<h3 class=“text-center”>Title</h3>

<a class=“btn btn-default pull-right voffset2”>Leggi tutto...</a> </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:

<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)

/* 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.

Apr112017 by Maichol SerfilippiNo Comments

Bootstrap – Strumenti Liberi, prima parte

All, Bootstrap, html, Webdesign

Bootstrap 3 primi passi: realizziamo un layout responsivo

In questa breve guida realizzeremo un layout responsivo utilizzando il framework Bootstrap 3. Partiremo dalle basi per cui se avete sentito parlare di questo framework ma non sapete da dove iniziare questo è il posto giusto per voi!

Che cos’è Bootstrap?

Bootstrap è un framework sviluppato da Mark Otto e Jacob Thornton (aka @mdo and @fat) a Twitter con l’obiettivo di mettere a punto un set di strumenti che uniformasse l’interfaccia web del Social Network facilitandone la manutenzione.
Nel 2011 Twitter ha rilasciato Bootstrap sotto licenza open source, da allora questo framework è stato adottato da un numero crescente di sviluppatori ed al contempo ha raggiunto la release 3.3.2.

Per avere un’idea di quanto Bootstrap sia apprezzato è sufficiente vedere il progetto su gitHub: ha ottenuto oltre 77.600 stelle e oltre 29.800 fork al progetto principale.

Da dove inizio?

Quello che vogliamo ottenere è una homepage semplice ma con tutto quello che server:

un layout responsivo
un menù responsivo usando il modulo integrato
un carousel completo
ecc.

Qui un’anteprima del layout finito:

Per prima cosa creeremo una pagina alla quale collegheremo i file necessari per poter iniziare a costruire il nostro layout. Oltre a Bootstrap ci serviranno jQuery, html5shiv e respond, quindi scarichiamoli:

Bootstrap 3 può essere usato in diversi modi, ad esempio via CDN o utilizzando Bower o NPM. Noi ci accontenteremo di scaricare l’archivio con i file già compilati (prima colonna) lasciando la versione LESS e SASS a futuri tutorial
jQuery è necessario per poter utilizzare la parte javascript del framework jQuery 1.11.2 e relativo file .map
html5shiv è un piccolo script che garantisce la retro compatibilità dei tag HTML5 con IE8 e precedenti. In alternativa se preferite potete utilizzare il più completo modernizr
Respond garantisce il funzionamento delle media query anche su IE8 e precedenti

Creiamo la pagina HTML di partenza

Decomprimete gli archivi scaricati e organizzateli in questo modo:

tutorial-bootstrap-filesystem

Create una nuova pagina web (denominata index.html) in HTML5 così strutturata (potete usare anche questo template di partenza è ottimo):

<!doctype html>

<html>

<head>

<title>Il mio primo layout in bootstrap</title>

<!—[if lt IE 9]>

<![endif]—>

</head>

<body>

</body>

</html>

Questa pagina può essere un ottimo punto di partenza per tutti i vostri progetti con Bootstrap perchè garantisce un funzionamento ottimale del framework e una buona retro compatibilità con i vecchi browser di casa Microsoft.

Definiamo la struttura del layout

Una volta definita la pagina di partenza è giunto il momento di strutturare il layout definendo le aree principali come la testata, l’area dedicata al carousel ecc. Qui di seguito riportiamo il contenuto del body:

<!— qui il menù principale —>

</nav>

</header>

</div>

</div>

<!— qui il menù secondario —>

</nav>

</footer>

</div>

Il layout è suddiviso in quattro parti: la testata, il carousel, la sezione di contenuto che conterrà 3 widget organizzati tramite la griglia di bootstrap (che vedremo più avanti) e il footer.

Strutturiamo l’header

Per prima cosa concentriamoci sull’header all’interno del quale inseriamo il primo componente: il menù responsivo. Questo componente si adatta ottimamente allo spazio disponibile secondo i quattro breakpoint che bootstrap mette a disposizione (large, medium, small e extra small) con le opportune media query. Assieme al componente inseriremo alla sinistra il logo (testuale), mentre a destra andrà posizionato il campo cerca. Riportiamo di seguito il contenuto di header:

<button type=“button” class=“navbar-toggle collapsed” data–toggle=“collapse” s> <span class=“sr-only”>Toggle navigation</span> <span class=“icon-bar”></span> <span class=“icon-bar”></span> <span class=“icon-bar”></span> </button>

<li><a href=“#”>Chi siamo</a></li>

<a class=“dropdown-toggle” data–toggle=“dropdown” role=“button” aria–expanded=“false” href=“#”>Servizi <span class=“caret”></span></a>

<li><a href=“#”>Ideazione loghi</a></li>

<li><a href=“#”>Immagine coordinata</a></li>

<li><a href=“#”>Sviluppo siti web</a></li>

<li><a href=“#”>Creazione app.</a></li>

</ul>

</li>

<li><a href=“#”>Portfolio</a></li>

<li><a href=“#”>Contatti</a></li>

</ul>

</div>

</form>

</div>

</nav>

Il tag nav delimita il menù (navbar e navbar-inverse conferiscono forma e colore) dopodiché possiamo individuare due aree distinte al suo interno: il div con classe “navbar-header” e il div con id “mainMenu”. Il primo contiene logo e pulsante per l’attivazione del menù verticale in modalità extra small mentre il secondo contiene la lista non ordinata e il campo di ricerca (ovvero gli elementi che dovranno essere inseriti nella tendina a scomparsa):

Il componente menù utilizza collapse.js il plugin di bootstrap incluso in bootstrap.min.js; il button “toggle navigation” è collegato al menù principale e lo fa funzionare grazie alla sintassi dichiarativa data-target=”#mainMenu” con la quale viene indicato la seconda sezione del menù.

Problema e Soluzione

PROBLEMA: il menù ha troppe voci per essere visualizzato su una sola riga nelle viste medium e small.

SOLUZIONE: la soluzione più elegante è modificare il comportamento del modulo e fare in modo che collassi già in modalità small o addirittura medium. Sconsiglio modificare direttamente il framework, l’approccio migliore e ricompilare le sorgenti LESS modificando @navbarCollapseWidth (purtroppo il wizard online non prevede la modifica diretta di tale variabile). Una soluzione alternativa è scrivere una media query che sovrascriva il comportamento di default; quello riportato ad esempio attiva il menù a tendina in modalità small:

@media (max–width: 990px) {

.navbar–header {

float: none;

}

.navbar–toggle {

display: block;

}

.navbar–collapse {

border–top: 1px solid transparent;

box–shadow: inset 0 1px 0 rgba(255,255,255,0.1);

}

.navbar–collapse.collapse {

display: none!important;

}

.navbar–nav {

float: none!important;

margin: 7.5px –15px;

}

.navbar–nav>li {

float: none;

}

.navbar–nav>li>a {

padding–top: 10px;

padding–bottom: 10px;

}

Una seconda soluzione può essere nascondere alcune voci di menù in base alla risoluzione grazie alle responsive utilities che bootstrap ci mette a disposizione.

responsive-utilities

Categoria: Bootstrap

Bootstrap – Strumenti liberi, seconda parte

Inseriamo il carousel

Il content e la griglia

Nel dettaglio

Inseriamo il footer

Il foglio di stile personalizzato

Conclusione

Bootstrap – Strumenti Liberi, prima parte

Bootstrap 3 primi passi: realizziamo un layout responsivo

Che cos’è Bootstrap?

Da dove inizio?

Creiamo la pagina HTML di partenza

Definiamo la struttura del layout

Strutturiamo l’header

Problema e Soluzione

Cliccate qui per la seconda parte della guida!