ئۆبجێکتی میدیایی
بەڵگەنامە و نموونە بۆ ئۆبجێکتی میدیایی Bootstrap بۆ دروستکردنی پێکهاتەی زۆر دووبارەبووەوە وەک کۆمێنتی بلۆگ، تویت و هاوشێوەکانی.
نموونە
ئۆبجێکتی میدیا یارمەتیدەرە بۆ دروستکردنی پێکهاتەی ئاڵۆز و دووبارەبووەوە کە هەندێک میدیا شانبەشانی ناوەڕۆکێک کە بە دەوری میدیای ئاماژەپێکراودا ناپێچێتەوە، جێگیرکراون. لەگەڵ ئەوەشدا، ئەمە دەکات تەنها بە دوو پۆلی پێویست بەهۆی flexbox.
لە خوارەوە نموونەیەک لە یەک ئۆبجێکتی میدیایی دەخەینەڕوو. تەنها دوو پۆل پێویستە- پێچان .media
و .media-body
دەوروبەری ناوەڕۆکەکەت. دەتوانرێت پادکردن و پەراوێزی ئیختیاری لە ڕێگەی سوودمەندیەکانی دووریکردنەوە کۆنتڕۆڵ بکرێت .
سەردێڕی میدیایی
ئایا تۆش هەمان شت بۆ من دەکەیت؟ کاتی ئەوە هاتووە ڕووبەڕووی مۆسیقاکە ببیتەوە من چیتر مۆزی تۆ نیم. بیستوومە جوانە، دادوەر بە و کچەکانم دەنگ دەدەن. هەست بە فینیکسێک دەکەم لە ناوەوەمدا. بەهەشت ئیرەیی بە خۆشەویستیمان دەبات، فریشتەکان لە سەرەوە دەگرین. بەڵێ تۆ دەمبەیتە یۆتۆپیا.
<div class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<p>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>
</div>
</div>
Flexbug #12: توخمەکانی ناو هێڵ وەک بابەتی فلیکس مامەڵەیان لەگەڵ ناکرێت
ئینتەرنێت ئێکسپلۆرەر ١٠-١١ توخمەکانی ناو هێڵ وەک بەستەر یان وێنە (یان ::before
و ::after
توخمە ساختەکان) وەک بابەتی فلیکس ڕەندەر ناکات. تاکە چارەسەر ئەوەیە کە بەهایەکی نا-ناوهێڵ دابنێیت display
(بۆ نموونە، block
, inline-block
, یان flex
). پێشنیار دەکەین بەکارهێنانی .d-flex
, یەکێک لە سوودمەندییەکانی پیشاندانیمان , وەک چارەسەرێکی ئاسان.
سەرچاوە: Flexbugs لە GitHub
هێلانەکردن
دەتوانرێت شتەکانی میدیا بە شێوەیەکی بێکۆتایی هێلانە بکرێن، هەرچەندە پێشنیار دەکەین لە شوێنێکدا بوەستیت. .media
لە ناو .media-body
ئۆبجێکتی میدیای باوکدا هێلانەکراو دابنێ .
سەردێڕی میدیایی
وەستان لە هێڵی پێشەوە کاتێک بۆمبەکان دەست دەکەن بە کەوتن. بەهەشت ئیرەیی بە خۆشەویستیمان دەبات، فریشتەکان لە سەرەوە دەگرین. ناتوانێت بە ملیۆنێک ئەڵقە جێگەی تۆ بگرێتەوە. کوڕم کە لەگەڵم بووی تامێکت پێ ئەدەم. هیچ گەڕانەوەیەک نییە. پێش ئەوەی من بناسیت باش بووم بەڵام شتەکان جۆرێک قورس بوون. قورسە ئەو سەرەی کە تاجی لەبەر دەکات.
سەردێڕی میدیایی
سڵاو ئازیزان با گەشتێک بکەین. بەڵێ، ئێمە فریشتەکان دەگرین، لە سەرەوە باران دەبارێتە سەر زەوی. شتێکی باشت پێ بدە بۆ ئەوەی ئاهەنگ بگێڕیت. زمانم دەگرت و هەناسەم دەگرت. من ما دڵت لێدەدات لە جینزە توندەکانی پێستمدا. لە کاتێکدا بە تەنیا بۆ لێدانێکی جیاواز ڕێپێوان دەکەم. هاوین دوای ئامادەیی کاتێک بۆ یەکەمجار یەکترمان ناسی. تۆ ئەوەندە هیپنۆتیزم، دەتوانی شەیتان بیت؟ دەتوانی فریشتە بیت؟ کاتی ئەوە هاتووە باڵۆنە گەورەکان بهێنینە دەرەوە. پێم وابوو کە من ئیستسنایم. بیکینی، کولەکە، مارتینی، بێ وینی.
<div class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<p>Standing on the frontline when the bombs start to fall. Heaven is jealous of our love, angels are crying from up above. Can't replace you with a million rings. Boy, when you're with me I'll give you a taste. There’s no going back. Before you met me I was alright but things were kinda heavy. Heavy is the head that wears the crown.</p>
<div class="media mt-3">
<a class="mr-3" href="#">
<img src="..." alt="...">
</a>
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<p>Greetings loved ones let's take a journey. Yes, we make angels cry, raining down on earth from up above. Give you something good to celebrate. I used to bite my tongue and hold my breath. I'm ma get your heart racing in my skin-tight jeans. As I march alone to a different beat. Summer after high school when we first met. You're so hypnotizing, could you be the devil? Could you be an angel? It's time to bring out the big balloons. Thought that I was the exception. Bikinis, zucchinis, Martinis, no weenies.</p>
</div>
</div>
</div>
</div>
ڕێکخستن
میدیا لە ئۆبجێکتی میدیادا دەتوانرێت لەگەڵ سوودمەندییەکانی flexbox ڕێکبخرێت بۆ سەرەوە (بەپێی پێشوەختە)، ناوەڕاست، یان کۆتایی .media-body
ناوەڕۆکەکەت.
میدیای سەرەوەی ڕیزکراو
من دەیخەمە ناو کۆما. سەد هۆکار دەخەیتەڕوو بۆچی، و دەڵێیت بەڕاستی هەوڵ دەدەیت. بۆیە بە هێمنی دانیشتم، بە ئەدەبەوە ڕازی بووم. خۆگونجاندن بۆ شەڕی تاجکردنم. وە لە ١٨ ساڵەی لەدایکبوونمدا تاتۆی هاوتامان کرد. کەواتە très chic، بەڵێ، ئەو کلاسیکە. من ئامادەم بۆ ئەو ڕێگایەی کەمتر گەشت دەکرێت.
من لەسەر هەوا دەڕۆم (ئەمشەو). بەڵام بۆ خوارەوە بۆ سەر زەوی. تۆ ئەسڵی، ناتوانرێت بگۆڕدرێت. بەڵام لە ژیانێکی تردا دەبوومە کچی تۆ. بە ئۆتۆمبێل ڕۆیشتین بۆ کالی و لە کەنار دەریا سەرخۆش بووین. دەتوانین سەما بکەین، تا مردن، من و تۆ، بۆ هەمیشە گەنج دەبین. تۆم بینی لە ناوەندی شار گۆرانی بلوز دەڵێیتەوە.
<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>I’m gon’ put her in a coma. You give a hundred reasons why, and you say you're really gonna try. So I sat quietly, agreed politely. Suiting up for my crowning battle. And on my 18th Birthday we got matching tattoos. So très chic, yeah, she's a classic. I am ready for the road less traveled.</p>
<p>I'm walking on air (tonight). But down to earth. You're original, cannot be replaced. But in another life I would be your girl. We drove to Cali and got drunk on the beach. We can dance, until we die, you and I, will be young forever. Saw you downtown singing the Blues.</p>
</div>
</div>
میدیای هاوتەریب بە ناوەند
وەک بەفرگرێک سارد دەبێتەوە. لە کۆتایی ئێه-کۆتایی هەموو ئەمانەدا. بە چەقۆ وەک هەنگێک هێڵەکانم بەدەست هێنا. بیکینی، کولەکە، مارتینی، بێ وینی. هیوادارم ئارەزووی خواردنی تەندروستتان هەبوو. دەتوانین سەما بکەین، تا مردن، من و تۆ، بۆ هەمیشە گەنج دەبین. ئێمە ژیان دەژین. ئێمە بە دروستی ئەنجامی دەدەین. وشە لەسەر شەقام، تۆ شتێکت دەستکەوت بۆ ئەوەی نیشانم بدەیت، من.
دەتەوێت نمایشەکە بە شێوەی 3D ببینیت، فیلمێکە. دەڵێن، بترسە تۆ وەک ئەوانی تر نیت، عاشقی ئایندەیی. دڵت بکەرەوە. بۆیە بە هێمنی دانیشتم، بە ئەدەبەوە ڕازی بووم. شەوی هەینی ڕابردوو. بەڵێ بەختت باشە ئەگەر لە فڕۆکەکەیدا بیت. من دەبمە دیاریت، شتێکی باشت پێ بدەم بۆ ئاهەنگگێڕان.
<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>She'll turn cold as a freezer. At the eh-end of it all. Stinging like a bee I earned my stripes. Bikinis, zucchinis, Martinis, no weenies. I hope you got a healthy appetite. We can dance, until we die, you and I, will be young forever. We're living the life. We're doing it right. Word on the street, you got somethin' to show me, me.</p>
<p class="mb-0">Wanna see the show in 3D, a movie. They say, be afraid you're not like the others, futuristic lover. Open up your heart. So I sat quietly, agreed politely. Last Friday night. Yeah, you're lucky if you're on her plane. I'll be your gift, give you something good to celebrate.</p>
</div>
</div>
میدیای ڕیزکراوی خوارەوە
وەرە با ڕەنگەکانت بتەقنەوە. هەست بەم ڕووناکییە دەکەم کە لە ناوەوەمدایە. بە درێژایی شەو یاری دەکەن، گۆرانی تۆ. لە تۆکیۆوە بۆ مەکسیک، بۆ ڕیۆ. هیچ گەڕانەوەیەک نییە. بەڵام بۆ خوارەوە بۆ سەر زەوی. سیحراوی، ڕەنگاوڕەنگ، کاک نهێنی، ee. دی ئێن ئەی جیاواز، لە تۆ تێناگەن.
بەڵام بۆ خوارەوە بۆ سەر زەوی. ئەو ئەوەى هەیە، je ne sais quoi، تۆ دەزانی. دەتوانم ئەو نووسراوەی سەر دیوارەکە ببینم. کوڕەکان ملیان دەشکێنن try'na بۆ ئەوەی کەمێک sneak peek بخزێنن. بمبە، تا-تا-بمبە. دڵت بکەرەوە. پێم وابوو کە من ئیستسنایم. بووم، بووم، بووم. کەناری ڤێنیز و پاڵم سپرینگز، هاوین هەموو شتێکە. لێدانەکە بهێنەرەوە. (ئێمە بەم شێوەیە دەکەین)
<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>Come on, let your colours burst. I can feel this light that's inside of me. All night they're playing, your song. From Tokyo to Mexico, to Rio. There’s no going back. But down to earth. Magical, colorful, Mr. Mystery, ee. Different DNA, they don't understand you.</p>
<p class="mb-0">But down to earth. She's got that, je ne sais quoi, you know it. I can see the writing on the wall. The boys break their necks try'na to creep a little sneak peek. Take me, ta-ta-take me. Open up your heart. Thought that I was the exception. Boom, boom, boom. Venice beach and Palm Springs, summertime is everything. Bring the beat back. (This is how we do)</p>
</div>
</div>
فەرمان
ڕێزبەندی ناوەڕۆک لە شتەکانی میدیادا بگۆڕە بە دەستکاریکردنی خودی HTML، یان بە زیادکردنی هەندێک CSSی تایبەت بە flexbox بۆ ڕێکخستنی order
تایبەتمەندییەکە (بۆ ژمارەیەکی تەواو بە دڵی خۆت).
ئۆبجێکتی میدیایی
دەزانم قوربانیدان دەبێت بەڵام ئەوە نرخەکەیە. ئایا تۆ ئەوەندە ئازایت کە ڕێگەم بدە تاووسەکەت ببینم؟ ئەمشەو خەونی هەرزەکاریت بە. ئەه-هە، دەتبینم. هیچ گەڕانەوەیەک نییە. بەڵێ، ئێمە کارتی بانکیمان ماکس کرد و لە باڕەکە دەرکراین. بۆیە با عەزی ڕۆژی لەدایکبوونت بۆ بهێنم. لەوانەیە کاتێک چاوت پێی ناسیت عاشق بیت. جیهانی لە کفنی دەستتدا هەبوو. مەهێڵە گەورەیی بتخاتە خوارەوە، ئای، ئای بەڵێ. ئێستا ئێمە قسەی ئەستێرەناسی، بەدەستهێنانی نینۆکەکانمان کرد، هەموو ژاپۆنی-y. من بکە بە ئەفرۆدیت.
<div class="media">
<div class="media-body">
<h5 class="mt-0 mb-1">Media object</h5>
<p>I know there will be sacrifice but that's the price. Are you brave enough to let me see your peacock? Be your teenage dream tonight. Uh-huh, I see you. There’s no going back. Yeah, we maxed our credit cards and got kicked out of the bar. So let me get you in your birthday suit. You may fall in love when you meet her. Had the world in the palm of your hands. Don't let the greatness get you down, oh, oh yeah. Now we talking astrology, getting our nails did, all Japanese-y. Make me your Aphrodite.</p>
</div>
<img src="..." class="ml-3" alt="...">
</div>
لیستی میدیا
لەبەر ئەوەی ئۆبجێکتی میدیا زۆر کەم پێداویستی پێکهاتەیی هەیە، دەتوانیت ئەم پۆلانە لەسەر توخمەکانی HTMLی لیست بەکاربهێنیت. لەسەر یانەکەت <ul>
، <ol>
زیاد بکە .list-unstyled
بۆ لابردنی هەر شێوازێکی لیستی پێشوەختەی وێبگەڕەکە، و پاشان جێبەجێی .media
بکە بۆ <li>
s. وەک هەمیشە لە هەر شوێنێک پێویست بوو سوودمەندییەکانی دووری بەکاربهێنە بۆ وردکردنەوە.
-
ئۆبجێکتی میدیایی لەسەر بنەمای لیست
هەموو کچەکانم ڤینتاژ شانێل منداڵ. بۆیە دەتوانیت کێکەکەت هەبێت. ئەمشەو، ئەمشەو، ئەمشەو، لەسەر هەوا دەڕۆم. هێواش هێواش ترسەکەم قووت دەدا، بەڵێ بەڵێ. خێرا گەشەکردن و دەبێتە بروسکەیەک. ئەوەندە گەرم و قورس، 'تیل بەیانی. ئەو چیرۆکە بە شوڕشگێڕێک بە زرێپۆشێکی درەوشاوە کۆتایی دێت. قورسە ئەو سەرەی کە تاجی لەبەر دەکات.
-
ئۆبجێکتی میدیایی لەسەر بنەمای لیست
ڕەنگە هۆکارێک بێت بۆ ئەوەی هەموو دەرگاکان دابخرێن. چونکە جارێک تۆ هی منیت، جارێک تۆ هی منیت. ئەمشەو خەونی هەرزەکاریت بە. قورسە ئەو سەرەی کە تاجی لەبەر دەکات. تەنانەت جەژنیش نییە، هیچ شتێک نییە بۆ ئاهەنگگێڕان. زریانێکی تەواو، زریانێکی تەواو.
-
ئۆبجێکتی میدیایی لەسەر بنەمای لیست
ئایا تۆ ئەوەندە ئازایت کە ڕێگەم بدە تاووسەکەت ببینم؟ هیچ گەڕانەوەیەک نییە. ئەمە دواجارە دەڵێی، دوای دوا دێڕ دەشکێنی. لە کۆتایی ئێه-کۆتایی هەموو ئەمانەدا.
<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>
<p>All my girls vintage Chanel baby. So you can have your cake. Tonight, tonight, tonight, I'm walking on air. Slowly swallowing down my fear, yeah yeah. Growing fast into a bolt of lightning. So hot and heavy, 'Til dawn. That fairy tale ending with a knight in shining armor. Heavy is the head that wears the crown.</p>
</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>
<p>Maybe a reason why all the doors are closed. Cause once you’re mine, once you’re mine. Be your teenage dream tonight. Heavy is the head that wears the crown. It's not even a holiday, nothing to celebrate. A perfect storm, perfect storm.</p>
</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>
<p>Are you brave enough to let me see your peacock? There’s no going back. This is the last time you say, after the last line you break. At the eh-end of it all.</p>
</div>
</li>
</ul>