Content Area

Ora creiamo un'area di contenuti aggiuntivi per il sito, limitandoci però, ad inserire delle immagini, che potranno essere sostituite da altri elementi.

Si parte sempre da un tag section di classe container:

<section class="container">

</section>

In seguito ci servono due righe costituite da due tag div di classe row:

<section class="container">
  <div class="row">
  </div>
  <div class="row">
  </div>
</section>

Da ultimo, le righe sono divise con dei tag div di classe col-sm-xx:

<section class="container">
  <div class="row">
    <div class="col-sm-6">
     ...
    </div>
    <div class="col-sm-6">
     ...
    </div>
  </div>
  <div class="row">
    <div class="col-sm-6">
     ...
    </div>
    <div class="col-sm-6">
     ...
    </div>
  </div>
</section>

Nel codice precedente, le due righe sono divise in due parti uguali. Ogni parte occupa 6 delle 12 colonne di Bootstrap. Utilizzando la classe col-sm-6 assicuriamo che il layout compaia in questo modo anche sullo schermo dei tablet (circa 768 pixel). Su schermi più piccoli, come gli smartphones, si vedrà solo una immagine per riga.

Creiamo il tutto a partire dal codice iniziale che potete trovare anche qui.

Istruzioni 1

Nel file HTML, subito dopo la chiusura del tag section del jumbotron, creiamo la sezione per il contenuto aggiuntivo. Con un tag section di classe container.

<section class="container">
  ...
</section>

Istruzioni 2

All'interno del tag appena creato <section class="container">, aggiungete due tag div con la classe row:

<section class="container">
  <div class="row">
    ...
  </div>
  <div class="row"> 
    ...
  </div>
</section>

Assicuratevi di mettere tutti i tag div di chiusura!

Istruzioni 3

In ogni riga, create due tag figure per le immagini con classe col-sm-6:

<section class="container">
  <div class="row">
    <figure class="col-sm-6">
    ...
    </figure>
    <figure class="col-sm-6">
    ...
    </figure>
  </div>
  <div class="row">
    <figure class="col-sm-6">
    ...
    </figure>
    <figure class="col-sm-6">
    ...
    </figure>
  </div>
</section>

Assicuratevi di aver creato in totale quattro blocchi figure.

Istruzioni 4

Infine, all'interno di ogni blocco figure, aggiungete due tag:

  1. Un tag p che contiene una delle seguenti categorie:
    • kitchen
    • woodwork
    • gifts
    • antiques

    For example:

    <p>kitchen</p>

  3. Un tag img che contiene uno dei seguenti url:

    Se utile, qui trovate una spiegazione su come utilizzare i tag img per le immagini.

    Ecco qui come dovrebbe comparire la pagina quando avete ultimato questo passo.

    Qui trovate il codice completo.

Ora aprite la pagina e guardate il risultato ottenuto. Provate a modificare le dimensioni della finestra del browser, e vedrete i cambiamenti del layout.

results matching ""

    No results matching ""