Mea hoʻolaha
Nā palapala a me nā hiʻohiʻona no Bootstrap media object e kūkulu i nā mea hana hou e like me nā manaʻo blog, tweets, a me nā mea like.
Laʻana
Kōkua ka mea media i ke kūkulu ʻana i nā ʻāpana paʻakikī a me ka hana hou ʻana kahi i hoʻonoho ʻia ai kekahi mau media ma ka ʻaoʻao o ka ʻike ʻaʻole i hoʻopili ʻia a puni ka media. Hoʻohui, hana ia me ʻelua mau papa pono e hoʻomaikaʻi iā flexbox.
Aia ma lalo kahi laʻana o kahi mea media hoʻokahi. ʻElua wale nō papa e pono ai—ʻo ka ʻōwili ʻana .media
a me ka .media-body
puni o kāu ʻike. Hiki ke hoʻomalu ʻia ka padding koho a me ka palena ma o nā pono hana spacing .
Poʻomanaʻo Media
E hana like anei ʻoe iaʻu? ʻO ka manawa kēia e alo i ke mele ʻaʻole wau ʻo kāu muse. He nani ia, e lilo i lunakanawai a na ka'u mau kaikamahine e koho balota. Hiki iaʻu ke ʻike i kahi phoenix i loko oʻu. Huhu ka lani i ko kakou aloha, uwe mai na anela mai luna mai. ʻAe, lawe ʻoe iaʻu i utopia.
<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: ʻAʻole mālama ʻia nā mea i loko o ka laina e like me nā mea paʻakikī
ʻAʻole hoʻolilo ʻo Internet Explorer 10-11 i nā mea i loko o ka laina e like me nā loulou a i ʻole nā kiʻi (a i ʻole ::before
a me ::after
nā pseudo-elements) ma ke ʻano he mau mea maʻalahi. ʻO ka hana hoʻoponopono wale nō ka hoʻonohonoho ʻana i kahi display
waiwai laina ʻole (e laʻa, block
, inline-block
, a i ʻole flex
). Manaʻo mākou e hoʻohana i .d-flex
kekahi o kā mākou mau pono hōʻike ma ke ʻano he hoʻoponopono maʻalahi.
Puna: Flexbugs ma GitHub
Nesting
Hiki ke hoʻopaʻa ʻia nā mea Media, ʻoiai ke manaʻo nei mākou e kū ʻoe i kekahi manawa. E hoʻonoho ʻia i .media
loko .media-body
o kahi mea hoʻolaha makua.
Poʻomanaʻo Media
E kū ana ma ka laina mua i ka wā e hoʻomaka ai nā pōkā e hāʻule. Huhu ka lani i ko kakou aloha, uwe mai na anela mai luna mai. ʻAʻole hiki ke pani iā ʻoe me hoʻokahi miliona apo. E ke keikikāne, ke noho pū ʻoe me aʻu e ʻono wau iā ʻoe. ʻAʻohe hoʻi. Ma mua o kou hālāwai ʻana mai iaʻu ua maikaʻi au akā ua kaumaha nā mea. He kaumaha ke poʻo e kau i ka lei aliʻi.
Poʻomanaʻo Media
Aloha e nā hoa aloha e hele kākou. ʻAe, ke uwē nei mākou i nā ʻānela, e hoʻoua mai i ka honua mai luna mai. Hāʻawi iā ʻoe i kahi mea maikaʻi e hoʻolauleʻa ai. Nahu au i koʻu alelo a paʻa koʻu hanu. Na'u e hooikaika i kou pu'uwai i ko'u mau jeans pa'i ili. ʻOiai wau e hele hoʻokahi i kahi kuʻi ʻokoʻa. ʻO ke kauwela ma hope o ke kula kiʻekiʻe i ko mākou hui mua ʻana. ʻO ʻoe ka hypnotizing, hiki paha iā ʻoe ke diabolo? He ʻānela paha ʻoe? ʻO ka manawa kēia e lawe mai i nā baluna nui. Manaʻo wau ʻo wau wale nō. ʻO Bikinis, zucchinis, Martinis, ʻaʻohe 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>
Hoʻopololei
Hiki ke hoʻolikelike ʻia ka pāpaʻi i loko o kahi mea hoʻolaha me nā mea pono pahu flexbox i luna (paʻamau), waena, a i ʻole ka hopena o kāu .media-body
ʻike.
Media i hoʻopaʻa ʻia kiʻekiʻe
E hoʻokomo wau iā ia i loko o kahi coma. Hāʻawi ʻoe i hoʻokahi haneli kumu, a ʻōlelo ʻoe e hoʻāʻo maoli ʻoe. No laila, noho mālie wau, ʻae me ka ʻoluʻolu. Ke kūpono nei i kaʻu kaua lei aliʻi. A i koʻu lā hānau 18 i loaʻa iā mākou nā peʻa like. No laila très chic, ʻae, he maʻamau ʻo ia. Ua mākaukau au no ke alanui i hele ʻole ʻia.
Ke hele nei au ma ka lewa (i kēia pō). Akā i lalo i ka honua. He kumu ʻoe, ʻaʻole hiki ke hoʻololi. Akā i kekahi ola ʻē aʻe, ʻo wau ke kaikamahine nau. Holo mākou i Cali a ʻona ma kahakai. Hiki iā kāua ke hula, a hiki i ko kāua make ʻana, ʻo ʻoe a ʻo wau, he ʻōpio mau loa. Ua ʻike ʻoe iā ʻoe e hīmeni ana i ka Blues.
<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>
Media hoʻolike waena
E lilo ʻo ia i anu e like me ka pahu hau. I ka hope o na mea a pau. ʻO ke kuʻi ʻana e like me ka nalo meli ua loaʻa iaʻu koʻu mau ʻūhā. ʻO Bikinis, zucchinis, Martinis, ʻaʻohe weenies. Manaʻo wau ua loaʻa iā ʻoe kahi ʻai olakino. Hiki iā kāua ke hula, a hiki i ko kāua make ʻana, ʻo ʻoe a ʻo wau, he ʻōpio mau loa. Ke ola nei mākou i ke ola. Ke hana pono nei mākou. ʻŌlelo ma ke alanui, loaʻa iā ʻoe kahi mea e hōʻike mai iaʻu, iaʻu.
Makemake ʻoe e ʻike i ka hōʻike ma 3D, he kiʻiʻoniʻoni. 'Ōlelo lākou, e makaʻu ʻaʻole ʻoe e like me nā mea ʻē aʻe, ke aloha futuristic. E wehe i kou puʻuwai. No laila, noho mālie wau, ʻae me ka ʻoluʻolu. I ka po Poalima aku nei. ʻAe, laki ʻoe inā ʻoe ma luna o kona mokulele. ʻO wau kāu makana, hāʻawi i kahi mea maikaʻi e hoʻolauleʻa ai.
<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>
Media hoʻopololei i lalo
E hele mai, e poha kou kala. Hiki iaʻu ke ʻike i kēia mālamalama i loko oʻu. Hoʻokani lākou i ka pō a pau, kāu mele. Mai Tokyo a Mexico, a i Rio. ʻAʻohe hoʻi. Akā i lalo i ka honua. He kupua, waihooluu, Mr. Mystery, ee. ʻOkoʻa DNA, ʻaʻole lākou maopopo iā ʻoe.
Akā i lalo i ka honua. Loaʻa iā ia kēlā, je ne sais quoi, maopopo iā ʻoe. Hiki iaʻu ke ʻike i ke kākau ʻana ma ka paia. Haʻi nā keikikāne i ko lākou ʻāʻī e hoʻāʻo e kolo iki. Lawe ia'u, ta-ta-lawe ia'u. E wehe i kou puʻuwai. Manaʻo wau ʻo wau wale nō. Boom, boom, boom. ʻO ke kahakai ʻo Venice a me Palm Springs, ʻo ke kauwela nā mea āpau. E hoʻihoʻi mai i ke kuʻi. (Peia kā mākou hana)
<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>
Kauoha
E hoʻololi i ka hoʻonohonoho o ka ʻike ma nā mea media ma ka hoʻololi ʻana i ka HTML ponoʻī, a i ʻole ma ka hoʻohui ʻana i kekahi CSS flexbox maʻamau e hoʻonohonoho i ka order
waiwai (i ka helu helu āu e koho ai).
Mea hoʻolaha
ʻIke wau e loaʻa ana ka mōhai akā ʻo ia ke kumu kūʻai. He wiwo ʻole ʻoe e ʻike iaʻu i kāu pīkī? E lilo ʻoe i moeʻuhane ʻōpio i kēia pō. Uh-huh, ʻike wau iā ʻoe. ʻAʻohe hoʻi. ʻAe, ua hoʻonui mākou i kā mākou kāleka hōʻaiʻē a kipaku ʻia mai ka pā. No laila, e hoʻokomo wau iā ʻoe i kou lole lā hānau. Aloha paha ʻoe ke hālāwai ʻoe me ia. Aia ka honua i loko o kou lima. Mai hoʻokuʻu iā ʻoe i ka maikaʻi, ʻe, ʻae. I kēia manawa, ke kamaʻilio nei mākou i ka ʻike kilokilo, ke kiʻi ʻana i ko mākou mau kui, nā Iapana-y āpau. E hoʻolilo iaʻu i kāu Aphrodite.
<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>
Papa inoa Media
Ma muli o ka liʻiliʻi o nā koi hoʻolālā o ka mea media, hiki iā ʻoe ke hoʻohana i kēia mau papa ma ka papa inoa o nā mea HTML. Ma kāu a i <ul>
ʻole <ol>
, hoʻohui i ka .list-unstyled
e wehe i nā ʻano papa inoa paʻamau o ka polokalamu kele pūnaewele, a laila e hoʻopili .media
i kāu <li>
s. E like me nā manawa a pau, e hoʻohana i nā pono hana spacing i nā wahi āpau e pono ai e hoʻokani maikaʻi.
-
Mea hoʻolaha ma ka papa inoa
ʻO kaʻu mau kaikamāhine kahiko Chanel pēpē. No laila hiki iā ʻoe ke loaʻa kāu keke. I kēia pō, i kēia pō, i kēia pō, hele au ma ka lewa. Ale malie i ko'u makau, yeah yeah. E ulu wikiwiki ana i ka uila. Wela a kaumaha, 'A hiki i ka wanaʻao. ʻO kēlā moʻolelo moʻolelo e pau ana me ka naita i ke kapa kila. He kaumaha ke poʻo e kau i ka lei aliʻi.
-
Mea hoʻolaha ma ka papa inoa
He kumu paha ke pani ʻia nā puka a pau. No ka mea, na'u oe, na'u oe. E lilo ʻoe i moeʻuhane ʻōpio i kēia pō. He kaumaha ke poʻo e kau i ka lei aliʻi. ʻAʻole ia he lā hoʻomaha, ʻaʻohe mea e hoʻolauleʻa ai. He ino maikai, ino maikai.
-
Mea hoʻolaha ma ka papa inoa
He wiwo ʻole ʻoe e ʻike iaʻu i kāu pīkī? ʻAʻohe hoʻi. ʻO kēia ka manawa hope āu e ʻōlelo ai, ma hope o ka laina hope āu e haki ai. I ka hope o na mea a pau.
<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>