ล่าสุดการพัฒนาเว็บบทเรียน
×

Bootstrap เกี่ยวกับการสอน

BS บ้าน BS เริ่ม BS กินกัน BS การเรียงพิมพ์ BS ตาราง BS ภาพ BS jumbotron BS Wells BS การแจ้งเตือน BS ปุ่ม BS กลุ่มปุ่ม BS Glyphicons BS ป้าย / ป้าย BS แถบความคืบหน้า BS การให้เลขหน้า BS Pager BS กลุ่มรายการ BS แผง BS เมนูแบบเลื่อนลง BS Collapse BS แท็บ / ยา BS Navbar BS ฟอร์ม BS Inputs BS Inputs 2 BS Input Sizing BS ม้าหมุน BS เป็นกิริยาช่วย BS เคล็ดลับ BS Popover BS Scrollspy BS ติด

Bootstrap ระบบกริด

BS ระบบกริด BS ซ้อนกัน / แนวนอน BS ตารางขนาดเล็ก BS ตารางขนาดกลาง BS ตารางขนาดใหญ่ BS ตัวอย่างตาราง

Bootstrap ธีม

BS แม่แบบ BS กระทู้ "Simply Me" BS กระทู้ "Company" BS กระทู้ "Band"

Bootstrap Exam

BS ทดสอบ

Bootstrap CSS Ref

CSS การเรียงพิมพ์ CSS ปุ่ม CSS ฟอร์ม CSS ผู้ช่วย CSS ภาพ CSS ตาราง CSS เมนูแบบเลื่อนลง CSS Navs Glyphicons

Bootstrap JS Ref

JS ติด JS เตือนภัย JS ปุ่ม JS Carousel JS Collapse JS เลื่อนลง JS Modal JS Popover JS Scrollspy JS แถบ JS เคล็ดลับ

 

Bootstrap Images


Bootstrap รูปร่างภาพ

มุมโค้งมน:

Cinque Terre

วงกลม:

Cinque Terre

Thumbnail:

Cinque Terre

มุมโค้งมน

.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; ไปยังภาพที่:

ตัวอย่าง

<img class="img-responsive" src="img_chania.jpg" alt="Chania">
ลองตัวเอง»

แกลเลอรี่ภาพ

นอกจากนี้คุณยังสามารถใช้ 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 อ้างอิงภาพ