في صفحة الويب ، تكون الصورة على اليسار ويتم ترتيب المحتوى على اليمين ، وهو تأثير شائع للغاية. إنه أيضًا كائن إعلامي. إنه نمط تجريدي يمكن استخدامه لبناء أنواع مختلفة من المكونات. ملفات الإصدار المقابلة في إطار bootstrap هي كما يلي:
أقل: وسائل الإعلام
Sass: _media.scss
تظهر كائنات الوسائط عمومًا في مجموعات ، وتتضمن مجموعة من كائنات الوسائط بشكل عام الأجزاء التالية:
1. حاوية كائن الوسائط: تستخدم لاستيعاب جميع محتويات كائنات الوسائط. يجب استخدام اسم الفصل على الحاوية. وسائط
2. كائن الوسائط: بشكل عام صورة ، و Class.Media-Object مطلوب.
3. موضوع كائن الوسائط: إنه محتوى موضوع كائن الوسائط. يمكن أن يكون أي عنصر ويتطلب استخدام الفئة.
4. عنوان كائن الوسائط: عنوان يستخدم لوصف كائن الوسائط ، مطلوب class.media reading.
بالإضافة إلى ذلك ، غالبًا ما يتم استخدام الفئات .pull-left و .pull-right في إطار bootstrap للتحكم في طريقة الكائنات العائمة في كائنات الوسائط.
فيما يلي رمز مصدر CSS الخاص بهم:
Media ،. Media-Body {Overflow: Hidden ؛ Zoom: 1 ؛}. Media ، Media. Media {Margin-Top: 15px ؛}. Media: First-Child {Margin-Top: 0 ؛}. > .pull-right {margin-left: 10px ؛}أنماط الوسائط بسيطة نسبيًا ، فقط قم بتعيين التباعد بينهما ؛
دعونا نلقي نظرة على استخدام كائنات الوسائط:
<H1> كائن الوسائط الافتراضية </h1> <viv> <a href = "#"> <img src = "img/1.jpg"> </a> <h4> ضوء القمر في بوند لوتس </h4> <viv> أنا غير مرتاح هذه الأيام. كنت جالسًا في الفناء الليلة للاستمتاع بالهواء البارد ، وفجأة تذكرت بركة اللوتس التي مشيت كل يوم. في ليلة اكتمال القمر هذه ، يجب أن أبدو دائمًا مختلفًا. ارتفع القمر تدريجيا ، وضحك الأطفال على الطريق خارج الجدار ... </div> </viv> </viv>
تعشيش كائنات الوسائط
Bootstrap Media Objects Nest ، ما عليك سوى وضع بنية كائن وسائط أخرى في جسم كائن الوسائط (. Media-Body). دعونا نلقي نظرة على تطبيق كائن الوسائط تعشش
<H1> تعشش كائنات الوسائط الافتراضية </h1> <viv> <a href = "#"> <img src = "img/3.jpg"> </a> <viv> <h4> ضوء القمر في بركة اللوتس </h4> <viv> يصب بهدوء على هذه الأوراق والزهور مثل مياه التدفق. يطفو ضباب أزرق رفيع في بركة اللوتس. يبدو أن الأوراق والزهور قد تم غسلها في الحليب. كما أنها مثل الأحلام المغطاة بالحجاب. على الرغم من أنه اكتمال القمر ، إلا أن هناك سحابة باهتة في السماء ، لذلك لا يمكن أن تتألق بشكل مشرق ؛ لكنني أعتقد أن هذه هي مجرد ميزة - النوم العميق لا غنى عنه ، والقيلولة لها نكهة فريدة من نوعها. </viv> <viv> <a href = "#"> <img src = "img/4.jpg"> </a> <viv> <h4> فيما يلي المحتوى المتداخل 1111 </h4> <viv> أربعة جوانب من بوند لوتس ، بعيدًا ، عاليًا ، وأشجارًا ، والأشجار هي الأكثر. هذه الأشجار تحيط بركة لوتس. كانوا فقط على جانب المسار ، مع تسرب بعض الثغرات ، كما لو كانت تركت خصيصًا لضوء القمر. </viv> <viv> <a href = "#"> <img src = "img/5.jpg"> </a> <viv> <h4> فيما يلي محتوى متداخل 2222 </h4> <viv> هناك جبل بعيد على الأشجار ، وهو مجرد مراوغة. كانت هناك أيضًا مصابيح شارع واحدة أو اثنتين تتسرب من الشقوق في الشجرة. ما كان بلا قائمة هو عيون الناس العطش. الشيء الأكثر حيوية في هذا الوقت هو صوت cicadas على الأشجار وصوت الضفادع في الماء ؛ لكن الإثارة هي لهم ، وليس لدي أي شيء </div> </viv> </viv> </viv> </viv> </viv> </viv>
الآثار هي كما يلي:
قائمة كائن الوسائط
يوفر إطار bootstrap تأثير عرض قائمة كائنات الوسائط. عند كتابة الهياكل ، يمكنك استخدام Tag UL وإضافة اسم الفصل على قائمة Tag UL.Media ، واستخدام الفصل على العلامة UL.Media.
على سبيل المثال:
<H1> قائمة كائنات الوسائط </h1> <ul> <li> <a href = "#"> <img src = "img/1.jpg"> </a> <viv> <h4> قائمة كائن الوسائط 111 </h4> <viv> على طول بوند لوتس ، فهو طريق شرق فحم صغير متعثر. هذا طريق منعزل. هناك عدد قليل من الناس يمشون خلال النهار ، وهو أكثر وحيدة في الليل. هناك العديد من الأشجار التي تنمو حول بركة اللوتس ، وهي مكتئب (2). على جانب الطريق كانت الصفصاف وبعض الأشجار بأسماء غير معروفة. في ليلة بدون ضوء القمر ، كان الطريق قاتمًا وخائفًا قليلاً من الناس. كانت الليلة جيدة جدًا ، على الرغم من أن ضوء القمر كان لا يزال باهتًا. </viv> </viv> </li> <li> <a href = "#"> <img src = "img/2.jpg"> </a> <viv> <h4> قائمة كائنات الوسائط 222 </h4> <viv> كنت الوحيد على الطريق ، والمشي مع ظهري. هذا العالم يبدو لي. أشعر أيضًا أنني أتجاوز نفسي المعتاد ودخلت عالمًا آخر. أنا أحب الإثارة والهدوء. أحب العيش في مجموعات وكوني وحدي. مثل الليلة ، في ظل هذا القمر الشاسع ، يمكنك التفكير في أي شيء ولا تفكر في أي شيء ، وستشعر أنك شخص حر. </viv> </viv> </li> <li> <a href = "#"> <img src = "img/3.jpg"> </a> <fiv> <h4> قائمة كائنات الوسائط 333 </h4> <viv> ما يجب عليك فعله وقوله أثناء اليوم يمكن تجاهله الآن. هذا هو جمال أن أكون وحيدًا ، وسأستمتع بعطر اللوتس الذي لا نهاية له وضوء القمر. فوق بركة اللوتس المتعرجة ، توجد أوراق الحقول (4) في كل مكان. الأوراق عالية جدًا ، مثل تنورة راقصة طويلة. من بين طبقات الأوراق ، بعض الزهور البيضاء منتشرة بشكل متقطع ، بعضها يزهر بأمان ، وبعضهم يلعبون بخجل بالزهور ؛ تماما مثل اللؤلؤ ، والنجوم في السماء الزرقاء ، والجمال خارج الحمام. النسيم يجلب أشعة العطر ، كما لو كان صمت الغناء على المباني الطويلة في المسافة. </viv> </viv> </li> <li> <a href = "#"> <img src = "img/4.jpg"> </a> <fiv> <h4> قائمة كائنات الوسائط 444 </h4> <viv> فجأة تذكرت قصة اختيار اللوتس. لوتس انتقاء هو العرف القديم في جيانجانان. يبدو أنه كان موجودًا مبكرًا ، لكنه كان مزدهرًا خلال السلالات الست ؛ يمكننا أن نعرف ذلك تقريبًا من الشعر. أولئك الذين اختاروا لوتس كانوا شابات ، ذهبن إلى هناك في قوارب صغيرة ويغنون الأغاني المثيرة (14). وغني عن القول ، هناك الكثير من الناس الذين يختارون لوتس. هناك أيضا أشخاص يختارون لوتس. لقد كان موسمًا حيويًا ورومانسيًا (15). قال الإمبراطور يوان من ليانغ (16) بشكل جيد في "لوتس بيكينج فو":. </viv> </viv> </li> </ul>
الآثار هي كما يلي: