Lezione 6: Modifica immagini

Struttura della pagina:

Riprendendo quanto fatto nelle lezioni precedenti, all'interno della nostra homepage abbiamo definito la navbar ed il carousel; come anticipato, vogliamo ora popolare la nostra pagina attraverso l'uso delle sezioni.

Forme e colori!:

Vogliamo riprodurre quanto fatto nella demo. Come potete vedere, il prossimo punto della nostra Todo list è la sezione "Forme e colori!". Questa sezione, contiene tre immagini, di uguale dimensione, con una porzione di testo ed un pulsante associato. In particolare, questa sezione, è nascosta alle basse risoluzioni. Vediamo ora come definirla in codice.

Per prima cosa definiamo una nuova sezione a cui associeremo un nuovo ID univoco, inoltre definiamo una particolare classe per questa sezione hidden-xs:

<section id="ilTuoID" class="hidden-xs">
      
</section>

Questa classe fa parte delle Responsive utilities di bootstrap. Per un veloce riassunto delle classi e delle proprietà consultate la tabella sulla documentazione. L'utilizzo di queste classi può essere considerata un'alternativa all'uso delle media queries CSS viste nella precedente lezione.

Andando nel dettaglio, questa sezione è composta da 2 righe, una prima sezione in cui visualizziamo il titolo e la descrizione, ed una secoda in cui abbiamo le tre immagini con commento. Intuitivamente andremo quindi a definire un nuovo container, al cui interno definiremo separatamente le nuove righe.

<section id="services" class="hidden-xs">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 text-center">
                <h2 class="section-heading">Forme e Colori! </h2>
                <h3 class="section-subheading text-primary">Vogliamo nascondere questa sezione quando la risoluzione scende. Prova a vedere come sparisco!</h3>
            </div>
        </div>
    <div class="row text-center">
        <div class="col-sm-4">
            <img class="img-circle responsive" src="img/grey_150x150.png" alt="Generic placeholder image" style="width: 150px; height: 150px;">
            <h2>Circle</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
            <p><a class="btn btn-default" href="#" role="button">Maiores alias</a></p>
        </div> 
                    
    </div>
</div>
</section>

Nel codice riportato, vediamo dunque come definiamo la nostra sezione. La struttura è definita attraverso l'utilizzo di due righe. Nella prima inseriremo il nostro titolo e sottotitolo, mentre nella seconda inseriamo la nostra prima immagine campione.

In particolare, definiamo il testo centrato all'interno delle colonne selezionate nel nostro div. Il punto chiave, in questo codice è rappresentato dalle classi modificatrici che andiamo ad imporre alle nostre immagini. In dettaglio, definiamo la nostra immagine come responsive e di forma circolare attraverso la classe img-circle, maggiori dettagli a riguardo sono disponibile nella documentazione.