Үндсэн агуулга руу шилжих Docs навигаци руу алгасах
in English

Зураг

Bootstrap дээрх зургийн бүрэлдэхүүн хэсэгтэй холбоотой зураг, текстийг харуулах баримт бичиг, жишээ.

Энэ хуудсан дээр

Нэмэлт тайлбартай зураг гэх мэт контентыг харуулах шаардлагатай үедээ <figure>.

Оруулсан .figure, .figure-imgболон .figure-captionангиудыг ашиглан HTML5 <figure>болон <figcaption>элементүүдийн үндсэн хэв маягийг өгнө үү. .img-fluidЗурган дээрх зургууд нь тодорхой хэмжээтэй байдаггүй тул үүнийг хариу үйлдэл үзүүлэхийн тулд ангидаа оруулахаа мартуузай <img>.

Placeholder 400x300
Дээрх зургийн тайлбар.
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

Зургийн тайлбарыг зэрэгцүүлэх нь манай текст хэрэгслийн тусламжтайгаар хялбар байдаг .

Placeholder 400x300
Дээрх зургийн тайлбар.
<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;