ในหน้าเว็บภาพอยู่ทางซ้ายและเนื้อหาจะถูกจัดเรียงทางด้านขวาซึ่งเป็นเอฟเฟกต์ที่พบบ่อยมาก นอกจากนี้ยังเป็นวัตถุสื่อ มันเป็นสไตล์นามธรรมที่สามารถใช้ในการสร้างส่วนประกอบประเภทต่างๆ ไฟล์เวอร์ชันที่เกี่ยวข้องในเฟรมเวิร์ก Bootstrap มีดังนี้:
น้อยลง: Media.less
Sass: _media.scss
โดยทั่วไปวัตถุสื่อจะปรากฏเป็นกลุ่มและกลุ่มวัตถุสื่อโดยทั่วไปจะรวมส่วนต่อไปนี้:
1. คอนเทนเนอร์วัตถุสื่อ: ใช้เพื่อรองรับเนื้อหาทั้งหมดของวัตถุสื่อ ต้องใช้ชื่อคลาสบนคอนเทนเนอร์ สื่อ
2. วัตถุของวัตถุสื่อ: โดยทั่วไปเป็นรูปภาพและชั้นเรียน media-object เป็นสิ่งจำเป็น
3. หัวเรื่องของวัตถุสื่อ: มันเป็นเนื้อหาหัวเรื่องของวัตถุสื่อ มันสามารถเป็นองค์ประกอบใด ๆ และต้องใช้การใช้ Class.media-body
4. ชื่อของวัตถุสื่อ: ชื่อที่ใช้อธิบายวัตถุสื่อจำเป็นต้องใช้คลาส media-heading
นอกจากนี้คลาส. pull-left และ. pull-right มักจะใช้ในเฟรมเวิร์ก bootstrap เพื่อควบคุมวิธีการลอยตัวของวัตถุในวัตถุสื่อ
นี่คือซอร์สโค้ด CSS ของพวกเขา:
.media, .media-body {overflow: hidden; zoom: 1;}. media, .media .media {margin-top: 15px;}. สื่อ: เด็กแรก 10px;}. Media> .pull-right {margin-left: 10px;}รูปแบบของสื่อค่อนข้างง่ายเพียงกำหนดระยะห่างระหว่างพวกเขา;
มาดูการใช้วัตถุสื่อ:
<H1> วัตถุสื่อเริ่มต้น </h1> <div> <a href = "#"> <img src = "img/1.jpg"> </a> <div> <h4> แสงจันทร์ในบ่อดอกบัว </h4> <div> ฉันค่อนข้างไม่สบายใจในวันนี้ คืนนี้ฉันนั่งอยู่ในบ้านเพื่อเพลิดเพลินกับอากาศเย็นและทันใดนั้นฉันก็จำบ่อดอกบัวที่ฉันเดินได้ทุกวัน ในคืนพระจันทร์เต็มดวงนี้ฉันควรดูแตกต่างเสมอ ดวงจันทร์ค่อยๆลุกขึ้นและเสียงหัวเราะของเด็ก ๆ บนถนนด้านนอกกำแพง ... </div> </div> </div>
การทำรังของวัตถุสื่อ
วัตถุสื่อ bootstrap ทำรังเพียงวางโครงสร้างวัตถุสื่ออื่นในร่างกายของวัตถุสื่อ (.media-body) ลองมาดูแอปพลิเคชันการทำรังของวัตถุสื่อ
<H1> การทำรังของวัตถุสื่อเริ่มต้น </h1> <div> <a href = "#"> <img src = "img/3.jpg"> </a> <div> <h4> แสงจันทร์ในบ่อดอกบัว </h4> <div> แสงจันทร์อย่างเงียบ ๆ หมอกสีน้ำเงินบาง ๆ ลอยอยู่ในบ่อดอกบัว ใบและดอกไม้ดูเหมือนจะถูกล้างด้วยนม พวกเขายังเหมือนความฝันที่ปกคลุมไปด้วยม่าน แม้ว่ามันจะเป็นพระจันทร์เต็มดวง แต่ก็มีเมฆจาง ๆ บนท้องฟ้าดังนั้นจึงไม่สามารถส่องแสงได้อย่างสดใส แต่ฉันคิดว่านี่เป็นเพียงข้อได้เปรียบ - การนอนหลับลึกเป็นสิ่งที่ขาดไม่ได้และการงีบหลับมีรสชาติที่เป็นเอกลักษณ์ </div> <div> <a href = "#"> <img src = "img/4.jpg"> </a> <div> <h4> นี่คือเนื้อหาที่ซ้อนกัน 1111 </h4> <div> สี่ด้านของบ่อดอกบัว ต้นไม้เหล่านี้ล้อมรอบบ่อดอกบัว พวกเขาอยู่ด้านข้างของเส้นทางเท่านั้นโดยมีช่องว่างรั่วไหลเพียงไม่กี่ตัวราวกับว่าพวกเขาถูกทิ้งไว้โดยเฉพาะสำหรับแสงจันทร์ </div> <div> <a href = "#"> <img src = "img/5.jpg"> </a> <div> <h4> นี่คือเนื้อหาซ้อนกัน 2222 </h4> <div> มีภูเขาที่อยู่ห่างไกลบนยอดไม้และเป็นเพียงความระมัดระวังเล็กน้อย นอกจากนี้ยังมีไฟถนนหนึ่งหรือสองดวงรั่วจากรอยแตกในต้นไม้ สิ่งที่ไร้สาระคือดวงตาของคนนอนหลับกระหายน้ำ สิ่งที่มีชีวิตชีวาที่สุดในเวลานี้คือเสียงของจั๊กจั่นบนต้นไม้และเสียงของกบในน้ำ แต่ความตื่นเต้นคือของพวกเขาและฉันไม่มีอะไร </div> </div> </div> </div> </div> </div> </div>
ผลกระทบมีดังนี้:
รายการวัตถุสื่อ
เฟรมเวิร์ก Bootstrap ให้เอฟเฟกต์การแสดงผลรายการวัตถุสื่อ เมื่อเขียนโครงสร้างคุณสามารถใช้แท็ก ul และเพิ่มชื่อคลาสบนแท็ก ul.media-list และใช้คลาสบนแท็ก ul.media
ตัวอย่างเช่น:
<H1> รายการวัตถุสื่อ </h1> <ul> <li> <a href = "#"> <img src = "img/1.jpg"> </a> <div> <h4> รายการวัตถุสื่อ 111 </h4> <div> ตามบ่อดอกบัว นี่คือถนนที่เงียบสงบ มีคนไม่กี่คนที่เดินในระหว่างวันและมันก็เหงามากขึ้นในเวลากลางคืน มีต้นไม้จำนวนมากที่เติบโตรอบบ่อดอกบัวและพวกเขาจะหดหู่ (2) ด้านข้างของถนนเป็นต้นหลิวและต้นไม้บางต้นที่มีชื่อที่ไม่รู้จัก ในคืนที่ไม่มีแสงจันทร์ถนนมืดมนและกลัวผู้คนเล็กน้อย คืนนี้มันดีมากแม้ว่าแสงจันทร์จะยังคงเป็นลม </div> </div> </li> <li> <a href = "#"> <img src = "img/2.jpg"> </a> <div> <h4> รายการวัตถุสื่อ 222 </h4> <div> ฉันเป็นคนเดียวบนท้องถนน โลกนี้ดูเหมือนจะเป็นของฉัน ฉันยังรู้สึกว่าฉันเกินกว่าปกติและเข้าสู่โลกอื่น ฉันรักความตื่นเต้นและความเงียบสงบ ฉันรักการใช้ชีวิตเป็นกลุ่มและอยู่คนเดียว เช่นเดียวกับคืนนี้ภายใต้ดวงจันทร์อันกว้างใหญ่นี้คุณสามารถนึกถึงอะไรและไม่คิดอะไรเลยและคุณจะรู้สึกว่าคุณเป็นคนฟรี </div> </div> </li> <li> <a href = "#"> <img src = "img/3.jpg"> </a> <div> <h4> รายการวัตถุสื่อ 333 </h4> <div> สิ่งที่คุณต้องทำและพูดในระหว่างวัน นี่คือความงามของการอยู่คนเดียวและฉันจะเพลิดเพลินไปกับกลิ่นหอมของดอกบัวและแสงจันทร์ที่ไม่มีที่สิ้นสุด เหนือบ่อดอกบัวที่คดเคี้ยวใบไม้ของทุ่งนา (4) มีอยู่ทุกหนทุกแห่ง ใบสูงมากเหมือนกระโปรงของนักเต้นสูง ในบรรดาเลเยอร์ของใบไม้ดอกไม้สีขาวบางดอกมีจุดเป็นระยะ ๆ บางคนกำลังเบ่งบานอย่างสง่างามและบางคนก็เล่นด้วยดอกไม้อย่างอาย ๆ เช่นเดียวกับไข่มุกดาวในท้องฟ้าสีครามและความงามเพียงออกจากอ่างอาบน้ำ สายลมนำรังสีของน้ำหอมราวกับว่าความเงียบของการร้องเพลงบนอาคารสูงในระยะไกล </div> </div> </li> <li> <a href = "#"> <img src = "img/4.jpg"> </a> <div> <h4> รายการวัตถุสื่อ 444 </h4> <div> ฉันจำเรื่องราวของการเลือกโลตัสได้ Lotus Picking เป็นธรรมเนียมเก่าในเจียงนัน ดูเหมือนว่าจะมีอยู่เร็วมาก แต่มันก็เจริญรุ่งเรืองในช่วงหกราชวงศ์ เราสามารถรู้ได้จากบทกวี คนที่เลือกดอกบัวคือหญิงสาวที่ไปที่นั่นในเรือลำเล็กและร้องเพลงเร้าอารมณ์ (14) ไม่จำเป็นต้องพูดมีหลายคนที่เลือกดอกบัว นอกจากนี้ยังมีคนที่เลือกดอกบัว มันเป็นฤดูกาลที่มีชีวิตชีวาและโรแมนติก (15) จักรพรรดิหยวนแห่งเหลียง (16) พูดได้ดีใน "The Lotus Picking Fu": </div> </div> </li></ul>
ผลกระทบมีดังนี้: