ئۆبجێکتی میدیایی
بەڵگەنامە و نموونە بۆ ئۆبجێکتی میدیایی Bootstrap بۆ دروستکردنی پێکهاتەی زۆر دووبارەبووەوە وەک کۆمێنتی بلۆگ، تویت و هاوشێوەکانی.
ئۆبجێکتی میدیا یارمەتیدەرە بۆ دروستکردنی پێکهاتەی ئاڵۆز و دووبارەبووەوە کە هەندێک میدیا شانبەشانی ناوەڕۆکێک کە بە دەوری میدیای ئاماژەپێکراودا ناپێچێتەوە، جێگیرکراون. لەگەڵ ئەوەشدا، ئەمە دەکات تەنها بە دوو پۆلی پێویست بەهۆی flexbox.
لە خوارەوە نموونەیەک لە یەک ئۆبجێکتی میدیایی دەخەینەڕوو. تەنها دوو پۆل پێویستە- پێچان .media
و .media-body
دەوروبەری ناوەڕۆکەکەت. دەتوانرێت پادکردن و پەراوێزی ئیختیاری لە ڕێگەی سوودمەندیەکانی دووریکردنەوە کۆنتڕۆڵ بکرێت .
سەردێڕی میدیایی
کراس دانیشتن amet nibh libero، لە gravida nulla. نولا ڤێل مێتۆس سیلێریسکی ئەنتی سۆلیسیتودین. Cras purus odio، vestibulum لە vulputate لە، tempus viverra turpis. Fusce condimentum nunc ac nisi کۆئەندامی زاوزێ. دۆنێک لاسینیا کۆنگی فێلیس لە فاوسیبوسدا.<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: توخمەکانی ناو هێڵ وەک بابەتی فلیکس مامەڵەیان لەگەڵ ناکرێت
ئینتەرنێت ئێکسپلۆرەر ١٠-١١ توخمەکانی ناو هێڵ وەک بەستەر یان وێنە (یان ::before
و ::after
توخمە ساختەکان) وەک بابەتی فلیکس ڕەندەر ناکات. تاکە چارەسەر ئەوەیە کە بەهایەکی نا-ناوهێڵ دابنێیت display
(بۆ نموونە، block
, inline-block
, یان flex
). پێشنیار دەکەین بەکارهێنانی .d-flex
, یەکێک لە سوودمەندییەکانی پیشاندانیمان , وەک چارەسەرێکی ئاسان.
سەرچاوە: Flexbugs لە GitHub
دەتوانرێت شتەکانی میدیا بە شێوەیەکی بێکۆتایی هێلانە بکرێن، هەرچەندە پێشنیار دەکەین لە شوێنێکدا بوەستیت. .media
لە ناو .media-body
ئۆبجێکتی میدیای باوکدا هێلانەکراو دابنێ .
سەردێڕی میدیایی
کراس دانیشتن amet nibh libero، لە gravida nulla. نولا ڤێل مێتۆس سیلێریسکی ئەنتی سۆلیسیتودین. Cras purus odio، vestibulum لە vulputate لە، tempus viverra turpis. Fusce condimentum nunc ac nisi کۆئەندامی زاوزێ. دۆنێک لاسینیا کۆنگی فێلیس لە فاوسیبوسدا.<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
ناوەڕۆکەکەت.
میدیای سەرەوەی ڕیزکراو
کراس دانیشتن 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 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>
میدیای هاوتەریب بە ناوەند
کراس دانیشتن 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 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>
میدیای ڕیزکراوی خوارەوە
کراس دانیشتن 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 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ی تایبەت بە flexbox بۆ ڕێکخستنی order
تایبەتمەندییەکە (بۆ ژمارەیەکی تەواو بە دڵی خۆت).
ئۆبجێکتی میدیایی
کراس دانیشتن amet nibh libero، لە gravida nulla. نولا ڤێل مێتۆس سیلێریسکی ئەنتی سۆلیسیتودین. Cras purus odio، vestibulum لە vulputate لە، tempus viverra turpis. Fusce condimentum nunc ac nisi کۆئەندامی زاوزێ. دۆنێک لاسینیا کۆنگی فێلیس لە فاوسیبوسدا.<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ی لیست بەکاربهێنیت. لەسەر یانەکەت <ul>
، <ol>
زیاد بکە .list-unstyled
بۆ لابردنی هەر شێوازێکی لیستی پێشوەختەی وێبگەڕەکە، و پاشان جێبەجێی .media
بکە بۆ <li>
s. وەک هەمیشە لە هەر شوێنێک پێویست بوو سوودمەندییەکانی دووری بەکاربهێنە بۆ وردکردنەوە.
-
ئۆبجێکتی میدیایی لەسەر بنەمای لیست
کراس دانیشتن amet nibh libero، لە gravida nulla. نولا ڤێل مێتۆس سیلێریسکی ئەنتی سۆلیسیتودین. Cras purus odio، vestibulum لە vulputate لە، tempus viverra turpis. Fusce condimentum nunc ac nisi کۆئەندامی زاوزێ. دۆنێک لاسینیا کۆنگی فێلیس لە فاوسیبوسدا. -
ئۆبجێکتی میدیایی لەسەر بنەمای لیست
کراس دانیشتن amet nibh libero، لە gravida nulla. نولا ڤێل مێتۆس سیلێریسکی ئەنتی سۆلیسیتودین. Cras purus odio، vestibulum لە vulputate لە، tempus viverra turpis. Fusce condimentum nunc ac nisi کۆئەندامی زاوزێ. دۆنێک لاسینیا کۆنگی فێلیس لە فاوسیبوسدا. -
ئۆبجێکتی میدیایی لەسەر بنەمای لیست
کراس دانیشتن 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 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>