ตัวเลข

เอกสารประกอบและตัวอย่างสำหรับการแสดงรูปภาพและข้อความที่เกี่ยวข้องด้วยองค์ประกอบรูปใน 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;