Media ob'ekti
Blog sharhlari, tvitlar va shunga o'xshashlar kabi juda takrorlanadigan komponentlarni yaratish uchun Bootstrap media ob'ekti uchun hujjatlar va misollar.
Misol
Media ob'ekti murakkab va takrorlanuvchi komponentlarni yaratishga yordam beradi, bunda ba'zi ommaviy axborot vositalari ushbu mediani o'rab turmaydigan kontent bilan birga joylashgan. Bundan tashqari, bu flexbox tufayli faqat ikkita talab qilinadigan sinf bilan amalga oshiriladi.
Quyida bitta media obyektiga misol keltirilgan. Faqat ikkita sinf talab qilinadi - o'rash .media
va .media-body
kontentingiz atrofida. Ixtiyoriy to'ldirish va chekka oraliq yordam dasturlari orqali nazorat qilinishi mumkin .
Media sarlavhasi
Men uchun ham shunday qilasizmi? Musiqa bilan yuzma-yuz kelish vaqti keldi, men endi sizning ilhomingiz emasman. Eshitdimki, bu go'zal, hakam bo'ling va qizlarim ovoz berishadi. Men ichimda feniks borligini his qilyapman. Jannat bizning sevgimizga hasad qiladi, farishtalar yuqoridan yig'laydilar. Ha, siz meni utopiyaga olib borasiz.
<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: Inline elementlar moslashuvchan elementlar sifatida ko'rib chiqilmaydi
Internet Explorer 10-11 havolalar yoki tasvirlar (yoki psevdo-elementlar) kabi ichki elementlarni ::before
moslashuvchan ::after
elementlar sifatida ko'rsatmaydi. Yagona vaqtinchalik yechim - qatordan tashqari display
qiymatni o'rnatish (masalan, block
, inline-block
, yoki flex
). Oson tuzatish sifatida displey yordam dasturlarimizdan.d-flex
biri dan foydalanishni tavsiya qilamiz .
Manba: GitHub-dagi Flexbugs
Yuvalash
Media ob'ektlari cheksiz ravishda joylashtirilishi mumkin, ammo biz sizni bir nuqtada to'xtatishingizni tavsiya qilamiz. Asosiy media ob'ektining .media
ichiga joylashtiring ..media-body
Media sarlavhasi
Bombalar tusha boshlaganda frontda turish. Jannat bizning sevgimizga hasad qiladi, farishtalar yuqoridan yig'laydilar. Sizni million uzuk bilan almashtirib bo'lmaydi. Bolam, sen men bilan bo'lganingda, men sizga tatib ko'raman. Orqaga yo'l yo'q. Siz men bilan uchrashguningizcha men yaxshi edim, lekin ishlar biroz og'ir edi. Toj kiygan bosh og'ir.
Media sarlavhasi
Assalomu alaykum azizlar keling sayohatga chiqamiz. Ha, biz farishtalarni yig'laymiz, yerga tepadan yomg'ir yog'diramiz. Sizga bayram qilish uchun yaxshi narsa bering. Men tilimni tishlab, nafasimni ushlab turardim. Men tor jinsi shimlarim bilan yuragingizni urmoqchiman. Men yolg'iz boshqa ritmga yurganimda. Biz birinchi uchrashganimizda o'rta maktabdan keyin yoz. Siz juda gipnoz qilyapsiz, shayton bo'la olasizmi? Siz farishta bo'la olasizmi? Katta sharlarni olib chiqish vaqti keldi. Men bundan mustasnoman, deb o'yladim. Bikinilar, qovoqlar, Martinislar, hech qanday cho'chqalar.
<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>
Hizalama
Media ob'ektidagi media flexbox yordam dasturlari bilan kontentingizning tepasiga (standart), o'rtasiga yoki oxiriga moslashtirilishi mumkin .media-body
.
Yuqori tekislangan media
Men uni komaga tushiraman. Siz nima uchun yuzlab sabablarni keltirasiz va siz haqiqatan ham urinib ko'rishingizni aytasiz. Shunday qilib, jim o'tirdim, muloyimlik bilan rozi bo'ldim. Mening toj jangimga tayyorman. Va 18 yoshga to'lgan kunimda biz mos tatuirovkalarni oldik. Juda chiroyli, ha, u klassika. Men kamroq sayohat qilgan yo'lga tayyorman.
Men havoda yuryapman (bu kecha). Ammo yerga. Siz originalsiz, uni almashtirib bo'lmaydi. Ammo boshqa hayotda men sizning qizingiz bo'lardim. Biz Kali shahriga bordik va sohilda mast bo'ldik. Biz raqsga tushishimiz mumkin, o'lgunimizcha, siz va men abadiy yosh bo'lamiz. Sizni shahar markazida blyuzlarni kuylayotganingizni ko'rdim.
<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>
Markazga moslashtirilgan media
U muzlatkich kabi sovuq bo'ladi. Hammasi oxirida. Asalaridek tishlab o'z yo'llarimni oldim. Bikinilar, qovoqlar, Martinislar, hech qanday cho'chqalar. Umid qilamanki, sizda sog'lom ishtaha bor. Biz raqsga tushishimiz mumkin, o'lgunimizcha, siz va men abadiy yosh bo'lamiz. Biz hayot bilan yashayapmiz. Biz buni to'g'ri qilyapmiz. Ko'chada so'z, menga ko'rsatadigan narsangiz bor, menga.
Shouni 3D, filmda ko'rmoqchiman. Qo'rqing, siz boshqalarga o'xshamaysiz, futuristik sevgilisi, deyishadi. Yuragingizni oching. Shunday qilib, jim o'tirdim, muloyimlik bilan rozi bo'ldim. O'tgan juma kechasi. Ha, agar siz uning samolyotida bo'lsangiz, omadingiz bor. Men sizga sovg'a bo'laman, sizga bayram qilish uchun yaxshi narsa bering.
<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>
Pastga tekislangan media
Qani, ranglaring porlasin. Ichimdagi bu nurni his qilaman. Tun bo'yi ular o'ynashadi, sizning qo'shig'ingiz. Tokiodan Meksikaga, Rioga. Orqaga yo'l yo'q. Ammo yerga. Sehrli, rang-barang, Janob Sir, ee. Turli DNK, ular sizni tushunishmaydi.
Ammo yerga. U bor, je ne sais quoi, buni bilasiz. Men devordagi yozuvni ko'raman. O'g'il bolalar bo'yinlarini sindirib, bir oz sneak peek o'rmalab try'na. Meni ol, meni ol. Yuragingizni oching. Men bundan mustasnoman, deb o'yladim. Bum, bum, bum. Venetsiya plyaji va Palm Springs, yoz - hamma narsa. Beatni qaytaring. (Biz shunday qilamiz)
<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>
Buyurtma
HTML-ning o'zini o'zgartirish yoki order
xususiyatni o'rnatish uchun ba'zi maxsus flexbox CSS-ni qo'shish orqali media ob'ektlardagi kontent tartibini o'zgartiring (siz tanlagan butun songa).
Media ob'ekti
Men qurbonlik bo'lishini bilaman, lekin bu narx. Menga tovusingizni ko'rishga ruxsat berish uchun jasoratingiz bormi? Bugun kechqurun o'smirlik orzuingiz bo'lsin. Uh-uh, men seni ko'raman. Orqaga yo'l yo'q. Ha, biz kredit kartalarimizni oshirdik va bardan haydaldik. Shunday ekan, men sizga tug'ilgan kuningizning kostyumini kiysam. Siz u bilan uchrashganingizda sevib qolishingiz mumkin. Dunyo sizning kaftingizda edi. Ulug'lik sizni tushkunlikka tushirishiga yo'l qo'ymang, oh, ha. Endi biz munajjimlik bilan gaplashamiz, tirnoqlarimizni qo'lga kiritamiz, barchasi yapon-y. Meni Afrodita qiling.
<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>
Media ro'yxati
Media ob'ekti juda kam tizimli talablarga ega bo'lganligi sababli, siz ushbu sinflardan HTML elementlari ro'yxatida ham foydalanishingiz mumkin. Brauzerning standart ro'yxati uslublarini o'chirish uchun <ul>
yoki <ol>
ustiga qo'shing va keyin s ga qo'llang . Har doimgidek, nozik sozlash uchun kerak bo'lganda oraliq yordamchi dasturlardan foydalaning..list-unstyled
.media
<li>
-
Roʻyxat asosidagi media obyekti
Mening barcha qizlarim Chanel vintage chaqaloq. Shunday qilib, siz tortni olishingiz mumkin. Bugun kechasi, bugun kechasi, men efirda yuraman. Sekin-asta qo'rquvimni yutib yuboraman, ha ha. Tez o'sib, chaqmoq chaqishi. Juda issiq va og'ir, 'Tong otguncha. O'sha ertak yorqin zirh kiygan ritsar bilan tugaydi. Toj kiygan bosh og'ir.
-
Roʻyxat asosidagi media obyekti
Ehtimol, barcha eshiklar yopiq bo'lishining sababi. Sababi sen bir marta menikisan, bir marta menikisan. Bugun kechqurun o'smirlik orzuingiz bo'lsin. Toj kiygan bosh og'ir. Bu hatto bayram emas, nishonlanadigan hech narsa emas. Mukammal bo'ron, mukammal bo'ron.
-
Roʻyxat asosidagi media obyekti
Menga tovusingizni ko'rishga ruxsat berish uchun jasoratingiz bormi? Orqaga yo'l yo'q. Bu siz oxirgi marta aytasiz, oxirgi satrdan keyin siz buzasiz. Hammasi oxirida.
<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>