Vai al contenuto principale

Bootstrap Italia

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

Liste di immagini

Liste di immagini

La lista di immagini è un componente flessibile per la visualizzazione di serie di immagini sotto forma di griglia.

Elemento singolo

Di seguito gli esempi di elemento singolo della lista di immagini:

  • Immagine semplice
  • Immagine con didascalia in basso
  • Immagine con didascalia sovrapposta

Per utilizzare la didascalia sovrapposta è sufficiente aggiungere la classe .it-grid-item-overlay al div .it-grid-item-wrapper.

Utilizzo delle icone

In caso di utilizzo delle icone si raccomanda di descriverne il senso ai lettori di schermo. Se sono solo decorative si può nasconderle con l’attributo aria-hidden=true.

Un'immagine generica segnaposto con angoli arrotondati in una figura.
Un'immagine generica segnaposto con angoli arrotondati in una figura.
Testo didascalia Significato icona
Un'immagine generica segnaposto con angoli arrotondati in una figura.
Testo didascalia Significato icona 

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

<div class="row">
  <div class="col-12 col-lg-4">
    <div class="it-grid-item-wrapper">
      <a href="#">
        <figure class="figure img-full w-100">
          <img src="https://placehold.co/660x300/ebebeb/808080/?text=Immagine" class="figure-img img-fluid rounded" alt="Un'immagine generica segnaposto con angoli arrotondati in una figura.">
        </figure>
      </a>
    </div>
  </div>
  <div class="col-12 col-lg-4">
    <div class="it-grid-item-wrapper">
      <a href="#">
        <figure class="figure img-full w-100">
          <img src="https://placehold.co/660x300/ebebeb/808080/?text=Immagine" class="figure-img img-fluid rounded" alt="Un'immagine generica segnaposto con angoli arrotondati in una figura.">
          <figcaption class="figure-caption it-griditem-text-wrapper">
            <span class="it-griditem-text">Testo didascalia</span>
            <svg role="img" class="icon"><title>Significato icona</title><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
          </figcaption>
        </figure>
      </a>
    </div>
  </div>
  <div class="col-12 col-lg-4">
    <div class="it-grid-item-wrapper it-grid-item-overlay">
      <a href="#">
        <figure class="figure img-full w-100 img-responsive-wrapper">
          <img src="https://placehold.co/660x300/ebebeb/808080/?text=Immagine" class="figure-img img-fluid rounded" alt="Un'immagine generica segnaposto con angoli arrotondati in una figura.">
          <figcaption class="figure-caption it-griditem-text-wrapper">
            <span class="it-griditem-text">Testo didascalia</span>
            <svg role="img" class="icon"><title>Significato icona</title><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
          </figcaption>
        </figure>
      </a>
    </div>
  </div>
</div>

Tipi di griglia

Standard

La griglia utilizzata è una variante delle classi di Bootstrap, con margini modificati.
Il contenitore della griglia è .it-grid-list-wrapper. Al posto della classe .row di Bootstrap viene utilizzata la classe custom .grid-row.

Attenzione

In questo esempio, non essendo presente alcuna caption, utilizziamo i <div> al posto di <figure>.

descrizione immagine
descrizione immagine
descrizione immagine
descrizione immagine
descrizione immagine
descrizione immagine
 

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

<div class="it-grid-list-wrapper">
  <div class="grid-row">
    <div class="col-6 col-lg-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <div class="img-responsive-wrapper">
            <div class="img-responsive">
              <div class="img-wrapper"><img src="https://placehold.co/660x300/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
            </div>
          </div>
        </a>
      </div>
    </div>
    <div class="col-6 col-lg-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <div class="img-responsive-wrapper">
            <div class="img-responsive">
              <div class="img-wrapper"><img src="https://placehold.co/660x300/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
            </div>
          </div>
        </a>
      </div>
    </div>
    <div class="col-6 col-lg-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <div class="img-responsive-wrapper">
            <div class="img-responsive">
              <div class="img-wrapper"><img src="https://placehold.co/660x300/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
            </div>
          </div>
        </a>
      </div>
    </div>
    <div class="col-6 col-lg-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <div class="img-responsive-wrapper">
            <div class="img-responsive">
              <div class="img-wrapper"><img src="https://placehold.co/660x300/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
            </div>
          </div>
        </a>
      </div>
    </div>
    <div class="col-6 col-lg-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <div class="img-responsive-wrapper">
            <div class="img-responsive">
              <div class="img-wrapper"><img src="https://placehold.co/660x300/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
            </div>
          </div>
        </a>
      </div>
    </div>
    <div class="col-6 col-lg-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <div class="img-responsive-wrapper">
            <div class="img-responsive">
              <div class="img-wrapper"><img src="https://placehold.co/660x300/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

