Фигури

Документация и примери за показване на свързани изображения и текст с фигурния компонент в Bootstrap.

На тази страница

Всеки път, когато трябва да покажете част от съдържанието - като изображение с незадължителен надпис, помислете за използването на <figure>.

Използвайте включените .figureи класове, .figure-imgза .figure-captionда предоставите някои основни стилове за HTML5 <figure>и <figcaption>елементи. Изображенията във фигурите нямат явен размер, така че не забравяйте да добавите .img-fluidкласа към вашия <img>, за да го направите отзивчив.

Надпис за горното изображение.

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>

Подравняването на надписа на фигурата е лесно с нашите текстови помощни програми .

Надпис за горното изображение.

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>

дързък

Променливи

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