피규어

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

선택적 캡션이 있는 이미지와 같이 콘텐츠를 표시해야 할 때마다 <figure>.

포함된 .figure, .figure-img및 .figure-caption클래스를 사용하여 HTML5 <figure>및 <figcaption>요소에 대한 몇 가지 기본 스타일을 제공합니다. 그림의 이미지에는 명시적인 크기가 없으므로 반응형으로 만들려면 .img-fluid클래스를 클래스에 추가해야 합니다.<img>

<figure class="figure">
  <img src=".../400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

그림의 캡션을 정렬하는 것은 텍스트 유틸리티 를 사용하면 쉽습니다 .

<figure class="figure">
  <img src=".../400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>