Un componente per focalizzare l’attenzione su un contenuto.
Un dimmer occupa tutta l’altezza e la larghezza dell’elemento all’interno del quale è contenuto.
L’elemento contenitore deve avere la classe .dimmable mentre il dimmer avrà un ID univoco che sarà utilizzato per l’attivazione e l’occultamento attraverso i seguenti comandi:
1
2
3
4
5
6
7
8
9
// istanziamento componentevarmyDimmer=document.getElementById('ID_ELEMENTO')vardimmer=newbootstrap.Dimmer(myDimmer)// mostra Dimmerdimmer.show()// nascondi Dimmerdimmer.hide()
Esempio
Il dimmer si compone di un wrapper generale .dimmer e di un contenitore .dimmer-inner.
Il testo è contenuto all’interno di un tag <p> e può essere preceduto da un’icona contenuta in un <div> con classe .dimmer-icon.
Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.
<divclass="toggles col-md-6 col-lg-4"><labelfor="toggleDimmer1">
Attiva Dimmer 1
<inputtype="checkbox"id="toggleDimmer1"data-bs-toggle="dimmer"data-bs-target="#dimmer1"checked><spanclass="lever"></span></label></div><divclass="row dimmable"><divclass="dimmer fade show"id="dimmer1"><divclass="dimmer-inner"><divclass="dimmer-icon"><svgclass="icon icon-xl"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-unlocked"></use></svg></div><p>Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.</p></div></div><divclass="col-12 col-md-6 col-lg-6 my-3 my-md-4"><!--start it-card--><articleclass="it-card it-card-image rounded shadow-sm border"><!--card first child is the title (link)--><h3class="it-card-title "><ahref="#">Titolo del contenuto</a></h3><!--card second child is the image (optional)--><divclass="it-card-image-wrapper"><divclass="ratio ratio-16x9"><figureclass="figure img-full"><imgsrc="https://placeholderimage.eu/api/city/800/600"alt="Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto."></figure></div></div><!--card body content--><divclass="it-card-body"><pclass="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p></div><!--finally the card footer metadata--><footerclass="it-card-related it-card-footer"><timeclass="it-card-date"datetime="2025-04-22">22 aprile 2025</time></footer></article><!--end it-card--></div><divclass="col-12 col-md-6 col-lg-6 my-3 my-md-4"><!--start it-card--><articleclass="it-card it-card-image rounded shadow-sm border"><!--card first child is the title (link)--><h3class="it-card-title "><ahref="#">Titolo del contenuto</a></h3><!--card second child is the image (optional)--><divclass="it-card-image-wrapper"><divclass="ratio ratio-16x9"><figureclass="figure img-full"><imgsrc="https://placeholderimage.eu/api/city/800/600"alt="Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto."></figure></div></div><!--card body content--><divclass="it-card-body"><pclass="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p></div><!--finally the card footer metadata--><footerclass="it-card-related it-card-footer"><timeclass="it-card-date"datetime="2025-04-22">22 aprile 2025</time></footer></article><!--end it-card--></div></div>
Se si vuole iniziare con il dimmer disabilitato è necessario utilizzare l’attributo aria-hidden.
Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.
<divclass="toggles col-md-6 col-lg-4"><labelfor="toggleDimmer2">
Attiva Dimmer 2
<inputtype="checkbox"id="toggleDimmer2"data-bs-toggle="dimmer"data-bs-target="#dimmer2"><spanclass="lever"></span></label></div><divclass="row dimmable"><divclass="dimmer fade"id="dimmer2"aria-hidden="true"><divclass="dimmer-inner"><divclass="dimmer-icon"><svgclass="icon icon-xl"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-unlocked"></use></svg></div><p>Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.</p></div></div><divclass="col-12 col-md-6 col-lg-6 my-3 my-md-4"><!--start it-card--><articleclass="it-card it-card-image rounded shadow-sm border"><!--card first child is the title (link)--><h3class="it-card-title "><ahref="#">Titolo del contenuto</a></h3><!--card second child is the image (optional)--><divclass="it-card-image-wrapper"><divclass="ratio ratio-16x9"><figureclass="figure img-full"><imgsrc="https://placeholderimage.eu/api/city/800/600"alt="Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto."></figure></div></div><!--card body content--><divclass="it-card-body"><pclass="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p></div><!--finally the card footer metadata--><footerclass="it-card-related it-card-footer"><timeclass="it-card-date"datetime="2025-04-22">22 aprile 2025</time></footer></article><!--end it-card--></div><divclass="col-12 col-md-6 col-lg-6 my-3 my-md-4"><!--start it-card--><articleclass="it-card it-card-image rounded shadow-sm border"><!--card first child is the title (link)--><h3class="it-card-title "><ahref="#">Titolo del contenuto</a></h3><!--card second child is the image (optional)--><divclass="it-card-image-wrapper"><divclass="ratio ratio-16x9"><figureclass="figure img-full"><imgsrc="https://placeholderimage.eu/api/city/800/600"alt="Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto."></figure></div></div><!--card body content--><divclass="it-card-body"><pclass="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p></div><!--finally the card footer metadata--><footerclass="it-card-related it-card-footer"><timeclass="it-card-date"datetime="2025-04-22">22 aprile 2025</time></footer></article><!--end it-card--></div></div>
Colore Primario
Aggiungendo la classe .dimmer-primary al wrapper del dimmer si ottiene una versione con sfondo di colore primario.
Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus. Nulla vulputate luctus sem, eu maximus lacus faucibus eget. Fusce tristique enim augue, sed suscipit lorem bibendum vel. Donec vehicula vehicula nibh non suscipit.
<divclass="toggles col-md-6 col-lg-4"><labelfor="toggleDimmer3">
Attiva Dimmer 2
<inputtype="checkbox"id="toggleDimmer3"data-bs-toggle="dimmer"data-bs-target="#dimmer3"checked><spanclass="lever"></span></label></div><divclass="row dimmable"><divclass="dimmer dimmer-primary fade show"id="dimmer3"><divclass="dimmer-inner"><p>Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus. Nulla vulputate luctus sem, eu maximus lacus faucibus eget. Fusce tristique enim augue, sed suscipit lorem bibendum vel. Donec vehicula vehicula nibh non suscipit.</p></div></div><divclass="col-12 col-md-6 col-lg-6 my-3 my-md-4"><!--start it-card--><articleclass="it-card it-card-image rounded shadow-sm border"><!--card first child is the title (link)--><h3class="it-card-title "><ahref="#">Titolo del contenuto</a></h3><!--card second child is the image (optional)--><divclass="it-card-image-wrapper"><divclass="ratio ratio-16x9"><figureclass="figure img-full"><imgsrc="https://placeholderimage.eu/api/city/800/600"alt="Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto."></figure></div></div><!--card body content--><divclass="it-card-body"><pclass="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p></div><!--finally the card footer metadata--><footerclass="it-card-related it-card-footer"><timeclass="it-card-date"datetime="2025-04-22">22 aprile 2025</time></footer></article><!--end it-card--></div><divclass="col-12 col-md-6 col-lg-6 my-3 my-md-4"><!--start it-card--><articleclass="it-card it-card-image rounded shadow-sm border"><!--card first child is the title (link)--><h3class="it-card-title "><ahref="#">Titolo del contenuto</a></h3><!--card second child is the image (optional)--><divclass="it-card-image-wrapper"><divclass="ratio ratio-16x9"><figureclass="figure img-full"><imgsrc="https://placeholderimage.eu/api/city/800/600"alt="Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto."></figure></div></div><!--card body content--><divclass="it-card-body"><pclass="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p></div><!--finally the card footer metadata--><footerclass="it-card-related it-card-footer"><timeclass="it-card-date"datetime="2025-04-22">22 aprile 2025</time></footer></article><!--end it-card--></div></div>
Dimmer con Azioni
Un dimmer può contenere tasti collegati ad azioni ed un titolo descrittivo.
I pulsanti vanno inseriti in un <div> con classi .dimmer-buttons e .bg-dark. Se è presente un solo pulsante aggiungere la classe .single-button.
<divclass="toggles col-md-6 col-lg-4"><labelfor="toggleDimmer4">
Attiva Dimmer 4
<inputtype="checkbox"id="toggleDimmer4"data-bs-toggle="dimmer"data-bs-target="#dimmer4"checked><spanclass="lever"></span></label></div><divclass="row dimmable"><divclass="dimmer fade show"id="dimmer4"><divclass="dimmer-inner"><h4>Titolo Dimmer</h4><divclass="dimmer-buttons bg-dark"><buttontype="button"class="btn btn-outline-primary">Azione secondaria</button><buttontype="button"class="btn btn-primary">Azione primaria</button></div></div></div><divclass="col-12 col-md-6 col-lg-6 my-3 my-md-4"><!--start it-card--><articleclass="it-card it-card-image rounded shadow-sm border"><!--card first child is the title (link)--><h3class="it-card-title "><ahref="#">Titolo del contenuto</a></h3><!--card second child is the image (optional)--><divclass="it-card-image-wrapper"><divclass="ratio ratio-16x9"><figureclass="figure img-full"><imgsrc="https://placeholderimage.eu/api/city/800/600"alt="Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto."></figure></div></div><!--card body content--><divclass="it-card-body"><pclass="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p></div><!--finally the card footer metadata--><footerclass="it-card-related it-card-footer"><timeclass="it-card-date"datetime="2025-04-22">22 aprile 2025</time></footer></article><!--end it-card--></div><divclass="col-12 col-md-6 col-lg-6 my-3 my-md-4"><!--start it-card--><articleclass="it-card it-card-image rounded shadow-sm border"><!--card first child is the title (link)--><h3class="it-card-title "><ahref="#">Titolo del contenuto</a></h3><!--card second child is the image (optional)--><divclass="it-card-image-wrapper"><divclass="ratio ratio-16x9"><figureclass="figure img-full"><imgsrc="https://placeholderimage.eu/api/city/800/600"alt="Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto."></figure></div></div><!--card body content--><divclass="it-card-body"><pclass="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p></div><!--finally the card footer metadata--><footerclass="it-card-related it-card-footer"><timeclass="it-card-date"datetime="2025-04-22">22 aprile 2025</time></footer></article><!--end it-card--></div></div>
Colore Primario
Aggiungendo la classe .dimmer-primary al wrapper del dimmer si ottiene una versione con sfondo di colore primario.
<divclass="toggles col-md-6 col-lg-4"><labelfor="toggleDimmer5">
Attiva Dimmer 5
<inputtype="checkbox"id="toggleDimmer5"data-bs-toggle="dimmer"data-bs-target="#dimmer5"checked><spanclass="lever"></span></label></div><divclass="row dimmable"><divclass="dimmer dimmer-primary fade show"id="dimmer5"><divclass="dimmer-inner"><h4>Titolo Dimmer</h4><divclass="dimmer-buttons single-button bg-dark"><buttontype="button"class="btn btn-primary">Azione primaria</button></div></div></div><divclass="col-12 col-md-6 col-lg-6 my-3 my-md-4"><!--start it-card--><articleclass="it-card it-card-image rounded shadow-sm border"><!--card first child is the title (link)--><h3class="it-card-title "><ahref="#">Titolo del contenuto</a></h3><!--card second child is the image (optional)--><divclass="it-card-image-wrapper"><divclass="ratio ratio-16x9"><figureclass="figure img-full"><imgsrc="https://placeholderimage.eu/api/city/800/600"alt="Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto."></figure></div></div><!--card body content--><divclass="it-card-body"><pclass="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p></div><!--finally the card footer metadata--><footerclass="it-card-related it-card-footer"><timeclass="it-card-date"datetime="2025-04-22">22 aprile 2025</time></footer></article><!--end it-card--></div><divclass="col-12 col-md-6 col-lg-6 my-3 my-md-4"><!--start it-card--><articleclass="it-card it-card-image rounded shadow-sm border"><!--card first child is the title (link)--><h3class="it-card-title "><ahref="#">Titolo del contenuto</a></h3><!--card second child is the image (optional)--><divclass="it-card-image-wrapper"><divclass="ratio ratio-16x9"><figureclass="figure img-full"><imgsrc="https://placeholderimage.eu/api/city/800/600"alt="Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto."></figure></div></div><!--card body content--><divclass="it-card-body"><pclass="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p></div><!--finally the card footer metadata--><footerclass="it-card-related it-card-footer"><timeclass="it-card-date"datetime="2025-04-22">22 aprile 2025</time></footer></article><!--end it-card--></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.
Metodo statico che consente di ottenere l'istanza di avviso associata a un elemento DOM, è possibile utilizzarlo in questo modo: Dimmer.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: Dimmer.getOrCreateInstance(element).
dispose
Rimuove la funzionalità Dimmer.
show
Mostra il componente.
hide
Nasconde il componente.
Breaking change
Implementato negli esempi il nuovo componente card definito dalle classi .it-card e relativi modificatori.
Le classi legacy di Bootstrap .card sono ora deprecate ma saranno mantenute nei fogli di stile fino al prossimo rilascio maggiore, per permettere una migrazione graduale.