Bootstrap - วัตถุสื่อ
บทนี้กล่าวถึงเกี่ยวกับวัตถุสื่อ ลักษณะเหล่านี้คือรูปแบบวัตถุนามธรรมสำหรับการสร้างส่วนประกอบประเภทต่างๆ (เช่นความคิดเห็นในบล็อกทวีต ฯลฯ ) ที่มีภาพจัดชิดซ้ายหรือจัดชิดขวาควบคู่ไปกับเนื้อหาที่เป็นข้อความ เป้าหมายของวัตถุสื่อคือการทำให้รหัสสำหรับการพัฒนาบล็อกข้อมูลเหล่านี้สั้นลงอย่างมาก
เป้าหมายของวัตถุสื่อ (มาร์กอัปแสงความสามารถในการขยายได้ง่าย) ทำได้โดยการใช้คลาสกับมาร์กอัปอย่างง่ายบางส่วน วัตถุสื่อมีสองรูปแบบ -
.media - คลาสนี้อนุญาตให้ลอยวัตถุสื่อ (รูปภาพวิดีโอและเสียง) ไปทางซ้ายหรือขวาของบล็อกเนื้อหา
.media-list- หากคุณกำลังเตรียมรายการที่รายการจะเป็นส่วนหนึ่งของรายการที่ไม่เรียงลำดับให้ใช้ชั้นเรียน มีประโยชน์สำหรับเธรดความคิดเห็นหรือรายการบทความ
ให้เราดูตัวอย่างด้านล่างของวัตถุสื่อเริ่มต้น -
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
</a>
<div class = "media-body">
<h4 class = "media-heading">Media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</div>
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
</a>
<div class = "media-body">
<h4 class = "media-heading">Media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
</a>
<div class = "media-body">
<h4 class = "media-heading">Media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</div>
</div>
</div>
ให้เราดูตัวอย่างรายการสื่อ -
<ul class = "media-list">
<li class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Generic placeholder image">
</a>
<div class = "media-body">
<h4 class = "media-heading">Media heading</h4>
<p>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</p>
<!-- Nested media object -->
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg"
alt = "Generic placeholder image">
</a>
<div class = "media-body">
<h4 class = "media-heading">Nested media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
<!-- Nested media object -->
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg"
alt = "Generic placeholder image">
</a>
<div class = "media-body">
<h4 class = "media-heading">Nested media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</div>
</div>
</div>
<!-- Nested media object -->
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg"
alt = "Generic placeholder image">
</a>
<div class = "media-body">
<h4 class = "media-heading">Nested media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</div>
</div>
</li>
<li class = "media">
<a class = "pull-right" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg"
alt = "Generic placeholder image">
</a>
<div class = "media-body">
<h4 class = "media-heading">Media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</li>
</ul>