اشیاء رسانه‌ای

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
(تغییرمسیر از Bootstrap:اشیاء رسانه ای)
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp3-menu.png
موارد آموزشی
۱خانه
۲شروع
۳شبکه‌بندی ساده
۴تایپوگرافی
۵جدول‌ها
۶تصویر‌ها
۷Jumbotron
۸Well‌ها
۹هشدارها
۱۰کلیدها
۱۱گروه‌های کلید
۱۲گلیف آیکون‌ها
۱۳نشان‌ها/برچسب‌ها
۱۴نوار پیشرفت
۱۵صفحه‌بندی
۱۶Pager
۱۷گروه‌های لیست
۱۸پنل‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱تب‌ها/Pillها
۲۲نوار راهبری
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵ورودی‌ها ۲
۲۶سایزدهی ورودی
۲۷Media Objectها
۲۸Carousel
۲۹Modal
۳۰راهنمای ابزار
۳۱Popover
۳۲Scrollspy
۳۳Affix
۳۴فیلترها
شبکه‌بندی
زمینه‌ها
مثال‌ها
مرجع JavaScrpit در بوت‌استرپ ۳
مرجع CSS در بوت‌استرپ ۳

Media objectها

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

Media Object ساده

مثال

 1 <!-- Left-aligned -->
 2 <div class="media">
 3   <div class="media-left">
 4     <img src="img_avatar1.png" class="media-object" style="width:60px">
 5   </div>
 6   <div class="media-body">
 7     <h4 class="media-heading">John Doe</h4>
 8     <p>Lorem ipsum...</p>
 9   </div>
10 </div>
11 
12 <!-- Right-aligned -->
13 <div class="media">
14   <div class="media-body">
15     <h4 class="media-heading">John Doe</h4>
16     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
17   </div>
18   <div class="media-right">
19     <img src="img_avatar1.png" class="media-object" style="width:60px">
20   </div>
21 </div>


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


توضیح مثال

از یک عنصر <div> با کلاس .media برای ایجاد یک ظرف (به انگلیسی: Container) برای Media Objectها استفاده کنید.

از کلاس .media-left برای قرار دادن Media Object (تصویر) در سمت چپ یا کلاس .media-right برای قرار دادن آن در سمت راست استفاده کنید:

متنی که در کنار تصویر ظاهر می‌شود، داخل یک ظرف با class="media-body" قرار می‌گیرد.

بعلاوه می‌توان از .media-heading برای عنوان بندی‌ها استفاده کرد.

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

Media Object می‌تواند با استفاده از کلاس‌های media-top، media-middle یا media-bottom در بالا، وسط یا پایین صفحه قرار گیرد:


مثال

 1 <!-- Media top -->
 2 <div class="media">
 3   <div class="media-left media-top">
 4     <img src="img_avatar1.png" class="media-object" style="width:60px">
 5   </div>
 6   <div class="media-body">
 7     <h4 class="media-heading">Media Top</h4>
 8     <p>Lorem ipsum...</p>
 9   </div>
10 </div>
11 
12 <!-- Media middle -->
13 <div class="media">
14   <div class="media-left media-middle">
15     <img src="img_avatar1.png" class="media-object" style="width:60px">
16   </div>
17   <div class="media-body">
18     <h4 class="media-heading">Media Middle</h4>
19     <p>Lorem ipsum...</p>
20   </div>
21 </div>
22 
23 <!-- Media bottom -->
24 <div class="media">
25   <div class="media-left media-bottom">
26     <img src="img_avatar1.png" class="media-object" style="width:60px">
27   </div>
28   <div class="media-body">
29     <h4 class="media-heading">Media Bottom</h4>
30     <p>Lorem ipsum...</p>
31   </div>
32 </div>


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


Media Object‌های تودرتو

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

مثال


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


مثال دیگری از تودرتو

مثال


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



منابع آموزشی