Медиа объект
Блогын сэтгэгдэл, жиргээ гэх мэт дахин давтагдах бүрэлдэхүүн хэсгүүдийг бүтээхэд зориулсан 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: Inline элементүүдийг уян хатан зүйл гэж үзэхгүй
Internet Explorer 10-11 нь холбоос эсвэл зураг (эсвэл ::before
псевдо ::after
-элементүүд) зэрэг доторлогооны элементүүдийг уян хатан зүйл болгон гаргадаггүй. Цорын ганц шийдэл бол шугаман бус display
утгыг (жишээ нь, block
, inline-block
, эсвэл flex
) тохируулах явдал юм. Бид дэлгэцийн хэрэгслүүдийн.d-flex
нэгийг хялбархан засахын тулд ашиглахыг санал болгож байна.
Эх сурвалж: GitHub дээрх Flexbugs
Үүрлэх
Медиа объектуудыг хязгааргүй үүрлэж болно, гэхдээ бид таныг хэзээ нэгэн цагт зогсоохыг санал болгож байна. Үндсэн медиа объектын .media
дотор байрлуулна..media-body
Хэвлэл мэдээллийн гарчиг
Бөмбөг унаж эхлэхэд фронт дээр зогсох. Тэнгэр бидний хайранд атаархаж, тэнгэр элч нар дээрээс уйлж байна. Чамайг сая бөгжөөр сольж чадахгүй. Хүү минь, чи надтай хамт байхдаа би чамд амтлах болно. Буцах зам байхгүй. Чамайг надтай уулзахаас өмнө би зүгээр байсан ч бүх зүйл хүнд байсан. Титэм зүүсэн толгой хүнд байна.
Хэвлэл мэдээллийн гарчиг
Сайн байцгаана уу хайртай хүмүүсээ аялалд гарцгаая. Тийм ээ, бид тэнгэр элчүүдийг уйлуулж, дээрээс дэлхий дээр бороо оруулдаг. Танд тэмдэглэх сайхан зүйл өг. Би хэлээ хазаж, амьсгаагаа дардаг байсан. Би арьсан бариу жинсэн өмдөөр таны зүрхийг цохиулна. Би ганцаараа өөр хэмнэлтэй жагсаж байхдаа. Ахлах сургуулиа төгсөөд анх танилцсан зун. Чи үнэхээр ховсдож байна, чи чөтгөр байж чадах уу? Чи сахиусан тэнгэр байж чадах уу? Том бөмбөлөгүүдийг гаргах цаг болжээ. Би үл хамаарах зүйл гэж бодсон. Бикини, цуккини, Мартинис, ямар ч weenies.
<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>
Төвд зэрэгцүүлсэн медиа
Тэр хөлдөөгч шиг хүйтэн болно. Энэ бүхний эцэст. Зөгий шиг хатгаж би зураасаа авлаа. Бикини, цуккини, Мартинис, ямар ч weenies. Таныг эрүүл хоолны дуршилтай болсон гэж найдаж байна. Бид бүжиглэж чадна, үхэх хүртлээ чи бид хоёр үүрд залуу байх болно. Бид амьдралаар амьдарч байна. Бид үүнийг зөв хийж байна. Гудамжинд ярихад чи надад харуулах зүйл байна, би.
Тоглолтыг 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>
Доод талд зэрэгцүүлсэн медиа
Алив, өнгөнүүд чинь тэсэрцгээе. Миний дотор байгаа энэ гэрлийг би мэдэрч байна. Шөнөжингөө тэд чиний дууг тоглож байна. Токиогоос Мексик, Рио хүртэл. Буцах зам байхгүй. Гэхдээ дэлхий рүү. Ид шидтэй, өнгөлөг, Ноён нууцлаг, эээ. Өөр өөр ДНХ, тэд чамайг ойлгохгүй байна.
Гэхдээ дэлхий рүү. Тэр үүнийг олж авсан, je ne sais quoi, та үүнийг мэднэ. Би ханан дээрх бичээсийг харж байна. Хөвгүүд хүзүүгээ хугалж, мөлхөх гэж оролдоно. Намайг аваарай, намайг аваарай. Зүрх сэтгэлээ нээ. Би үл хамаарах зүйл гэж бодсон. Бөм, тэсрэлт, тэсрэлт. Венецийн наран шарлагын газар, Палм Спрингс, зун бол бүх зүйл юм. Цохилтыг буцааж ав. (Бид ингэж хийдэг)
<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-г өөрчилснөөр медиа объектуудын агуулгын дарааллыг өөрчлөх, эсвэл order
өмчийг тохируулахын тулд тусгайлсан flexbox CSS-г нэмж (таны сонгосон бүхэл тоогоор) өөрчлөх.
Медиа объект
Золиослол гарна гэдгийг би мэдэж байгаа ч энэ бол үнэ юм. Чи надад тогос шувуугаа харуулах зоригтой юу? Өнөө орой өсвөр насны мөрөөдөл болоорой. Өө, би чамайг харж байна. Буцах зам байхгүй. Тийм ээ, бид зээлийн картынхаа тоог нэмэгдүүлж, баарнаас хөөгдөв. Тиймээс би чамд төрсөн өдрийн хувцасаа өмсүүлье. Та түүнтэй уулзахдаа дурлаж болно. Дэлхий таны гарын алганд байсан. Агуу байдал нь чамайг бүү доошлуул, өө, өө тийм. Одоо бид зурхайн тухай ярьж, хумсаа янзалж, бүх япон-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>
-
Жагсаалтад суурилсан медиа объект
Миний бүх охидын хувцасны чимэг Chanel baby. Тиймээс та бялуугаа авч болно. Өнөө орой, өнөө орой, өнөө орой би агаарт алхаж байна. Айдсаа аажмаар залгиж байна, тиймээ. Хурдан өсөн нэмэгдэж буй аянга. Маш халуун, хүнд, 'Үүр цайх хүртэл. Гялалзсан хуяг дуулга өмссөн хүлэг баатраар төгсдөг үлгэр. Титэм зүүсэн толгой хүнд байна.
-
Жагсаалтад суурилсан медиа объект
Магадгүй бүх хаалга хаагдсан шалтгаан байж болох юм. Учир нь чи нэг удаа минийх, нэг удаа минийх болно. Өнөө орой өсвөр насны мөрөөдөл болоорой. Титэм зүүсэн толгой хүнд байна. Баяр ч биш, тэмдэглэх зүйл ч биш. Төгс шуурга, төгс шуурга.
-
Жагсаалтад суурилсан медиа объект
Чи надад тогос шувуугаа үзүүлэхээр зориглоод байна уу? Буцах зам байхгүй. Энэ бол сүүлчийн мөрний дараа та хамгийн сүүлд хэлж байна. Энэ бүхний эцэст.
<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>