Ahanoa pāpāho
Ko nga tuhinga me nga tauira mo te ahanoa pāpāho a Bootstrap hei hanga i nga waahanga tino tukurua penei i nga korero rangitaki, tweets, me era atu.
Tauira
Ka awhina te ahanoa pāpāho ki te hanga i nga waahanga uaua me te tukurua i te waahi ka tuu etahi papapāho ki te taha o nga ihirangi karekau e takai ki te taha o te hunga pāpāho. I tua atu, ka mahia e ia me nga karaehe e hiahiatia ana e rua noa na te flexbox.
Kei raro nei he tauira o te ahanoa pāpāho kotahi. E rua noa nga karaehe e hiahiatia ana—te takai .media
me te .media-body
huri noa i to ihirangi. Ka taea te whakahaere i te taapiri me te tawhē ma nga taputapu mokowhiti .
Pane korero
Ka pena ano koe ki ahau? Kua tae ki te wa ki te anga atu ki te puoro ehara ahau i to puoro. Ka rongo he ataahua, ko koe hei kaiwhakawa me aku kotiro ka pooti. Ka rongo ahau i te phoenix i roto i ahau. Ka hae te Rangi ki to tatou aroha, kei te tangi nga anahera i runga. Ae, ka haria ahau e koe ki te 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: Ko nga huānga rōraina e kore e kiia he tuemi ngawari
Karekau a Internet Explorer 10-11 e huri i nga huānga rōraina penei i nga hononga, whakaahua ranei ( ::before
me ::after
nga huānga pseudo) hei tuemi ngawari. Ko te mahi anake ko te tautuhi i te display
uara-raina-kore (hei tauira, block
, inline-block
, ranei flex
). Ka whakaaro matou ki te whakamahi .d-flex
, tetahi o a maatau taputapu whakaatu , hei whakatika ngawari.
Puna: Flexbugs i GitHub
Kohanga
Ka taea te kohanga mutunga kore o nga mea pāpāho, ahakoa ko ta matou whakaaro kia mutu koe i tetahi wa. Whakanohoia .media
ki roto i te .media-body
ahanoa pāpāho matua.
Pane korero
Ka tu ki mua i te wa ka timata nga poma ki te hinga. Ka hae te Rangi ki to tatou aroha, kei te tangi nga anahera i runga. Kaore e taea te whakakapi i a koe me te miriona mowhiti. E tama, ka noho koe ki ahau ka hoatu e ahau he reka ki a koe. Karekau he hokinga atu. I mua i to tutakitanga ki ahau i pai ahau engari he taumaha nga mea. He taumaha te mahunga e mau ana i te karauna.
Pane korero
Tena koutou e te hoa aroha, kia haere tatou. Ae, e tangi ana tatou i nga anahera, e ua ana ki runga ki te whenua i runga. Homai he mea pai hei whakanui. I ngau ahau i toku arero me te pupuri i taku manawa. Ko ahau kei te omaoma tou ngakau i roto i taku patiti kiri-kiri. I a au e hikoi takitahi ana ki tetahi tukinga rereke. Te raumati i muri i te kura tuarua i to maua tutaki tuatahi. Kei te tino hypnotizing koe, ka taea e koe te rewera? He anahera koe? Kua tae ki te wa ki te whakaputa i nga poihau nui. I whakaaro ko ahau anake. Bikinis, zucchinis, Martinis, kahore 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>
Tirohanga
Ka taea te whakahāngai i te pāpāho i roto i te ahanoa pāpāho ki nga taputapu flexbox ki runga (taunoa), waenganui, mutunga ranei o to .media-body
ihirangi.
Ko te hunga pāpāho kua whakararo-runga
Ka tukuna ia e ahau ki te koma. Ka hoatu e koe nga take kotahi rau, ka kii koe ka tino whakamatau koe. Na ka noho marire ahau, ka whakaae marie. E tika ana mo taku whawhai whakakorona. A i taku ra whanau 18 i whiwhi matou moko orite. Na très chic, yeah, he matarohia ia. Kua reri ahau mo te huarahi iti haere.
Kei te hikoi ahau i runga i te hau (i tenei po). Engari ki raro ki te whenua. He taketake koe, kaore e taea te whakakapi. Engari i tetahi atu oranga ka waiho ahau hei kotiro mou. I peia matou ki Cali ka haurangi i te takutai. Ka taea e tatou te kanikani, tae noa ki te mate, ko koe me ahau, ka rangatahi ake ake. I kite koe i te taone nui e waiata ana i nga 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>
Ko te hunga pāpāho kua whakaritea ki waenganui
Ka makariri ia ano he pouaka tio. I te e-mutunga katoa. Ko te weronga ano he pi ka whiwhi ahau i aku whiu. Bikinis, zucchinis, Martinis, kahore weenies. Te ti'aturi nei au i whiwhi koe i te hiahia hauora. Ka taea e tatou te kanikani, tae noa ki te mate, ko koe me ahau, ka rangatahi ake ake. Kei te ora tatou. Kei te tika ta matou mahi. Ko te kupu i runga i te huarahi, kei a koe tetahi mea hei whakaatu mai ki ahau.
Kei te pirangi koe ki te kite i te whakaaturanga i roto i te 3D, he kiriata. E kii ana ratou, kia mataku kaore koe e rite ki era atu, te aroha o muri mai. Whakatuwheratia to ngakau. Na ka noho marire ahau, ka whakaae marie. I tera po o te Paraire. Ae, he waimarie koe mena kei runga koe i tana waka rererangi. Ka waiho ahau hei koha mou, hoatu he mea pai hei whakanui.
<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>
Paapaho-raro
Haere mai, kia pakaru mai o tae. Ka rongo ahau i tenei marama kei roto i ahau. Po katoa e takaro ana, to waiata. Mai i Tokyo ki Mexico, ki Rio. Karekau he hokinga atu. Engari ki raro ki te whenua. He makutu, he kara, Mr. Mystery, ee. He rereke nga DNA, kaore ratou e mohio ki a koe.
Engari ki raro ki te whenua. Kei a ia tena, je ne sais quoi, e mohio ana koe. Ka kite ahau i te tuhi i runga i te pakitara. Ka whati nga kaki o nga tama ka ngana ki te ngokingoki i tetahi tirohanga iti. Tangohia ahau, ta-ta-tango mai. Whakatuwheratia to ngakau. I whakaaro ko ahau anake. Toto, totoro, totoro. Ko te takutai Venice me te Palm Springs, ko te raumati nga mea katoa. Whakahokia te patuki. (Koinei te mahi)
<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>
Ota
Hurihia te raupapa o nga ihirangi i roto i nga taonga pāpāho ma te whakarereke i te HTML ake, ma te taapiri ranei i etahi CSS flexbox ritenga ki te tautuhi i te order
taonga (ki te tauoti e whiriwhiria ana e koe).
Ahanoa pāpāho
E mohio ana ahau ka puta he patunga tapu engari koinei te utu. Kei te maia koe ki te tuku kia kite ahau i to pikake? Kia noho hei moemoea taiohi i tenei po. Uh-huh, ka kite ahau i a koe. Karekau he hokinga atu. Ae, i whakanuia e matou a matou kaari nama ka panaia mai i te paera. No reira tukua ahau kia mau koe i roto i to koti huritau. Ka aroha pea koe ina tutaki koe ki a ia. Ko te ao kei roto i o ringaringa. Kaua e tukua te nui ki raro i a koe, aue, aue. Inaianei kei te korero matou mo te wheturangi, te mahi maio, he Japanese-y katoa. Meinga ahau hei 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>
Rārangi pāpāho
Na te mea he iti noa nga whakaritenga hanganga o te ahanoa pāpāho, ka taea hoki e koe te whakamahi i enei karaehe ki te rarangi huānga HTML. I runga i to <ul>
, <ol>
, taapirihia te .list-unstyled
ki te tango i nga momo rarangi raarangi taunoa, ka pa .media
atu ki to <li>
s. Ka rite ki nga wa katoa, whakamahia nga taputapu mokowhiti i nga waahi katoa e tika ana kia pai te oro.
-
Ahanoa pāpāho-rarangi
Katoa aku kotiro waina Chanel peepi. Na ka taea e koe to keke. I tenei po, i tenei po, i tenei po, kei te hikoi ahau i runga i te hau. Ka horomia taku wehi, yeah yeah. Te tipu tere ki te uira. Na te wera me te taumaha, 'Til daw. Ko tera korero pakiwaitara ka mutu me te hoia i roto i nga patu kanapa. He taumaha te mahunga e mau ana i te karauna.
-
Ahanoa pāpāho-rarangi
He take pea ka kati nga tatau katoa. No te mea kua riro koe i ahau, ina kua riro koe i ahau. Kia noho hei moemoea taiohi i tenei po. He taumaha te mahunga e mau ana i te karauna. Ehara i te mea he hararei, kaore he mea hei whakanui. He tupuhi tino pai, he tupuhi tino pai.
-
Ahanoa pāpāho-rarangi
Kei te maia koe ki te tuku kia kite ahau i to pikake? Karekau he hokinga atu. Koinei te wa whakamutunga ka kii koe, i muri i te rarangi whakamutunga ka pakaru koe. I te e-mutunga katoa.
<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>