บูตวัตถุมัลติมีเดีย
ในบทนี้เราจะอธิบาย Bootstrap วัตถุมัลติมีเดีย (Media Object) เหล่านี้รูปแบบวัตถุนามธรรมใช้ในการสร้างประเภทต่างๆของส่วนประกอบ (เช่นบล็อกความคิดเห็น) เราสามารถใช้ภาพข้อความในองค์ประกอบภาพที่อาจจะเหลือเป็นธรรมหรือขวาธรรม วัตถุสื่อสามารถทำได้ด้วยรหัสน้อยและสื่อข้อความวัตถุช่วงชิง
น้ำหนักเบาสื่อวัตถุลักษณะการทำเครื่องหมายเป็นเรื่องง่ายที่จะขยายผ่านชั้นแท็กโปรแกรมที่ง่ายเพื่อให้บรรลุ คุณสามารถเพิ่มต่อไปนี้ในสองรูปแบบแท็ก HTML เพื่อกำหนดวัตถุสื่อ:
- .media: ระดับนี้จะช่วยให้วัตถุสื่อมัลติมีเดีย (ภาพ, วิดีโอ, เสียง) ลอยบล็อกเนื้อหาซ้ายหรือขวา
- .media รายการ: ถ้าคุณต้องการรายชื่อขององค์ประกอบต่างๆที่เป็นส่วนหนึ่งของรายการเรียงลำดับคุณสามารถใช้ในชั้นเรียนความคิดเห็นสามารถนำมาใช้เพื่อแสดงรายการและรายการของบทความ
ลองมาดูที่ข้อมูลเกี่ยวกับสื่อเริ่มต้นวัตถุเช่น .media:
ตัวอย่าง
<div class = "สื่อ">
<a class = "ดึงซ้าย" href = "#">
<img class = "สื่อวัตถุ" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "วัตถุสื่อ">
</ A>
<div class = "สื่อร่างกาย">
<H4 class = "สื่อหัวข้อ"> ชื่อสื่อ </ H4> นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง </ div>
</ div>
<div class = "สื่อ">
<a class = "ดึงซ้าย" href = "#">
<img class = "สื่อวัตถุ" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "วัตถุสื่อ">
</ A>
<div class = "สื่อร่างกาย">
<H4 class = "สื่อหัวข้อ"> ชื่อสื่อ </ H4> นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง <div class = "สื่อ">
<a class = "ดึงซ้าย" href = "#">
<img class = "สื่อวัตถุ" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "วัตถุสื่อ">
</ A>
<div class = "สื่อร่างกาย">
<H4 class = "สื่อหัวข้อ"> ชื่อสื่อ </ H4> นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง </ div>
</ div>
</ div>
</ div>
ลอง»
ผลมีดังนี้
ลองดูที่ตัวอย่างต่อไปนี้ของรายการสื่อของวัตถุ .media รายการ:
ตัวอย่าง
<ul class = "สื่อรายการ">
<li class = "สื่อ">
<a class = "ดึงซ้าย" href = "#">
<img class = "สื่อวัตถุ" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "ภาพตัวยึดทั่วไป">
</ A>
<div class = "สื่อร่างกาย">
<H4 class = "สื่อหัวข้อ"> ชื่อสื่อ </ h4>
<p> นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง </ p>
<! - วัตถุสื่อซ้อน ->
<div class = "สื่อ">
<a class = "ดึงซ้าย" href = "#">
<img class = "สื่อวัตถุ" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "ภาพตัวยึดทั่วไป">
</ A>
<div class = "สื่อร่างกาย">
<H4 class = "สื่อหัวข้อ"> สื่อซ้อนกันมุ่งหน้าไป </ H4> นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง <! - วัตถุสื่อซ้อน ->
<div class = "สื่อ">
<a class = "ดึงซ้าย" href = "#">
<img class = "สื่อวัตถุ" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "ภาพตัวยึดทั่วไป">
</ A>
<div class = "สื่อร่างกาย">
<H4 class = "สื่อหัวข้อ"> สื่อซ้อนกันมุ่งหน้าไป </ H4> นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง </ div>
</ div>
</ div>
</ div>
<! - วัตถุสื่อซ้อน ->
<div class = "สื่อ">
<a class = "ดึงซ้าย" href = "#">
<img class = "สื่อวัตถุ" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "ภาพตัวยึดทั่วไป">
</ A>
<div class = "สื่อร่างกาย">
<H4 class = "สื่อหัวข้อ"> สื่อซ้อนกันมุ่งหน้าไป </ H4> นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง </ div>
</ div>
</ div>
</ li>
<li class = "สื่อ">
<a class = "ดึงขวา" href = "#">
<img class = "สื่อวัตถุ" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "ภาพตัวยึดทั่วไป">
</ A>
<div class = "สื่อร่างกาย">
<H4 class = "สื่อหัวข้อ"> ชื่อสื่อ </ H4> นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง นี่คือบางข้อความตัวอย่าง </ div>
</ li>
</ ul>
ลอง»
ผลมีดังนี้