Standard con didascalie

Per la corretta formattazione degli spazi di questo tipo di griglia, occorre aggiungere la classe .it-image-label-grid al div .it-grid-list-wrapper.

Un'immagine generica segnaposto con angoli arrotondati in una figura.
Testo didascalia Significato icona
Un'immagine generica segnaposto con angoli arrotondati in una figura.
Testo didascalia Significato icona
Un'immagine generica segnaposto con angoli arrotondati in una figura.
Testo didascalia Significato icona
Un'immagine generica segnaposto con angoli arrotondati in una figura.
Testo didascalia Significato icona
Un'immagine generica segnaposto con angoli arrotondati in una figura.
Testo didascalia Significato icona
Un'immagine generica segnaposto con angoli arrotondati in una figura.
Testo didascalia Significato icona 

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

<div class="it-grid-list-wrapper it-image-label-grid">
  <div class="grid-row">
    <div class="col-6 col-lg-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <figure class="figure img-full w-100">
            <img src="https://placehold.co/660x300/ebebeb/808080/?text=Immagine" class="figure-img img-fluid rounded" alt="Un'immagine generica segnaposto con angoli arrotondati in una figura.">
            <figcaption class="figure-caption it-griditem-text-wrapper">Testo didascalia 
              <svg role="img" class="icon"><title>Significato icona</title><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
            </figcaption>
          </figure>
        </a>
      </div>
    </div>
    <div class="col-6 col-lg-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <figure class="figure img-full w-100">
            <img src="https://placehold.co/660x300/ebebeb/808080/?text=Immagine" class="figure-img img-fluid rounded" alt="Un'immagine generica segnaposto con angoli arrotondati in una figura.">
            <figcaption class="figure-caption it-griditem-text-wrapper">Testo didascalia 
              <svg role="img" class="icon"><title>Significato icona</title><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
            </figcaption>
          </figure>
        </a>
      </div>
    </div>
    <div class="col-6 col-lg-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <figure class="figure img-full w-100">
            <img src="https://placehold.co/660x300/ebebeb/808080/?text=Immagine" class="figure-img img-fluid rounded" alt="Un'immagine generica segnaposto con angoli arrotondati in una figura.">
            <figcaption class="figure-caption it-griditem-text-wrapper">Testo didascalia 
              <svg role="img" class="icon"><title>Significato icona</title><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
            </figcaption>
          </figure>
        </a>
      </div>
    </div>
    <div class="col-6 col-lg-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <figure class="figure img-full w-100">
            <img src="https://placehold.co/660x300/ebebeb/808080/?text=Immagine" class="figure-img img-fluid rounded" alt="Un'immagine generica segnaposto con angoli arrotondati in una figura.">
            <figcaption class="figure-caption it-griditem-text-wrapper">Testo didascalia 
              <svg role="img" class="icon"><title>Significato icona</title><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
            </figcaption>
          </figure>
        </a>
      </div>
    </div>
    <div class="col-6 col-lg-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <figure class="figure img-full w-100">
            <img src="https://placehold.co/660x300/ebebeb/808080/?text=Immagine" class="figure-img img-fluid rounded" alt="Un'immagine generica segnaposto con angoli arrotondati in una figura.">
            <figcaption class="figure-caption it-griditem-text-wrapper">Testo didascalia 
              <svg role="img" class="icon"><title>Significato icona</title><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
            </figcaption>
          </figure>
        </a>
      </div>
    </div>
    <div class="col-6 col-lg-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <figure class="figure img-full w-100">
            <img src="https://placehold.co/660x300/ebebeb/808080/?text=Immagine" class="figure-img img-fluid rounded" alt="Un'immagine generica segnaposto con angoli arrotondati in una figura.">
            <figcaption class="figure-caption it-griditem-text-wrapper">Testo didascalia 
              <svg role="img" class="icon"><title>Significato icona</title><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
            </figcaption>
          </figure>
        </a>
      </div>
    </div>
  </div>
