피규어

부트스트랩에서 Figure 구성 요소와 관련된 이미지 및 텍스트를 표시하기 위한 문서 및 예제입니다.

이 페이지에서

선택적 캡션이 있는 이미지와 같이 콘텐츠를 표시해야 할 때마다 <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;