Media Objectها

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (Badges)
۱۴نوارهای پیشرفت
۱۵Spinnerها
۱۶صفحه‌بندی
۱۷گروه‌های لیست
۱۸کارت‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱Navها
۲۲Navbar
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵گروه‌های ورودی
۲۶فرم‌های سفارشی
۲۷Carousel
۲۸Modal
۲۹راهنمای ابزار
۳۰Popover
۳۱Toast
۳۲Scrollspy
۳۳امکانات
۳۴Flex
۳۵آیکون‌ها
۳۶Media Objects
۳۷فیلترها
شبکه‌بندی
Theme
مرجع

بوت استرپ راه ساده ای را برای قرار دادن Media Objectها (مانند تصاویر و ویدیوها) در سمت چپ یا راست برخی از محتواها فراهم کرده‌است. این ویژگی را می‌توان برای نشان دادن نظرهای وبلاگ، توییت‌ها و مانند آن به کار برد.[۱]

Media Object ساده

برای ایجاد یک object media کلاس .media را به ظرف عنصر اضافه می‌کنیم، و محتوای media را داخل یک ظرف فرزند با کلاس .media-body قرار می‌دهیم. با استفاده از کاربردهای فاصله گذاری (به انگلیسی: Spacing Utilities) ، padding و حاشیه مورد نیاز را ایجاد کنید:

مثال

1 <div class="media border p-3">
2   <img src="img_avatar3.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
3   <div class="media-body">
4     <h4>John Doe <small><i>Posted on February 19, 2016</i></small></h4>
5     <p>Lorem ipsum...</p>
6   </div>
7 </div>

مشاهدهٔ نتیجه


Media Objectهای تودرتو

Media Objectها می‌توانند تودرتو نیز باشند (یک Media Object داخل یک Media Object):

برای تودرتو ساختن media objectها، یک ظرف (به انگلیسی: Container) جدید .media داخل ظرف .media-body اضافه کنید:

مثال

 1 <div class="media border p-3">
 2   <img src="img_avatar3.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
 3   <div class="media-body">
 4     <h4>John Doe <small><i>Posted on February 19, 2016</i></small></h4>
 5     <p>Lorem ipsum...</p>
 6     <div class="media p-3">
 7       <img src="img_avatar2.png" alt="Jane Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
 8       <div class="media-body">
 9         <h4>Jane Doe <small><i>Posted on February 20 2016</i></small></h4>
10         <p>Lorem ipsum...</p>
11       </div>
12     </div> 
13   </div>
14 </div>

مشاهدهٔ نتیجه


Media objectهای راست‌چین

برای راست‌چین کردن media image تصویر را بعد از ظرف .media-body قرار دهید:

مثال

1 <div class="media border p-3">
2   <div class="media-body">
3     <h4>John Doe <small><i>Posted on February 19, 2016</i></small></h4>
4     <p>Lorem ipsum...</p>
5   </div>
6   <img src="img_avatar3.png" alt="John Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;">
7 </div>

مشاهدهٔ نتیجه


قرار گرفتن در بالا، وسط یا پایین

از کاربردهای flex، کلاس‌های align-self-* برای قرار دادن media objectها در بالا، وسط یا پایین استفاده می‌شود:

مثال

 1 <!-- Media top -->
 2 <div class="media">
 3   <img src="img_avatar1.png" class="align-self-start mr-3" style="width:60px">
 4   <div class="media-body">
 5     <h4>Media Top</h4>
 6     <p>Lorem ipsum...</p>
 7   </div>
 8 </div>
 9 
10 <!-- Media middle -->
11 <div class="media">
12   <img src="img_avatar1.png" class="align-self-center mr-3" style="width:60px">
13   <div class="media-body">
14     <h4>Media Middle</h4>
15     <p>Lorem ipsum...</p>
16   </div>
17 </div>
18 
19 <!-- Media bottom -->
20 <div class="media">
21   <img src="img_avatar1.png" class="align-self-end mr-3" style="width:60px">
22   <div class="media-body">
23     <h4>Media Bottom</h4>
24     <p>Lorem ipsum...</p>
25   </div>
26 </div>

مشاهدهٔ نتیجه


منابع آموزشی