Skip to main content

Bootstrap Italia

Il tema Bootstrap 5 per lo sviluppo di applicazioni web per la PA

Footer

Footer

Documentazione ed esempi per la creazione di piè di pagina di navigazione.

Introduzione

Il footer (in italiano piè di pagina) è una sezione che contiene tutte le informazioni inerenti al sito web e alla società che lo ha costruito. Per una PA potrebbe contenere tutte i riferimenti ai vari servizi, a varie pagine utili al cittadino, rifimenti alla privacy, all’accessibilità e a come contattare gli uffici.

Potrebbe anche contenere riferimenti alle pagine social dell’amministrazione.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

<footer class="it-footer">
  <div class="it-footer-main">
    <div class="container">
      <section>
        <div class="row clearfix">
          <div class="col-sm-12">
            <div class="it-brand-wrapper">
              <a href="#" data-focus-mouse="false">
                <svg class="icon"><use xlink:href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
                <div class="it-brand-text">
                  <h2>Lorem Ipsum</h2>
                  <h3 class="d-none d-md-block">Inserire qui la tag line</h3>
                </div>
              </a>
            </div>
          </div>
        </div>
      </section>
      <section>
        <div class="row">
          <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
            <h4>
              <a href="#" title="Vai alla pagina: Amministrazione">Amministrazione</a>
            </h4>
            <div class="link-list-wrapper">
              <ul class="footer-list link-list clearfix">
                <li><a class="list-item" href="#" title="Vai alla pagina: Giunta e consiglio">Giunta e consiglio</a></li>
                <li><a class="list-item" href="#" title="Vai alla pagina: Aree di competenza">Aree di competenza</a></li>
                <li><a class="list-item" href="#" title="Vai alla pagina: Dipendenti">Dipendenti</a></li>
                <li><a class="list-item" href="#" title="Vai alla pagina: Luoghi">Luoghi</a></li>
                <li><a class="list-item" href="#" title="Vai alla pagina: Associazioni e società partecipate">Associazioni e società partecipate</a></li>
              </ul>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
            <h4>
              <a href="#" title="Vai alla pagina: Servizi">Servizi</a>
            </h4>
            <div class="link-list-wrapper">
              <ul class="footer-list link-list clearfix">
                <li><a class="list-item" href="#" title="Vai alla pagina: Pagamenti">Pagamenti</a></li>
                <li><a class="list-item" href="#" title="Vai alla pagina: Sostegno">Sostegno</a></li>
                <li><a class="list-item" href="#" title="Vai alla pagina: Domande e iscrizioni">Domande e iscrizioni</a></li>
                <li><a class="list-item" href="#" title="Vai alla pagina: Segnalazioni">Segnalazioni</a></li>
                <li><a class="list-item" href="#" title="Vai alla pagina: Autorizzazioni e concessioni">Autorizzazioni e concessioni</a></li>
                <li><a class="list-item" href="#" title="Vai alla pagina: Certificati e dichiarazioni">Certificati e dichiarazioni</a></li>
              </ul>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
            <h4>
              <a href="#" title="Vai alla pagina: Novità">Novità</a>
            </h4>
            <div class="link-list-wrapper">
              <ul class="footer-list link-list clearfix">
                <li><a class="list-item" href="#" title="Vai alla pagina: Notizie">Notizie</a></li>
                <li><a class="list-item" href="#" title="Vai alla pagina: Eventi">Eventi</a></li>
                <li><a class="list-item" href="#" title="Vai alla pagina: Comunicati stampa">Comunicati stampa</a></li>
              </ul>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-6">
            <h4>
              <a href="#" title="Vai alla pagina: Documenti">Documenti</a>
            </h4>
            <div class="link-list-wrapper">
              <ul class="footer-list link-list clearfix">
                <li><a class="list-item" href="#" title="Vai alla pagina: Progetti e attività">Progetti e attività</a></li>
                <li><a class="list-item" href="#" title="Vai alla pagina: Delibere, determine e ordinanze">Delibere, determine e ordinanze</a></li>
                <li><a class="list-item" href="#" title="Vai alla pagina: Bandi">Bandi</a></li>
                <li><a class="list-item" href="#" title="Vai alla pagina: Concorsi">Concorsi</a></li>
                <li><a class="list-item" href="#" title="Vai alla pagina: Albo pretorio">Albo pretorio</a></li>
              </ul>
            </div>
          </div>
        </div>
      </section>
      <section class="py-4 border-white border-top">
        <div class="row">
          <div class="col-lg-4 col-md-4 pb-2">
            <h4><a href="#" title="Vai alla pagina: Contatti">Contatti</a></h4>
            <p>
              <strong>Comune di Lorem Ipsum</strong><br>
              Via Roma 0 - 00000 Lorem Ipsum Codice fiscale / P. IVA: 000000000
            </p>
            <div class="link-list-wrapper">
              <ul class="footer-list link-list clearfix">
                <li><a class="list-item" href="#" title="Vai alla pagina: Posta Elettronica Certificata">Posta Elettronica Certificata</a></li>
                <li>
                  <a class="list-item" href="#" title="Vai alla pagina: URP - Ufficio Relazioni con il Pubblico">URP - Ufficio Relazioni con il Pubblico</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-lg-4 col-md-4 pb-2">
            <h4><a href="#" title="Vai alla pagina: Lorem Ipsum">Lorem Ipsum</a></h4>
          </div>
          <div class="col-lg-4 col-md-4 pb-2">
            <div class="pb-2">
              <h4><a href="#" title="Vai alla pagina: Seguici su">Seguici su</a></h4>
              <ul class="list-inline text-left social">
                <li class="list-inline-item">
                  <a class="p-2 text-white" href="#" target="_blank"><svg class="icon icon-sm icon-white align-top"><use xlink:href="/bootstrap-italia/dist/svg/sprites.svg#it-designers-italia"></use></svg><span class="visually-hidden">Designers Italia</span></a>
                </li>
                <li class="list-inline-item">
                  <a class="p-2 text-white" href="#" target="_blank"><svg class="icon icon-sm icon-white align-top"><use xlink:href="/bootstrap-italia/dist/svg/sprites.svg#it-twitter"></use></svg><span class="visually-hidden">Twitter</span></a>
                </li>
                <li class="list-inline-item">
                  <a class="p-2 text-white" href="#" target="_blank"><svg class="icon icon-sm icon-white align-top"><use xlink:href="/bootstrap-italia/dist/svg/sprites.svg#it-medium"></use></svg><span class="visually-hidden">Medium</span></a>
                </li>
                <li class="list-inline-item">
                  <a class="p-2 text-white" href="#" target="_blank"><svg class="icon icon-sm icon-white align-top"><use xlink:href="/bootstrap-italia/dist/svg/sprites.svg#it-behance"></use></svg><span class="visually-hidden">Behance</span></a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
  <div class="it-footer-small-prints clearfix">
    <div class="container">
      <!-- <h3 class="visually-hidden">Sezione Link Utili</h3> -->
      <ul class="it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row">
        <li class="list-inline-item"><a href="#" title="Note Legali">Media policy</a></li>
        <li class="list-inline-item"><a href="#" title="Note Legali">Note legali</a></li>
        <li class="list-inline-item"><a href="#" title="Privacy-Cookies">Privacy policy</a></li>
        <li class="list-inline-item"><a href="#" title="Mappa del sito">Mappa del sito</a></li>
      </ul>
    </div>
  </div>
