Source

ئۆبجێکتی میدیایی

بەڵگەنامە و نموونە بۆ ئۆبجێکتی میدیایی Bootstrap بۆ دروستکردنی پێکهاتەی زۆر دووبارەبووەوە وەک کۆمێنتی بلۆگ، تویت و هاوشێوەکانی.

نموونە

ئۆبجێکتی میدیا یارمەتیدەرە بۆ دروستکردنی پێکهاتەی ئاڵۆز و دووبارەبووەوە کە هەندێک میدیا شانبەشانی ناوەڕۆکێک کە بە دەوری میدیای ئاماژەپێکراودا ناپێچێتەوە، جێگیرکراون. لەگەڵ ئەوەشدا، ئەمە دەکات تەنها بە دوو پۆلی پێویست بەهۆی flexbox.

لە خوارەوە نموونەیەک لە یەک ئۆبجێکتی میدیایی دەخەینەڕوو. تەنها دوو پۆل پێویستە- پێچان .mediaو .media-bodyدەوروبەری ناوەڕۆکەکەت. دەتوانرێت پادکردن و پەراوێزی ئیختیاری لە ڕێگەی سوودمەندیەکانی دووریکردنەوە کۆنتڕۆڵ بکرێت .

Placeholder 64x64
سەردێڕی میدیایی
کراس دانیشتن amet nibh libero، لە gravida nulla. نولا ڤێل مێتۆس سیلێریسکی ئەنتی سۆلیسیتودین. Cras purus odio، vestibulum لە vulputate لە، tempus viverra turpis. Fusce condimentum nunc ac nisi کۆئەندامی زاوزێ. دۆنێک لاسینیا کۆنگی فێلیس لە فاوسیبوسدا.
<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: توخمەکانی ناو هێڵ وەک بابەتی فلیکس مامەڵەیان لەگەڵ ناکرێت

ئینتەرنێت ئێکسپلۆرەر ١٠-١١ توخمەکانی ناو هێڵ وەک بەستەر یان وێنە (یان ::beforeو ::afterتوخمە ساختەکان) وەک بابەتی فلیکس ڕەندەر ناکات. تاکە چارەسەر ئەوەیە کە بەهایەکی نا-ناوهێڵ دابنێیت display(بۆ نموونە، block, inline-block, یان flex). پێشنیار دەکەین بەکارهێنانی .d-flex, یەکێک لە سوودمەندییەکانی پیشاندانیمان , وەک چارەسەرێکی ئاسان.

سەرچاوە: Flexbugs لە GitHub

هێلانەکردن

دەتوانرێت شتەکانی میدیا بە شێوەیەکی بێکۆتایی هێلانە بکرێن، هەرچەندە پێشنیار دەکەین لە شوێنێکدا بوەستیت. .mediaلە ناو .media-bodyئۆبجێکتی میدیای باوکدا هێلانەکراو دابنێ .

Placeholder 64x64
سەردێڕی میدیایی
کراس دانیشتن amet nibh libero، لە gravida nulla. نولا ڤێل مێتۆس سیلێریسکی ئەنتی سۆلیسیتودین. Cras purus odio، vestibulum لە vulputate لە، tempus viverra turpis. Fusce condimentum nunc ac nisi کۆئەندامی زاوزێ. دۆنێک لاسینیا کۆنگی فێلیس لە فاوسیبوسدا.
Placeholder 64x64
سەردێڕی میدیایی
کراس دانیشتن amet nibh libero، لە gravida nulla. نولا ڤێل مێتۆس سیلێریسکی ئەنتی سۆلیسیتودین. Cras purus odio، vestibulum لە vulputate لە، tempus viverra turpis. Fusce condimentum nunc ac nisi کۆئەندامی زاوزێ. دۆنێک لاسینیا کۆنگی فێلیس لە فاوسیبوسدا.
<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
میدیای سەرەوەی ڕیزکراو

کراس دانیشتن amet nibh libero، لە gravida nulla. نولا ڤێل مێتۆس سیلێریسکی ئەنتی سۆلیسیتودین. Cras purus odio، vestibulum لە vulputate لە، tempus viverra turpis. Fusce condimentum nunc ac nisi کۆئەندامی زاوزێ. دۆنێک لاسینیا کۆنگی فێلیس لە فاوسیبوسدا.

