Bootstrap 4 วัตถุสื่อ
วัตถุสื่อ
Bootstrap เป็นวิธีง่ายๆ ในการจัดแนววัตถุสื่อ (เช่น รูปภาพหรือวิดีโอ) ร่วมกับเนื้อหา วัตถุสื่อมักใช้เพื่อแสดงความคิดเห็นบล็อก ทวีต และอื่นๆ:
John Doe โพสต์เมื่อ กุมภาพันธ์ 19, 2016
ความเจ็บปวดคือความรักในความเจ็บปวดซึ่งเป็นปัญหาหลักทางนิเวศวิทยา แต่ฉันให้เวลาแบบนี้ที่จะล้มลงเพื่อให้ความเจ็บปวดและความเจ็บปวดบางอย่าง
John Doe โพสต์เมื่อ กุมภาพันธ์ 20, 2016
ความเจ็บปวดคือความรักในความเจ็บปวดซึ่งเป็นปัญหาหลักทางนิเวศวิทยา แต่ฉันให้เวลาแบบนี้ที่จะล้มลงเพื่อให้ความเจ็บปวดและความเจ็บปวดบางอย่าง
วัตถุสื่อพื้นฐาน
John Doe โพสต์เมื่อ กุมภาพันธ์ 19, 2016
ความเจ็บปวดคือความรักในความเจ็บปวดซึ่งเป็นปัญหาหลักทางนิเวศวิทยา แต่ฉันให้เวลาแบบนี้ที่จะล้มลงเพื่อให้ความเจ็บปวดและความเจ็บปวดบางอย่าง
ในการสร้างอ็อบเจ็กต์สื่อ ให้เพิ่ม.mediaคลาสไปยังอิลิเมนต์คอนเทนเนอร์ และวางเนื้อหาสื่อภายในคอนเทนเนอร์.media-bodyย่อยพร้อมกับคลาส เพิ่มช่องว่างภายในและระยะขอบตามต้องการ ด้วยยูทิลิตี้การเว้นวรรค:
ตัวอย่าง
<div class="media border p-3">
<img src="img_avatar3.png" alt="John
Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div
class="media-body">
<h4>John Doe <small><i>Posted on
February 19, 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
</div>
ออบเจ็กต์สื่อที่ซ้อนกัน
วัตถุสื่อสามารถซ้อนกันได้ (วัตถุสื่อภายในวัตถุสื่อ):
John Doe โพสต์เมื่อ กุมภาพันธ์ 19, 2016
ความเจ็บปวดคือความรักในความเจ็บปวดซึ่งเป็นปัญหาหลักทางนิเวศวิทยา แต่ฉันให้เวลาแบบนี้ที่จะล้มลงเพื่อให้ความเจ็บปวดและความเจ็บปวดบางอย่าง
Jane Doe โพสต์เมื่อ กุมภาพันธ์ 20, 2016
ความเจ็บปวดคือความรักในความเจ็บปวดซึ่งเป็นปัญหาหลักทางนิเวศวิทยา แต่ฉันให้เวลาแบบนี้ที่จะล้มลงเพื่อให้ความเจ็บปวดและความเจ็บปวดบางอย่าง
ในการซ้อนอ็อบเจ็กต์สื่อ ให้วางคอนเทนเนอร์ใหม่.mediaภายใน.media-bodyคอนเทนเนอร์:
ตัวอย่าง
<div class="media border p-3">
<img src="img_avatar3.png" alt="John
Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div
class="media-body">
<h4>John Doe <small><i>Posted on
February 19, 2016</i></small></h4>
<p>Lorem ipsum...</p>
<div class="media p-3">
<img src="img_avatar2.png" alt="Jane
Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
<div
class="media-body">
<h4>Jane Doe <small><i>Posted on
February 20 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>
ภาพสื่อจัดชิดขวา
John Doe โพสต์เมื่อ กุมภาพันธ์ 19, 2016
ความเจ็บปวดคือความรักในความเจ็บปวดซึ่งเป็นปัญหาหลักทางนิเวศวิทยา แต่ฉันให้เวลาแบบนี้ที่จะล้มลงเพื่อให้ความเจ็บปวดและความเจ็บปวดบางอย่าง
หากต้องการจัดแนวรูปภาพสื่อให้ถูกต้อง ให้เพิ่มรูปภาพหลัง.media-bodyคอนเทนเนอร์:
ตัวอย่าง
<div class="media border p-3">
<div
class="media-body">
<h4>John Doe <small><i>Posted on
February 19, 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
<img src="img_avatar3.png" alt="John
Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;">
</div>
การจัดตำแหน่งบน กลาง หรือล่าง
ใช้ยูทิลิตี้ flex align-self-*คลาสเพื่อวางอ็อบเจ็กต์สื่อที่ด้านบน ตรงกลาง หรือด้านล่าง:
สื่อด้านบน
ความเจ็บปวดคือความรักในความเจ็บปวดซึ่งเป็นปัญหาหลักทางนิเวศวิทยา แต่ฉันให้เวลาแบบนี้ที่จะล้มลงเพื่อให้ความเจ็บปวดและความเจ็บปวดบางอย่าง
ความเจ็บปวดคือความรักในความเจ็บปวดซึ่งเป็นปัญหาหลักทางนิเวศวิทยา แต่ฉันให้เวลาแบบนี้ที่จะล้มลงเพื่อให้ความเจ็บปวดและความเจ็บปวดบางอย่าง
สื่อกลาง
ความเจ็บปวดคือความรักในความเจ็บปวดซึ่งเป็นปัญหาหลักทางนิเวศวิทยา แต่ฉันให้เวลาแบบนี้ที่จะล้มลงเพื่อให้ความเจ็บปวดและความเจ็บปวดบางอย่าง
ความเจ็บปวดคือความรักในความเจ็บปวดซึ่งเป็นปัญหาหลักทางนิเวศวิทยา แต่ฉันให้เวลาแบบนี้ที่จะล้มลงเพื่อให้ความเจ็บปวดและความเจ็บปวดบางอย่าง
สื่อด้านล่าง
ความเจ็บปวดคือความรักในความเจ็บปวดซึ่งเป็นปัญหาหลักทางนิเวศวิทยา แต่ฉันให้เวลาแบบนี้ที่จะล้มลงเพื่อให้ความเจ็บปวดและความเจ็บปวดบางอย่าง
ความเจ็บปวดคือความรักในความเจ็บปวดซึ่งเป็นปัญหาหลักทางนิเวศวิทยา แต่ฉันให้เวลาแบบนี้ที่จะล้มลงเพื่อให้ความเจ็บปวดและความเจ็บปวดบางอย่าง
ตัวอย่าง
<!-- Media top -->
<div class="media">
<img src="img_avatar1.png" class="align-self-start
mr-3" style="width:60px">
<div class="media-body">
<h4>Media Top</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media middle -->
<div class="media">
<img src="img_avatar1.png" class="align-self-center mr-3" style="width:60px">
<div class="media-body">
<h4>Media Middle</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media bottom -->
<div class="media">
<img src="img_avatar1.png" class="align-self-end mr-3" style="width:60px">
<div class="media-body">
<h4>Media Bottom</h4>
<p>Lorem ipsum...</p>
</div>
</div>