Salta al contenuto principale Passa alla navigazione dei documenti
Check
in English

Figure

Documentazione ed esempi per la visualizzazione di immagini e testo correlati con il componente figura in Bootstrap.

Su questa pagina

Ogni volta che devi visualizzare un contenuto, come un'immagine con una didascalia facoltativa, prendi in considerazione l'utilizzo di un file <figure>.

Usa le classi incluse e .figureper fornire alcuni stili di base per HTML5 e gli elementi. Le immagini nelle figure non hanno dimensioni esplicite, quindi assicurati di aggiungere la classe alla tua per renderla reattiva..figure-img.figure-caption<figure><figcaption>.img-fluid<img>

Placeholder 400x300
Una didascalia per l'immagine sopra.
html
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

Allineare la didascalia della figura è facile con le nostre utilità di testo .

Placeholder 400x300
Una didascalia per l'immagine sopra.
html
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
</figure>

Sass

Variabili

$figure-caption-font-size:          $small-font-size;
$figure-caption-color:              $gray-600;