Source

شی رسانه ای

مستندات و مثال‌هایی برای هدف رسانه‌ای Bootstrap برای ساخت اجزای بسیار تکراری مانند نظرات وبلاگ، توییت‌ها و موارد مشابه.

مثال

شی رسانه به ساخت اجزای پیچیده و تکراری کمک می کند که در آن برخی از رسانه ها در کنار محتوایی قرار می گیرند که در اطراف رسانه مذکور قرار نمی گیرند. به علاوه، این کار را تنها با دو کلاس مورد نیاز به لطف flexbox انجام می دهد.

در زیر نمونه‌ای از یک شی رسانه واحد است. فقط دو کلاس مورد نیاز است - بسته بندی .mediaو .media-bodyاطراف محتوای شما. padding و حاشیه اختیاری را می توان از طریق ابزارهای فاصله کنترل کرد.

Placeholder 64x64
عنوان رسانه
Cras sit amet nibh libero، در gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio، vestibulum in vulputate at، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis در faucibus.
<div class="media">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>
Flexbug شماره 12: عناصر درون خطی به عنوان آیتم های انعطاف پذیر در نظر گرفته نمی شوند

اینترنت اکسپلورر 10-11 عناصر درون خطی مانند پیوندها یا تصاویر (یا ::beforeو ::afterعناصر شبه) را به عنوان موارد انعطاف پذیر ارائه نمی کند. تنها راه حل این است که یک مقدار غیر خطی تنظیم کنید display(به عنوان مثال،،، blockیا inline-block) flex. پیشنهاد می کنیم از .d-flexیکی از ابزارهای نمایشگر ما به عنوان یک راه حل آسان استفاده کنید.

منبع: Flexbugs در GitHub

لانه سازی

اشیاء رسانه‌ای را می‌توان بی‌نهایت تو در تو قرار داد، اگرچه پیشنهاد می‌کنیم در نقطه‌ای توقف کنید. مکان تو در تو .mediaدر .media-bodyیک شی رسانه والد.

Placeholder 64x64
عنوان رسانه
Cras sit amet nibh libero، در gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio، vestibulum in vulputate at، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis در faucibus.
Placeholder 64x64
عنوان رسانه
Cras sit amet nibh libero، در gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio، vestibulum in vulputate at، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis در faucibus.
<div class="media">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    <div class="media mt-3">
      <a class="mr-3" href="#">
        <img src="..." class="mr-3" alt="...">
      </a>
      <div class="media-body">
        <h5 class="mt-0">Media heading</h5>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </div>
  </div>
</div>

هم ترازی

رسانه موجود در یک شی رسانه را می توان با ابزارهای flexbox در بالای (پیش فرض)، وسط یا انتهای .media-bodyمحتوای شما تراز کرد.

Placeholder 64x64
رسانه با تراز بالا

Cras sit amet nibh libero، در gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio، vestibulum in vulputate at، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis در faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parurient montes, nascetur ridiculus mus.

<div class="media">
  <img src="..." class="align-self-start mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Top-aligned media</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>
Placeholder 64x64
رسانه تراز مرکزی

Cras sit amet nibh libero، در gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio، vestibulum in vulputate at، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis در faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parurient montes, nascetur ridiculus mus.

<div class="media">
  <img src="..." class="align-self-center mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Center-aligned media</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>
Placeholder 64x64
رسانه با تراز پایین

Cras sit amet nibh libero، در gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio، vestibulum in vulputate at، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis در faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parurient montes, nascetur ridiculus mus.

<div class="media">
  <img src="..." class="align-self-end mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Bottom-aligned media</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>

سفارش

ترتیب محتوا در اشیاء رسانه را با تغییر خود HTML یا با افزودن مقداری فلکس‌باکس CSS سفارشی برای تنظیم orderویژگی (به یک عدد صحیح دلخواه) تغییر دهید.

شی رسانه ای
Cras sit amet nibh libero، در gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio، vestibulum in vulputate at، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis در faucibus.
Placeholder 64x64
<div class="media">
  <div class="media-body">
    <h5 class="mt-0 mb-1">Media object</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
  <img src="..." class="ml-3" alt="...">
</div>

لیست رسانه ها

از آنجایی که شئ رسانه الزامات ساختاری بسیار کمی دارد، می توانید از این کلاس ها در عناصر لیست HTML نیز استفاده کنید. در خود <ul>یا <ol>، .list-unstyledبرای حذف هر گونه سبک لیست پیش فرض مرورگر، آن را اضافه کنید و سپس آن .mediaرا به s خود اعمال کنید <li>. مثل همیشه، هر جا که برای تنظیم دقیق نیاز بود از ابزارهای فاصله استفاده کنید.

  • Placeholder 64x64
    شیء رسانه ای مبتنی بر فهرست
    Cras sit amet nibh libero، در gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio، vestibulum in vulputate at، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis در faucibus.
  • Placeholder 64x64
    شیء رسانه ای مبتنی بر فهرست
    Cras sit amet nibh libero، در gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio، vestibulum in vulputate at، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis در faucibus.
  • Placeholder 64x64
    شیء رسانه ای مبتنی بر فهرست
    Cras sit amet nibh libero، در gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio، vestibulum in vulputate at، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis در faucibus.
<ul class="list-unstyled">
  <li class="media">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
  <li class="media my-4">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
  <li class="media">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
</ul>