Il piè pagina

Benissimo! Ora siamo arrivati all'ultima parte, il piè di pagina.

Il più di pagina visualizza informazioni sul copyright, i link ai social network e alle volte anche un blocco di navigazione ulteriore.

Di seguito realizzeremo un piè di pagina con Bootstrap.

Dapprima, creiamo un tag footer con la classe container:

<footer class="container">

</footer>

All'interno del footer, mettiamo un tag div con la classe row per ospitare il contenuto del piè di pagina:

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

Infine, la riga viene divisa in parti usando di nuovo la grid di Bootstrap. Ecco un esempio:

<footer class="container">
  <div class="row">
    <p class="col-sm-4">...</p>
    <ul class="col-sm-8">
      <li class="col-sm-1">...</li>
      <li class="col-sm-1">...</li>
      <li class="col-sm-1">...</li>
    </ul>
  </div>
</footer>

Qui, la riga è divisa in tre parti: un tag p che occupa quattro colonne, un tag ul che ne occupa otto, e al suo interno una lista di elementi in cui ciascuno occupa una colonna (ad esempio per le icone dei social network).

Anche in questo caso, aver usato le classi col-sm-xxx fa sì che il layout descritto sarà visibile a partire dagli schermi 769 pixel di larghezza (es. tablet) in su.

Se non avete provveduto voi stessi, qui trovate il codice da cui incominciare.

Istruzioni 1

Creiamo un tag footer giusto sotto il tag di chiusura section del contenuto aggiuntivo, aggiungiamo la classe container.

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

Istruzioni 2

Al di sotto del tag footer di apertura, creiamo un tag div con la classe row:

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

Non dimenticate i tag div di chiusura.

Istruzioni 3

Ora dividiamo la riga con la grid di Bootstrap.

Creiamo un tag p con classe col-sm-4 e un tag ul con la classe col-sm-8:

<footer class="container">
  <div class="row">
    <p class="col-sm-4">...</p>
    <ul class="col-sm-8">
    ...
    </ul>
  </div>
</footer>

Istruzioni 4

All'interno del tag p mettiamo la stritta del copyright:

  © 2016 Skillfair

&copy è un codice di carattere che il browser interpreta e visualizza come il simbolo del copyright: ©.

Guardate la pagina risultante e controllate che sia presente.

Istruzioni 5

All'interno del tag ul, create quattro tag li ognuno con classe col-sm-1:

<ul class="col-sm-8">
  <li class="col-sm-1">...</li>
  <li class="col-sm-1">...</li>
  <li class="col-sm-1">...</li>
  <li class="col-sm-1">...</li>
</ul>

Istruzioni 6

Infine, all'interno di ciascun tag li aggiungete un tag img che indirizza a una icona di un social network.

Twitter

<li class="col-sm-1">
  <img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/twitter.svg">
</li>

Facebook

<li class="col-sm-1">
  <img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/facebook.svg">
</li>

Instagram

<li class="col-sm-1">
  <img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/instagram.svg">
</li>

Medium

<li class="col-md-1">
  <img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/medium.svg">
</li>

Ora guardate la pagina completa nel browser. Ottimo lavoro!

Il risultato dovrebbe essere questo e il codice finale lo trovate qui.