</div>

Proporzionale

La griglia proporzionale contiene elementi griglia con immagine e testo in overlay.
Per la corretta formattazione degli spazi di questo tipo di griglia occorre aggiungere la classe .it-quilted-grid al div .it-grid-list-wrapper. La griglia utilizza le classi di Bootstrap .col- per realizzare il layout colonnare.

I tipi di immagini utilizzabili sono sostanzialmente 2:

  • standard
  • orizzontale (con larghezza doppia rispetto all’immagine standard e di altezza uguale)

Per utilizzare l’immagine orizzontale, occorre aggiungere la classe .it-grid-item-double-w al div .it-grid-item-wrapper che contiene l’immagine.

Un'immagine generica segnaposto con angoli arrotondati in una figura.
Testo didascalia Significato icona
Un'immagine generica segnaposto con angoli arrotondati in una figura.
Testo didascalia Significato icona
Un'immagine generica segnaposto con angoli arrotondati in una figura.
Testo didascalia Significato icona
Un'immagine generica segnaposto con angoli arrotondati in una figura.
Testo didascalia Significato icona 

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

<div class="it-grid-list-wrapper it-quilted-grid">
  <div class="grid-row">
    <div class="col-12 col-md-6">
      <div class="it-grid-item-wrapper it-grid-item-overlay">
        <a href="#">
          <div class="img-responsive-wrapper">
            <div class="img-responsive">
                <figure class="img-wrapper">
                  <img src="https://placehold.co/660x300/ebebeb/808080/?text=Immagine" class="rounded" alt="Un'immagine generica segnaposto con angoli arrotondati in una figura.">
                  <figcaption class="figure-caption it-griditem-text-wrapper">
                    <span class="it-griditem-text">Testo didascalia</span>
                    <svg role="img" class="icon"><title>Significato icona</title><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
                  </figcaption>
                </figure>
            </div>
          </div>
        </a>
      </div>
    </div>
    <div class="col-12 col-md-6">
      <div class="grid-row">
        <div class="col-6">
          <div class="it-grid-item-wrapper it-grid-item-overlay">
            <a href="#">
              <div class="img-responsive-wrapper">
                <div class="img-responsive">
                    <figure class="img-wrapper">
                      <img src="https://placehold.co/660x300/ebebeb/808080/?text=Immagine" class="rounded" alt="Un'immagine generica segnaposto con angoli arrotondati in una figura.">
                      <figcaption class="figure-caption it-griditem-text-wrapper">
                        <span class="it-griditem-text">Testo didascalia</span>
                        <svg role="img" class="icon"><title>Significato icona</title><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
                      </figcaption>
                    </figure>
                </div>
              </div>
            </a>
          </div>
        </div>
        <div class="col-6">
          <div class="it-grid-item-wrapper it-grid-item-overlay">
            <a href="#">
              <div class="img-responsive-wrapper">
                <div class="img-responsive">
                    <figure class="img-wrapper">
                      <img src="https://placehold.co/660x300/ebebeb/808080/?text=Immagine" class="rounded" alt="Un'immagine generica segnaposto con angoli arrotondati in una figura.">
                      <figcaption class="figure-caption it-griditem-text-wrapper">
                        <span class="it-griditem-text">Testo didascalia</span>
                        <svg role="img" class="icon"><title>Significato icona</title><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
                      </figcaption>
                    </figure>
                </div>
              </div>
            </a>
          </div>
        </div>
        <div class="col-12">
          <div class="it-grid-item-wrapper it-grid-item-overlay it-grid-item-double-w">
            <a href="#">
              <div class="img-responsive-wrapper">
                <div class="img-responsive">
                    <figure class="img-wrapper">
                      <img src="https://placehold.co/660x300/ebebeb/808080/?text=Immagine" class="rounded" alt="Un'immagine generica segnaposto con angoli arrotondati in una figura.">
                      <figcaption class="figure-caption it-griditem-text-wrapper">
                        <span class="it-griditem-text">Testo didascalia</span>
                        <svg role="img" class="icon"><title>Significato icona</title><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
                      </figcaption>
                    </figure>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Masonry

