Lezione 8: Footer

Breadcrums:

Per iniziare vediamo cosa sono i breadcrumbs. Questi particolari elementi vengono utilizzati all'interno dei siti web per identificare la posizione di una pagina all'interno di un sito. Ad esempio, potremmo utilizzarli per permettere la navigazione attraverso profonde strutture ad albero - mantenendo un facile richiamo a pagine dei livelli superiori - o utilizzarlo, come per questo sito, per agevolare la navigazione attraverso le differenti lezioni.

L'inserimento di questa struttura è semplificato da Bootstrap attraverso la definizione della classe omonima breadcrumb, come per altre liste, possiamo utilizzare la classe active per identificare l'elemento attivo al momento (nella breadcrumb presente in questa pagina, l'elemento attivo è la lezione). La creazione di questo elemento nel codice è definita in questo modo:

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Footer:

Il footer, letteralmente rappresenta la sezione della pagina al di sotto del testo e/o del contenuto in genere. All'interno del framework abbiamo diversi esempi di applicazione del footer. Banalmente eseguendo una ricerca all'interno del file CSS possiamo trovarlo nei: blockquote, panel e nei modal.

A parte questi elementi di stile, il concetto di footer è principalmente sviluppato in HTML, dove l'utilizzo di questo tag ci permette di mettere in risalto contenuti come: l'autore, il copyright, ecc. , indipendentemente dal testo inserito all'interno della pagina che potrà essere eventualmente escluso dal layout di stampa.

Al contrario degli esempi riportati precedentemente, bootstrap non prevedere un comportamento di default per la una eventuale classe footer che deve essere quindi implementata dal designer del sito (o tema). Questo è l'elemento che andremo quindi ad analizzare in questa sezione. Il nostro scopo è quello di realizzare l'esempio datoci dagli sviluppatori di Bootstrap.

Questo esempio, è quello che più si avvicina alla nostra pagina costruita fino ad oggi. Abbiamo una navbar fissata in alto alla pagina ed un contenuto testuale all'interno della stessa. Il nostro scopo è quindi definire all'interno del tag <footer> una scritta a piacere. Per quanto detto, definiamo quindi all'interno del body della nostra pagina, il tag footer come riportato nel codice:

<footer class="footer">
      <div class="container">
        <p>Questo è il testo del footer.</p>
      </div>
</footer>

Preventivamente, all'interno del tag abbiamo inserito una classe omonima non presente all'interno dei fogli di stile. Infatti, provando ad aggiornare la pagina vedrete come la scritta definita, non presenti alcun effetto grafico di rilievo. Proviamo quindi ad aggiungere un semplice tag CSS che ci permetta di vedere l'area interessata dal nostro footer:

.footer {
  background-color: #f5f5f5;
}