in English
피규어
부트스트랩에서 Figure 구성 요소와 관련된 이미지 및 텍스트를 표시하기 위한 문서 및 예제입니다.
이 페이지에서
선택적 캡션이 있는 이미지와 같이 콘텐츠를 표시해야 할 때마다 <figure>
.
포함된 .figure
, .figure-img
및 .figure-caption
클래스를 사용하여 HTML5 <figure>
및 <figcaption>
요소에 대한 몇 가지 기본 스타일을 제공합니다. 그림의 이미지에는 명시적인 크기가 없으므로 반응형으로 만들려면 .img-fluid
클래스를 클래스에 추가해야 합니다.<img>
<figure class="figure">
<img src="..." class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
그림의 캡션을 정렬하는 것은 텍스트 유틸리티 를 사용하면 쉽습니다 .
<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;