Bootstrap รูปร่างภาพ
มุมโค้งมน:
วงกลม:
Thumbnail:
มุมโค้งมน
.img-rounded ระดับเพิ่มมุมโค้งมนในภาพ (IE8 ไม่สนับสนุนมุมโค้งมน):
ตัวอย่าง
<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre"
width="304" height="236"> ลองตัวเอง» วงกลม
.img-circle ชั้นรูปร่างภาพไปยังวงกลม (IE8 ไม่สนับสนุนมุมโค้งมน):
ตัวอย่าง
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre"
width="304" height="236"> ลองตัวเอง» รูปขนาดย่อ
.img-thumbnail ระดับรูปร่างภาพไปยังภาพขนาดย่อ:
ตัวอย่าง
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre"
width="304" height="236"> ลองตัวเอง» แสดงสินค้าที่ตอบสนองต่อ
ภาพมาในทุกขนาด เพื่อทำหน้าจอ ภาพที่ตอบสนองอัตโนมัติปรับให้พอดีกับขนาดของหน้าจอ
สร้างภาพการตอบสนองโดยการเพิ่ม .img-responsive ระดับไป <img> แท็ก ภาพแล้วจะขนาดไว้อย่างสวยงามเพื่อองค์ประกอบหลัก
.img-responsive ระดับใช้ display: block; และ max-width: 100%; และ height: auto; ไปยังภาพที่:
แกลเลอรี่ภาพ
นอกจากนี้คุณยังสามารถใช้ Bootstrap's ระบบกริดร่วมกับ .thumbnail ชั้นเรียนเพื่อสร้างแกลเลอรี่ภาพ:
ตัวอย่าง
<div class="row">
<div class="col-md-4">
<a href="pulpitrock.jpg" class="thumbnail">
<p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
<img src="pulpitrock.jpg" alt="Pulpit
Rock" style="width:150px;height:150px">
</a>
</div>
<div
class="col-md-4">
<a href="moustiers-sainte-marie.jpg"
class="thumbnail">
<p>Moustiers-Sainte-Marie:
Considered as one of the "most beautiful villages of France".</p>
<img src="moustiers-sainte-marie.jpg" alt="Moustiers Sainte Marie"
style="width:150px;height:150px">
</a>
</div>
<div class="col-md-4">
<a href="cinqueterre.jpg" class="thumbnail">
<p>The Cinque Terre: A rugged portion of coast in the Liguria region of
Italy.</p>
<img src="cinqueterre.jpg"
alt="Cinque Terre" style="width:150px;height:150px">
</a>
</div>
</div> ลองตัวเอง» ฝังตอบสนอง
ยังช่วยให้วิดีโอหรือภาพสไลด์ขนาดถูกต้องบนอุปกรณ์ใด ๆ
ชั้นเรียนสามารถนำมาใช้โดยตรงกับ <iframe>, <embed>, <video> และ <object> องค์ประกอบ
ตัวอย่างต่อไปนี้สร้างวิดีโอตอบสนองโดยการเพิ่ม .embed-responsive-item ระดับไปยัง <iframe> แท็ก (วิดีโอแล้วจะขนาดไว้อย่างสวยงามเพื่อองค์ประกอบหลัก) ที่มี <div> กำหนดอัตราส่วนของวิดีโอ:
ตัวอย่าง
<div class="embed-responsive embed-responsive-16by9">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div> ลองตัวเอง» อัตราส่วนคืออะไร?
อัตราส่วนของภาพที่อธิบายถึงสัดส่วนความสัมพันธ์ระหว่างกว้างและความสูงของมัน สองอัตราส่วนวิดีโอทั่วไปเป็น 4: 3 (รูปแบบสากลวิดีโอของศตวรรษที่ 20) และ 16: 9 (สากลสำหรับโทรทัศน์ HD และโทรทัศน์ระบบดิจิตอลของยุโรป)
คุณสามารถเลือกระหว่างสองชั้นอัตราส่วน:
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div>ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย»
สมบูรณ์ Bootstrap อ้างอิงภาพ
สำหรับอ้างอิงที่สมบูรณ์ของการเรียนภาพทั้งหมดไปที่เราสมบูรณ์ Bootstrap อ้างอิงภาพ