Source

شی رسانه ای

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

مثال

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

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

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 class="mr-3" src="..." alt="Generic placeholder image">
  <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یک شی رسانه والد.

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.
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 class="mr-3" src="..." alt="Generic placeholder image">
  <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="pr-3" href="#">
        <img src="..." alt="Generic placeholder image">
      </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محتوای شما تراز کرد.

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 class="align-self-start mr-3" src="..." alt="Generic placeholder image">
  <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>
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 class="align-self-center mr-3" src="..." alt="Generic placeholder image">
  <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>
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 class="align-self-end mr-3" src="..." alt="Generic placeholder image">
  <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.
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 class="ml-3" src="..." alt="Generic placeholder image">
</div>

لیست رسانه ها

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

  • 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.
  • 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.
  • 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 class="mr-3" src="..." alt="Generic placeholder image">
    <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 class="mr-3" src="..." alt="Generic placeholder image">
    <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 class="mr-3" src="..." alt="Generic placeholder image">
    <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>