اشیاء رسانه‌ای
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):
مثال
مثال دیگری از تودرتو
مثال
منابع آموزشی