Skip to main content

Bootstrap Italia

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

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.

Breaking feature dalla versione 2.11.0

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

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="/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="/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.

descrizione immagine</div> </div> </div> </a> </div> </div>
descrizione immagine</div> </div> </div> </a> </div> </div>
descrizione immagine</div> </div> </div> </a> </div> </div>
descrizione immagine</div> </div> </div> </a> </div> </div>
descrizione immagine</div> </div> </div> </a> </div> </div>
descrizione immagine</div> </div> </div> </a> </div> </div> </div> </div> </div> 
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

<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="#">
          <figure class="figure img-full w-100">
            <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="#">
          <figure class="figure img-full w-100">
            <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="#">
          <figure class="figure img-full w-100">
            <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="#">
          <figure class="figure img-full w-100">
            <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="#">
          <figure class="figure img-full w-100">
            <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="#">
          <figure class="figure img-full w-100">
            <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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/dist/svg/sprites.svg#it-code-circle"></use></svg>
                      </figcaption>
                    </figure>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
### Masonry Masonry è incluso in Bootstrap Italia. Per un elenco di tutti i possibili parametri di configurazione consultare la [documentazione completa](https://masonry.desandro.com/). Aggiungendo `data-bs-toggle="masonry"` al contenitore `row`, verrà attivato l'effetto Masonry sulla griglia responsiva.
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 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="/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 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="/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 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="/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 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="/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 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="/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 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="/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 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="/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 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="/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 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="/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 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="/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 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="/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 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="/dist/svg/sprites.svg#it-code-circle"></use></svg>
            </figcaption>
          </figure>
        </a>
      </div>
    </div>
  </div>
</div>
#### Abilitare Masonry via JavaScript È possibile abilitare Masonry manualmente utilizzando questo script: ```js var elementList = [].slice.call(document.querySelectorAll('.it-masonry')) var masonryList = elementList.map(function (element) { return new bootstrap.Masonry(element) }) ``` #### Elenco dei metodi disponibili
Metodo Descrizione
dispose Rimuove le funzionalità Masonry
getInstance Metodo statico che restituisce l'istanza Masonry associata ad un elemento del DOM. Esempio: bootstrap.Masonry.getInstance(element)
getOrCreateInstance Metodo statico che restituisce un'istanza Masonry associata ad un elemento del DOM o ne crea una nuova nel caso non fosse stata inizializzata. Esempio: bootstrap.Masonry.getOrCreateInstance(element)