دۆنێک سێد ئۆدیۆ دوی. Nullam quis risus eget ئورنا مۆلیس ئۆرنارێ ڤێل ئیو لیۆ. Cum sociis natoque پێناتیبوس و مەگنیس دیس پارتوریێنت مۆنتیس، ناسکێتۆر گاڵتەجاڕ موس.

<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
میدیای هاوتەریب بە ناوەند

کراس دانیشتن amet nibh libero، لە gravida nulla. نولا ڤێل مێتۆس سیلێریسکی ئەنتی سۆلیسیتودین. Cras purus odio، vestibulum لە vulputate لە، tempus viverra turpis. Fusce condimentum nunc ac nisi کۆئەندامی زاوزێ. دۆنێک لاسینیا کۆنگی فێلیس لە فاوسیبوسدا.

دۆنێک سێد ئۆدیۆ دوی. Nullam quis risus eget ئورنا مۆلیس ئۆرنارێ ڤێل ئیو لیۆ. Cum sociis natoque پێناتیبوس و مەگنیس دیس پارتوریێنت مۆنتیس، ناسکێتۆر گاڵتەجاڕ موس.

<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
میدیای ڕیزکراوی خوارەوە

کراس دانیشتن amet nibh libero، لە gravida nulla. نولا ڤێل مێتۆس سیلێریسکی ئەنتی سۆلیسیتودین. Cras purus odio، vestibulum لە vulputate لە، tempus viverra turpis. Fusce condimentum nunc ac nisi کۆئەندامی زاوزێ. دۆنێک لاسینیا کۆنگی فێلیس لە فاوسیبوسدا.

دۆنێک سێد ئۆدیۆ دوی. Nullam quis risus eget ئورنا مۆلیس ئۆرنارێ ڤێل ئیو لیۆ. Cum sociis natoque پێناتیبوس و مەگنیس دیس پارتوریێنت مۆنتیس، ناسکێتۆر گاڵتەجاڕ موس.

<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ی تایبەت بە flexbox بۆ ڕێکخستنی orderتایبەتمەندییەکە (بۆ ژمارەیەکی تەواو بە دڵی خۆت).

ئۆبجێکتی میدیایی
کراس دانیشتن amet nibh libero، لە gravida nulla. نولا ڤێل مێتۆس سیلێریسکی ئەنتی سۆلیسیتودین. Cras purus odio، vestibulum لە vulputate لە، tempus viverra turpis. Fusce condimentum nunc ac nisi کۆئەندامی زاوزێ. دۆنێک لاسینیا کۆنگی فێلیس لە فاوسیبوسدا.
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بکە بۆ <li>s. وەک هەمیشە لە هەر شوێنێک پێویست بوو سوودمەندییەکانی دووری بەکاربهێنە بۆ وردکردنەوە.

  • Placeholder 64x64
    ئۆبجێکتی میدیایی لەسەر بنەمای لیست
    کراس دانیشتن amet nibh libero، لە gravida nulla. نولا ڤێل مێتۆس سیلێریسکی ئەنتی سۆلیسیتودین. Cras purus odio، vestibulum لە vulputate لە، tempus viverra turpis. Fusce condimentum nunc ac nisi کۆئەندامی زاوزێ. دۆنێک لاسینیا کۆنگی فێلیس لە فاوسیبوسدا.
  • Placeholder 64x64
    ئۆبجێکتی میدیایی لەسەر بنەمای لیست
    کراس دانیشتن amet nibh libero، لە gravida nulla. نولا ڤێل مێتۆس سیلێریسکی ئەنتی سۆلیسیتودین. Cras purus odio، vestibulum لە vulputate لە، tempus viverra turpis. Fusce condimentum nunc ac nisi کۆئەندامی زاوزێ. دۆنێک لاسینیا کۆنگی فێلیس لە فاوسیبوسدا.
  • Placeholder 64x64
    ئۆبجێکتی میدیایی لەسەر بنەمای لیست
    کراس دانیشتن amet nibh libero، لە gravida nulla. نولا ڤێل مێتۆس سیلێریسکی ئەنتی سۆلیسیتودین. Cras purus odio، vestibulum لە vulputate لە، tempus viverra turpis. Fusce condimentum nunc ac nisi کۆئەندامی زاوزێ. دۆنێک لاسینیا کۆنگی فێلیس لە فاوسیبوسدا.
<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>