میڈیا اعتراض
بوٹسٹریپ کے میڈیا آبجیکٹ کے لیے دستاویزات اور مثالیں انتہائی دہرائے جانے والے اجزاء جیسے بلاگ کے تبصرے، ٹویٹس اور اس طرح کی تعمیر کے لیے۔
مثال
میڈیا آبجیکٹ پیچیدہ اور دہرائے جانے والے اجزاء کو بنانے میں مدد کرتا ہے جہاں کچھ میڈیا مواد کے ساتھ کھڑا ہوتا ہے جو کہ میڈیا کے ارد گرد لپیٹ نہیں ہوتا ہے۔ اس کے علاوہ، یہ فلیکس باکس کی بدولت صرف دو مطلوبہ کلاسوں کے ساتھ کرتا ہے۔
ذیل میں ایک واحد میڈیا آبجیکٹ کی مثال ہے۔ صرف دو کلاسز درکار ہیں - ریپنگ .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: ان لائن عناصر کو فلیکس آئٹمز کے طور پر نہیں سمجھا جاتا ہے۔
انٹرنیٹ ایکسپلورر 10-11 ان لائن عناصر جیسے لنکس یا تصاویر (یا ::before
اور ::after
چھدم عناصر) کو فلیکس آئٹمز کے طور پر پیش نہیں کرتا ہے۔ واحد حل یہ ہے کہ ایک غیر ان لائن display
قدر (مثلاً، block
, inline-block
, یا flex
) سیٹ کرنا ہے۔ ہم ایک آسان حل کے طور پر، .d-flex
ہماری ڈسپلے یوٹیلیٹیز میں سے ایک کو استعمال کرنے کا مشورہ دیتے ہیں ۔
ماخذ: GitHub پر Flexbugs
گھونسلہ
میڈیا آبجیکٹ کو لامحدود طور پر نیسٹ کیا جا سکتا ہے، حالانکہ ہم آپ کو کسی وقت رکنے کا مشورہ دیتے ہیں۔ ایک پیرنٹ میڈیا آبجیکٹ کے اندر .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
۔
اوپر سے منسلک میڈیا
میں اسے کوما میں ڈال دوں گا۔ آپ سو وجوہات بتاتے ہیں، اور آپ کہتے ہیں کہ آپ واقعی کوشش کرنے والے ہیں۔ تو میں خاموشی سے بیٹھ گیا، شائستگی سے اتفاق کیا۔ میرے تاج کی جنگ کے لیے موزوں۔ اور میری 18 ویں سالگرہ پر ہمیں مماثل ٹیٹو مل گئے۔ بہت وضع دار، ہاں، وہ ایک کلاسک ہے۔ میں کم سفر کرنے والی سڑک کے لیے تیار ہوں۔
میں ہوا پر چل رہا ہوں (آج رات)۔ لیکن نیچے زمین تک۔ آپ اصلی ہیں، آپ کو تبدیل نہیں کیا جا سکتا۔ لیکن دوسری زندگی میں میں آپ کی لڑکی بنوں گی۔ ہم کیلی کی طرف چل پڑے اور ساحل سمندر پر نشے میں دھت ہو گئے۔ ہم رقص کر سکتے ہیں، جب تک ہم مر نہیں جاتے، آپ اور میں، ہمیشہ جوان رہیں گے۔ آپ کو شہر کے مرکز میں بلیوز گاتے دیکھا۔
<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>
نیچے سے منسلک میڈیا
چلو اپنے رنگ پھٹنے دو۔ میں اس روشنی کو محسوس کر سکتا ہوں جو میرے اندر ہے۔ ساری رات وہ چل رہے ہیں، تمہارا گانا۔ ٹوکیو سے میکسیکو، ریو تک۔ واپس جانے کی کوئی بات نہیں ہے۔ لیکن نیچے زمین پر۔ جادوئی، رنگین، مسٹر اسرار، ای۔ مختلف ڈی این اے، وہ آپ کو نہیں سمجھتے۔
لیکن نیچے زمین پر۔ وہ سمجھ گئی ہے، آپ کو معلوم ہے۔ میں دیوار پر تحریر دیکھ سکتا ہوں۔ لڑکوں نے اپنی گردنیں توڑ دیں'نا تھوڑا سا چپکے سے جھانکنے کی کوشش کی۔ مجھے لے لو، مجھے لے لو۔ اپنا دل کھولو۔ سوچا کہ میں اس سے مستثنیٰ ہوں۔ بوم، بوم، بوم۔ وینس ساحل سمندر اور پام اسپرنگس، موسم گرما سب کچھ ہے. بیٹ واپس لاؤ۔ (ہم اس طرح کرتے ہیں)
<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 شامل کر کے میڈیا آبجیکٹ میں مواد کی ترتیب کو تبدیل 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>
، کسی بھی براؤزر کی ڈیفالٹ لسٹ اسٹائل کو ہٹانے کے لیے شامل کریں ، اور پھر اپنے s پر .list-unstyled
لاگو کریں ۔ ہمیشہ کی طرح، جہاں بھی ضرورت ہو اسپیسنگ یوٹیلیٹیز کو ٹھیک کرنے کے لیے استعمال کریں۔.media
<li>
-
فہرست پر مبنی میڈیا آبجیکٹ
میری تمام لڑکیاں ونٹیج چینل بیبی۔ تو آپ اپنا کیک لے سکتے ہیں۔ آج رات، آج رات، آج رات، میں ہوا پر چل رہا ہوں۔ آہستہ آہستہ میرے خوف کو نگل رہا ہے، ہاں ہاں. بجلی کی چمک میں تیزی سے بڑھنا۔ اتنا گرم اور بھاری، صبح تک۔ وہ پریوں کی کہانی چمکتی ہوئی بکتر میں ایک نائٹ کے ساتھ ختم ہوتی ہے۔ وہ سر بھاری ہے جو تاج پہنتا ہے۔
-
فہرست پر مبنی میڈیا آبجیکٹ
شاید ایک وجہ ہے کہ سارے دروازے بند ہیں۔ کیونکہ ایک بار تم میرے ہو، ایک بار تم میرے ہو. آج رات اپنے نوعمر خواب بنیں۔ وہ سر بھاری ہے جو تاج پہنتا ہے۔ یہ چھٹی بھی نہیں، منانے کے لیے کچھ بھی نہیں۔ ایک کامل طوفان، کامل طوفان۔
-
فہرست پر مبنی میڈیا آبجیکٹ
کیا تم میں اتنی ہمت ہے کہ مجھے اپنا مور دیکھنے دو؟ واپس جانے کی کوئی بات نہیں ہے۔ یہ آخری بار ہے جب آپ کہتے ہیں، آخری لائن کے بعد آپ ٹوٹ جاتے ہیں. اس سب کے آخر میں۔
<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>