Vés al contingut principal Saltar a la navegació de documents
Check
in English

Xifres

Documentació i exemples per mostrar imatges i text relacionats amb el component figura a Bootstrap.

En aquesta pàgina

Sempre que necessiteu mostrar un contingut, com ara una imatge amb un subtítol opcional, penseu a utilitzar un fitxer <figure>.

Utilitzeu les classes incluses i .figureper proporcionar alguns estils de referència per a HTML5 i elements. Les imatges en figures no tenen una mida explícita, així que assegureu-vos d'afegir la classe a la vostra per fer-la responsiva..figure-img.figure-caption<figure><figcaption>.img-fluid<img>

Placeholder 400x300
Un títol per a la imatge de dalt.
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>

Alinear el títol de la figura és fàcil amb les nostres utilitats de text .

Placeholder 400x300
Un títol per a la imatge de dalt.
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

Les variables

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