Aggiungendo data-bs-toggle="masonry" al contenitore row, verrà attivato l’effetto Masonry sulla griglia responsiva.

Gli attributi utilizzati nella sezione successiva possono essere passati tramite data-bs-{nome-attributo} (ad esempio data-bs-gutter="100").

descrizione immagine
Didascalia Significato icona
descrizione immagine
Didascalia Significato icona
descrizione immagine
Didascalia Significato icona
descrizione immagine
Didascalia Significato icona
descrizione immagine
Didascalia Significato icona
descrizione immagine
Didascalia Significato icona
descrizione immagine
Didascalia Significato icona
descrizione immagine
Didascalia Significato icona
descrizione immagine
Didascalia Significato icona
descrizione immagine
Didascalia Significato icona
descrizione immagine
Didascalia Significato icona
descrizione immagine
Didascalia Significato icona 

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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160

<div class="container-fluid">
  <div class="row it-masonry" data-bs-toggle="masonry">
    <div class="col-sm-6 col-lg-4 mb-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <figure class="figure img-full w-100">
            <img class="figure-img" src="https://placehold.co/400x300/ebebeb/808080/?text=Immagine" alt="descrizione immagine">
            <figcaption class="figure-caption it-griditem-text-wrapper">
              <span class="it-griditem-text">Didascalia</span>
              <svg role="img" class="icon"><title>Significato icona</title><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
            </figcaption>
          </figure>
        </a>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4 mb-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <figure class="figure img-full w-100">
            <img class="figure-img" src="https://placehold.co/400x500/ebebeb/808080/?text=Immagine" alt="descrizione immagine">
            <figcaption class="figure-caption it-griditem-text-wrapper">
              <span class="it-griditem-text">Didascalia</span>
              <svg role="img" class="icon"><title>Significato icona</title><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
            </figcaption>
          </figure>
        </a>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4 mb-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <figure class="figure img-full w-100">
            <img class="figure-img" src="https://placehold.co/400x700/ebebeb/808080/?text=Immagine" alt="descrizione immagine">
            <figcaption class="figure-caption it-griditem-text-wrapper">
              <span class="it-griditem-text">Didascalia</span>
              <svg role="img" class="icon"><title>Significato icona</title><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
            </figcaption>
          </figure>
        </a>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4 mb-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <figure class="figure img-full w-100">
            <img class="figure-img" src="https://placehold.co/400x600/ebebeb/808080/?text=Immagine" alt="descrizione immagine">
            <figcaption class="figure-caption it-griditem-text-wrapper">
              <span class="it-griditem-text">Didascalia</span>
              <svg role="img" class="icon"><title>Significato icona</title><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
            </figcaption>
          </figure>
        </a>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4 mb-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <figure class="figure img-full w-100">
            <img class="figure-img" src="https://placehold.co/400x500/ebebeb/808080/?text=Immagine" alt="descrizione immagine">
            <figcaption class="figure-caption it-griditem-text-wrapper">
              <span class="it-griditem-text">Didascalia</span>
              <svg role="img" class="icon"><title>Significato icona</title><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
            </figcaption>
          </figure>
        </a>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4 mb-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <figure class="figure img-full w-100">
            <img class="figure-img" src="https://placehold.co/400x400/ebebeb/808080/?text=Immagine" alt="descrizione immagine">
            <figcaption class="figure-caption it-griditem-text-wrapper">
              <span class="it-griditem-text">Didascalia</span>
              <svg role="img" class="icon"><title>Significato icona</title><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
            </figcaption>
          </figure>
        </a>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4 mb-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <figure class="figure img-full w-100">
            <img class="figure-img" src="https://placehold.co/400x600/ebebeb/808080/?text=Immagine" alt="descrizione immagine">
            <figcaption class="figure-caption it-griditem-text-wrapper">
              <span class="it-griditem-text">Didascalia</span>
              <svg role="img" class="icon"><title>Significato icona</title><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
            </figcaption>
          </figure>
        </a>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4 mb-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <figure class="figure img-full w-100">
            <img class="figure-img" src="https://placehold.co/400x500/ebebeb/808080/?text=Immagine" alt="descrizione immagine">
            <figcaption class="figure-caption it-griditem-text-wrapper">
              <span class="it-griditem-text">Didascalia</span>
              <svg role="img" class="icon"><title>Significato icona</title><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
            </figcaption>
          </figure>
        </a>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4 mb-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <figure class="figure img-full w-100">
            <img class="figure-img" src="https://placehold.co/400x400/ebebeb/808080/?text=Immagine" alt="descrizione immagine">
            <figcaption class="figure-caption it-griditem-text-wrapper">
              <span class="it-griditem-text">Didascalia</span>
              <svg role="img" class="icon"><title>Significato icona</title><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
            </figcaption>
          </figure>
        </a>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4 mb-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <figure class="figure img-full w-100">
            <img class="figure-img" src="https://placehold.co/400x600/ebebeb/808080/?text=Immagine" alt="descrizione immagine">
            <figcaption class="figure-caption it-griditem-text-wrapper">
              <span class="it-griditem-text">Didascalia</span>
              <svg role="img" class="icon"><title>Significato icona</title><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
            </figcaption>
          </figure>
        </a>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4 mb-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <figure class="figure img-full w-100">
            <img class="figure-img" src="https://placehold.co/400x500/ebebeb/808080/?text=Immagine" alt="descrizione immagine">
            <figcaption class="figure-caption it-griditem-text-wrapper">
              <span class="it-griditem-text">Didascalia</span>
              <svg role="img" class="icon"><title>Significato icona</title><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
            </figcaption>
          </figure>
        </a>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4 mb-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <figure class="figure img-full w-100">
            <img class="figure-img" src="https://placehold.co/400x400/ebebeb/808080/?text=Immagine" alt="descrizione immagine">
            <figcaption class="figure-caption it-griditem-text-wrapper">
              <span class="it-griditem-text">Didascalia</span>
              <svg role="img" class="icon"><title>Significato icona</title><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
            </figcaption>
          </figure>
        </a>
      </div>
    </div>
  </div>
