ตัวเลข

เอกสารประกอบและตัวอย่างสำหรับการแสดงรูปภาพและข้อความที่เกี่ยวข้องด้วยองค์ประกอบรูปใน Bootstrap

เมื่อใดก็ตามที่คุณต้องการแสดงเนื้อหา เช่น รูปภาพที่มีคำบรรยาย ให้พิจารณาใช้ไฟล์<figure>.

ใช้คลาสที่รวม.figureและ.figure-imgคลาส.figure-captionเพื่อจัดเตรียมรูปแบบพื้นฐานสำหรับ HTML5 <figure>และ<figcaption>องค์ประกอบ รูปภาพในรูปไม่มีขนาดที่ชัดเจน ดังนั้นอย่าลืมเพิ่ม.img-fluidคลาสของคุณ<img>เพื่อให้ตอบสนองได้

<figure class="figure">
  <img src="..." 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="..." 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>