Bootstrap รูปภาพ
Bootstrap รูปภาพรูปร่าง
มุมโค้งมน:
วงกลม:
ภาพขนาดย่อ:
มุมโค้งมน
คลาส.img-roundedเพิ่มมุมมนให้กับรูปภาพ (IE8 ไม่รองรับมุมมน):
ตัวอย่าง
<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre">
วงกลม
คลาส.img-circleกำหนดรูปภาพให้เป็นวงกลม (IE8 ไม่รองรับมุมโค้งมน):
ตัวอย่าง
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque
Terre">
รูปขนาดย่อ
ชั้น.img-thumbnailเรียนกำหนดรูปเป็นภาพขนาดย่อ:
ตัวอย่าง
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
รูปภาพที่ตอบสนอง
รูปภาพมาในทุกขนาด หน้าจอก็เช่นกัน รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์จะปรับให้พอดีกับขนาดของหน้าจอโดยอัตโนมัติ
สร้างภาพที่ตอบสนองโดยการเพิ่ม.img-responsiveคลาสให้กับ<img>แท็ก รูปภาพจะปรับขนาดอย่างสวยงามตามองค์ประกอบหลัก
คลาส.img-responsiveใช้display: block;และmax-width: 100%;กับ
height: auto;รูปภาพ:
ตัวอย่าง
<img class="img-responsive" src="img_chania.jpg" alt="Chania">
แกลเลอรี่ภาพ
คุณยังสามารถใช้ระบบกริดของ Bootstrap ร่วมกับ.thumbnailคลาสเพื่อสร้างแกลเลอรีรูปภาพ
หมายเหตุ:คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับระบบกริดในภายหลังในบทช่วยสอนนี้ (วิธีสร้างเลย์เอาต์ที่มีจำนวนคอลัมน์ต่างกัน)
ตัวอย่าง
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="/w3images/lights.jpg">
<img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="/w3images/nature.jpg">
<img src="/w3images/nature.jpg" alt="Nature" style="width:100%">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="/w3images/fjords.jpg">
<img src="/w3images/fjords.jpg" alt="Fjords" style="width:100%">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</div>
</div>
การฝังที่ตอบสนอง
ให้วิดีโอหรือสไลด์โชว์ปรับขนาดได้อย่างเหมาะสมบนอุปกรณ์ทุกชนิด
สามารถใช้คลาสกับองค์ประกอบ <iframe>, <embed>, <video> และ <object> ได้โดยตรง
The following example creates a responsive video by adding an .embed-responsive-item class
to an <iframe> tag (the video will then scale nicely to the parent element).
The containing <div> defines the aspect ratio of the video:
Example
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
What is aspect ratio?
The aspect ratio of an image
describes the proportional relationship between its width and its height. Two common video aspect ratios are 4:3
(the universal video format of the 20th
century), and 16:9 (universal for HD television and European digital
television).
You can choose between two aspect ratio classes:
<!-- 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>
Complete Bootstrap Image Reference
For a complete reference of all image classes, go to our complete Bootstrap Image Reference.