</div>

Attivazione tramite codice

Nel caso in cui si desidera che il componente sia inizializzato in maniera automatica utilizzare l’attributo data-bs-toggle specifico per la sua inizializzazione.

Nel caso in cui si desidera importare e inizializzare autonomamente il componente l’attributo data-bs-toggle specifico non deve essere incluso così da evitare inizializzazioni automatiche che possono portare a comportamenti inaspettati.

Per maggiori informazioni consulta la sezione JavaScript di Bootstrap Italia.

È possibile abilitare Masonry manualmente utilizzando questo script:

1
2
3
4

import { Masonry } from 'bootstrap-italia';

const masonryElement = document.querySelector('#my-masonry');
const masonry = new Masonry(masonryElement, options);

Opzioni

Nome Tipo Predefinito Descrizione
baseWidth number 255 Larghezza target degli elementi.
gutter number 10 Larghezza/altezza dello spazio tra gli elementi. Usa gutterX/gutterY per impostare valori diversi.
gutterX number null Larghezza dello spazio tra gli elementi. Serve gutterY per funzionare, fallback su "gutter".
gutterY number null Altezza dello spazio tra gli elementi. Serve gutterX per funzionare, fallback su "gutter".
minify boolean true Se MiniMasonry posiziona gli elementi nella colonna più corta o mantiene l'ordine esatto dell'elenco.
surroundingGutter boolean true Imposta lo spazio a sinistra sulla prima colonna e lo spazio a destra sull'ultima.
ultimateGutter number 5 Gutter applicato quando può essere visualizzata solo 1 colonna.
direction 'ltr' o 'rtl' 'ltr' Direzione di ordinamento, "ltr" o "rtl".
wedge boolean false "false" inizierà l'ordinamento dal centro, "true" inizierà da sinistra o da destra in base al parametro "direction".

Metodi

Metodo Descrizione
getInstance Metodo statico che consente di ottenere l'istanza di avviso associata a un elemento DOM, è possibile utilizzarlo in questo modo: Masonry.getInstance(domElement).
getOrCreateInstance Metodo statico che restituisce un'istanza di avviso associata a un elemento DOM o ne crea una nuova nel caso in cui non fosse stata inizializzata. Puoi utilizzarla in questo modo: Masonry.getOrCreateInstance(element).
dispose Rimuove la funzionalità Masonry.
layout Se l'elenco è cambiato, attiva un relayout del componente.

Breaking change

Utilizzare i tag <figure> e <figcaption> per liste di immagini con didascalia.