</footer>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

<footer class="it-footer">
  <div class="it-footer-main">
    <div class="container">
      <section>
        <div class="row clearfix">
          <div class="col-sm-12">
            <div class="it-brand-wrapper">
              <a href="#" data-focus-mouse="false">
                <svg class="icon"><use xlink:href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
                <div class="it-brand-text">
                  <h2>Lorem Ipsum</h2>
                  <h3 class="d-none d-md-block">Inserire qui la tag line</h3>
                </div>
              </a>
            </div>
          </div>
        </div>
      </section>
      <section class="py-4 border-white border-top">
        <div class="row">
          <div class="col-lg-4 col-md-4 pb-2">
            <h4><a href="#" title="Vai alla pagina: Contatti">Contatti</a></h4>
            <p>
              <strong>Comune di Lorem Ipsum</strong><br>
              Via Roma 0 - 00000 Lorem Ipsum Codice fiscale / P. IVA: 000000000
            </p>
            <div class="link-list-wrapper">
              <ul class="footer-list link-list clearfix">
                <li><a class="list-item" href="#" title="Vai alla pagina: Posta Elettronica Certificata">Posta Elettronica Certificata</a></li>
                <li>
                  <a class="list-item" href="#" title="Vai alla pagina: URP - Ufficio Relazioni con il Pubblico">URP - Ufficio Relazioni con il Pubblico</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-lg-4 col-md-4 pb-2">
            <h4><a href="#" title="Vai alla pagina: Lorem Ipsum">Lorem Ipsum</a></h4>
          </div>
          <div class="col-lg-4 col-md-4 pb-2">
            <div class="pb-2">
              <h4><a href="#" title="Vai alla pagina: Seguici su">Seguici su</a></h4>
              <ul class="list-inline text-left social">
                <li class="list-inline-item">
                  <a class="p-2 text-white" href="#" target="_blank"><svg class="icon icon-sm icon-white align-top"><use xlink:href="/bootstrap-italia/dist/svg/sprites.svg#it-designers-italia"></use></svg><span class="visually-hidden">Designers Italia</span></a>
                </li>
                <li class="list-inline-item">
                  <a class="p-2 text-white" href="#" target="_blank"><svg class="icon icon-sm icon-white align-top"><use xlink:href="/bootstrap-italia/dist/svg/sprites.svg#it-twitter"></use></svg><span class="visually-hidden">Twitter</span></a>
                </li>
                <li class="list-inline-item">
                  <a class="p-2 text-white" href="#" target="_blank"><svg class="icon icon-sm icon-white align-top"><use xlink:href="/bootstrap-italia/dist/svg/sprites.svg#it-medium"></use></svg><span class="visually-hidden">Medium</span></a>
                </li>
                <li class="list-inline-item">
                  <a class="p-2 text-white" href="#" target="_blank"><svg class="icon icon-sm icon-white align-top"><use xlink:href="/bootstrap-italia/dist/svg/sprites.svg#it-behance"></use></svg><span class="visually-hidden">Behance</span></a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
  <div class="it-footer-small-prints clearfix">
    <div class="container">
      <!-- <h3 class="visually-hidden">Sezione Link Utili</h3> -->
      <ul class="it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row">
        <li class="list-inline-item"><a href="#" title="Note Legali">Media policy</a></li>
        <li class="list-inline-item"><a href="#" title="Note Legali">Note legali</a></li>
        <li class="list-inline-item"><a href="#" title="Privacy-Cookies">Privacy policy</a></li>
        <li class="list-inline-item"><a href="#" title="Mappa del sito">Mappa del sito</a></li>
      </ul>
    </div>
  </div>
</footer>