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

« صفحهٔ قبل

صفحهٔ بعد »

Media objectها

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

Media Object ساده

مثال

<!-- Left-aligned -->
<div class="media">
  <div class="media-left">
    <img src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">John Doe</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>

<!-- Right-aligned -->
<div class="media">
  <div class="media-body">
    <h4 class="media-heading">John Doe</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="media-right">
    <img src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
</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 در بالا، وسط یا پایین صفحه قرار گیرد:

مثال

<!-- Media top -->
<div class="media">
  <div class="media-left media-top">
    <img src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media Top</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>

<!-- Media middle -->
<div class="media">
  <div class="media-left media-middle">
    <img src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media Middle</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>

<!-- Media bottom -->
<div class="media">
  <div class="media-left media-bottom">
    <img src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media Bottom</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>

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

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

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

مثال

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

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

مثال

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

« صفحهٔ قبل

صفحهٔ بعد »