Lezione 7: Featurette


In questa lezione vedremo come definire la seconda macro-sezione della home page. Questa determinerà la struttura della nostra pagina in versione mobile, in aggiunta vedremo come eseguire uno slide verticale all'elemento direttamente da hyperlink posto sulla navbar.

Sezione generica:

Questa rappresenta una naturale continuazione di quanto visto nella precedente lezione. Come potete notare dalla demo questa mantiene, a livello logico, la struttura vista precedentemente:

<section id="featurettes">
            <div class="container featurette">
                    <div class="row">
                        <div class="col-lg-12 text-center">
                            <h2 class="section-heading">Lorem ipsum sezione</h2>
                            <h3 class="section-subheading text-muted">Vogliamo accedere a questa sezione anche attraverso il link della nav-bar.</h3>
                        </div>
                    </div>
            ....
            </div>
</section>

Senza troppa sorpresa, il codice presentato è molto simile a quello visto nella lezione precedente. Qui definiamo la nuova sezione, a cui assegnamo il relativo id univoco. Definiamo quindi un nuovo container di tipo featurette, la cui definizione possiamo vedere all'interno dei file CSS di Bootstrap, ed inseriamo l'ormai classico titolo e sottotitolo della nostra sezione.

A questo punto possiamo definire le entry della nostra featurette. Però, a differenza di quanto fatto precedentemente definiremo entrambi gli elementi sulla stessa riga: 

<div class="row featurette">
    <div class="col-sm-5 hidden-xs">
        <img class="featurette-image  img-centered img-circle" src="holder.js/300x300/auto" alt="simple placeholder">
    </div>
    <div class="col-sm-7">
        <h2 class="featurette-heading">Cambiamo il testo <span class="text-danger">questo è danger! </span></h2>
        <p class="lead"> Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? 
        <br><br>
        <a class="btn btn-default" href="#" role="button">See for yourself</a></p>
    </div>
</div>
Qui possiamo vedere l'utilizzo di alcuni elementi di tipografia e di aiuto.

Esercizio

In questo caso non abbiamo inserito un'immagine esplicita all'interno del codice ma abbiamo utilizzato holderjs per ottenere un placeholder delle dimensioni adatte. Prova ad utilizzarlo anche te all'interno della tua pagina!

Esercizio

Completa l'elenco delle featurette in modo da ricreare quanto presentato nella demo. Dividi gli elementi utilizzando il seguente codice: <hr class="featurette-divider">.

Esercizio

Modifica la featurette in modo da centrare le immagini al di sotto delle scritte!