บูตวัตถุมัลติมีเดีย

บทนี้เราจะหารือเกี่ยวกับเงินทุนวัตถุมัลติมีเดีย รูปแบบวัตถุนามธรรมเหล่านี้เหมาะสำหรับความหลากหลายของประเภทส่วนประกอบ (เช่นบล็อกความคิดเห็น) เราสามารถใช้ภาพข้อความในองค์ประกอบภาพที่อาจจะเหลือเป็นธรรมหรือขวาธรรม วัตถุสื่อสามารถใช้รหัสน้อยที่จะใช้วัตถุมัลติมีเดียและการแย่งชิงข้อความ

คุณสามารถเพิ่มต่อไปนี้ในสองรูปแบบแท็ก HTML เพื่อกำหนดวัตถุสื่อ:

• .media: ระดับนี้จะช่วยให้วัตถุสื่อมัลติมีเดีย (ภาพวิดีโอ) ลอยไปทางซ้ายหรือบล็อกเนื้อหาที่เหมาะสม
• .media รายการ: ถ้าคุณต้องการรายชื่อขององค์ประกอบต่างๆที่เป็นส่วนหนึ่งของรายการเรียงลำดับคุณสามารถใช้ในชั้นเรียน ความคิดเห็นสามารถนำมาใช้เพื่อแสดงรายการและรายการของบทความ

ตอนนี้ให้เราดูตัวอย่างของการใช้มัลติมีเดียวัตถุชั้น .media:

<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>

ดูตัวอย่างออนไลน์

ตัวอย่างข้างต้นแสดงให้เห็นผลกระทบของการต่อไปนี้:

ตอนนี้ให้เราดูตัวอย่างของการใช้มัลติมีเดียวัตถุชั้น .media รายการ:

<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>

ดูตัวอย่างออนไลน์

ตัวอย่างข้างต้นแสดงให้เห็นผลกระทบของการต่อไปนี้: