Ntho ea media
Litokomane le mehlala ea sepheo sa media sa Bootstrap ho aha likarolo tse iphetang haholo joalo ka maikutlo a blog, li-tweets, joalo-joalo.
Mohlala
Ntho ea mecha ea litaba e thusa ho haha lisebelisoa tse rarahaneng le tse pheta-phetoang moo mecha e meng ea litaba e behoang haufi le litaba tse sa pota-potileng mecha ea litaba. Hape, e etsa sena ka litlelase tse peli feela tse hlokahalang ka lebaka la flexbox.
Ka tlase ke mohlala oa ntho e le 'ngoe ea mecha ea litaba. Ho hlokahala lihlopha tse peli feela - ho phuthela .media
le ho .media-body
potoloha litaba tsa hau. Padding ea boikhethelo le margin li ka laoloa ka lisebelisoa tsa sebaka .
Sehlooho sa litaba
Na le uena u tla nketsetsa se tšoanang? Ke nako ea ho tobana le 'mino Ha ke sa le musiamo oa hau. Ke utloile hore ho monate, e-ba moahloli 'me banana ba ka ba tla khetha. Ke utloa phoenix ka hare ho 'na. Lehodimo le boulela lerato la rona, mangeloi a lla ho tswa hodimo. E, u nkisa 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: Likarolo tsa inline ha li tšoaroe joalo ka lintho tse feto-fetohang
Internet Explorer 10-11 ha e fane ka likarolo tse ka hare ho mela joalo ka lihokelo kapa litšoantšo (kapa ::before
le ::after
lielemente tsa maiketsetso) joalo ka lintho tse feto-fetohang. Mokhoa o le mong feela oa ho sebetsa ke ho beha display
boleng bo seng molaong (mohlala, block
, , inline-block
, kapa flex
). Re khothaletsa ho sebelisa .d-flex
e 'ngoe ea lisebelisoa tsa rona tsa ponts'o , e le ho lokisa habonolo.
Mohloli: Flexbugs ho GitHub
Nesting
Lintho tsa mecha ea litaba li ka ba sehlaha ka ho sa feleng, leha re khothaletsa hore u emise ka nako e itseng. Sebaka se .media
kentsoeng ka har'a ntho .media-body
ea motsoali media.
Sehlooho sa litaba
Ho ema ka pele ha libomo li qala ho oa. Lehodimo le boulela lerato la rona, mangeloi a lla ho tswa hodimo. E ke ke ea u nkela sebaka ka mehele e milione. Moshanyana, ha o na le nna ke tla o fa tatso. Haho kgutlele morao. Pele u kopana le 'na ke ne ke lokile empa lintho li ne li le boima. E boima ke hlooho e roetseng moqhaka.
Sehlooho sa litaba
Dumelang baratuwa ha re nkeng leeto. E, re etsa hore mangeloi a bokolle, a nesa pula lefatšeng ho tsoa holimo. U fe ho hong ho monate ho keteka. Ke ne ke tloaetse ho itoma leleme ’me ke ithiba. Ke kopa pelo ea hau e matha ka har'a jeans ea ka e thata. Ha ke ntse ke tsamaea ke le mong ho ea ka pina e fapaneng. Lehlabula ka mor'a sekolo se phahameng ha re qala ho kopana. O a tsietsa, na o ka ba diabolosi? Na u ka ba lengeloi? Ke nako ea ho ntša libalune tse kholo. Ke ne ke nahana hore ke 'na mokhelo. Li-bikini, zucchini, Martinis, ha ho na li-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 tsamaisana
Mecha ea litaba ka har'a ntho ea media e ka amahanngoa le lisebelisoa tsa flexbox ho ea holimo (ka ho sa feleng), bohareng, kapa qetellong ea .media-body
litaba tsa hau.
Mecha ea litaba e holimo
Ke tlo mo kenya koma. U fana ka mabaka a lekholo, 'me u re u hlile u tla leka. Kahoo ke ile ka lula ke khutsitse, ka lumela ka tlhompho. Ho lokelwa ntwa ya ka ya moqhaka. 'Me ka letsatsi la ka la tsoalo la bo-18 re ile ra fumana li-tattoo tse tšoanang. Kahoo très chic, ee, ke oa khale. Ke se ke loketse tsela eo batho ba sa tsamaeeng ka eona.
Ke tsamaya moyeng (bosiung bona). Empa tlase lefatsheng. U oa mantlha, u ke ke ua nkeloa sebaka. Empa bophelong bo bong ke tla ba ngoanana oa hau. Re ile ra ea Cali ka koloi ’me ra tahoa lebōpong la leoatle. Re ka tantsha, ho fihlela re eshwa, nna le wena, re tla ba batjha ka ho sa feleng. Ke u bone teropo u bina 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>
Mecha ea litaba e lebang bohareng
O tla bata joalo ka sehatsetsi. Qetellong ea tsohle. Ke hlaba joalo ka linotši, ka fumana metopa. Li-bikini, zucchini, Martinis, ha ho na li-weenies. Ke tšepa hore u na le takatso e ntle ea lijo. Re ka tantsha, ho fihlela re eshwa, nna le wena, re tla ba batjha ka ho sa feleng. Re phela bophelo. Re e etsa hantle. Lentsoe seterateng, u na le ho hong ho mpontša, 'na.
U batla ho bona lenaneo ka 3D, filimi. Ba re, tšaba hore ha u tšoane le ba bang, moratuoa oa bokamoso. Bula pelo ya hao. Kahoo ke ile ka lula ke khutsitse, ka lumela ka tlhompho. Bosiu bo fetileng ba Labohlano. Ee, o lehlohonolo ha o le sefofaneng sa hae. Ke tla ba mpho ea hau, ke u fe ho hong ho monate ho keteka.
<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>
Mecha ea litaba e ka tlase
Tloho, mebala ea hau e phatlohe. Ke utlwa lesedi lena le ka hare ho nna. Bosiu bohle ba ntse ba bapala, pina ya hao. Ho tloha Tokyo ho ea Mexico, ho ea Rio. Haho kgutlele morao. Empa tlase lefatsheng. Ea boselamose, e mebala-bala, Mong. Mystery, ee. DNA e fapaneng, ha ba u utloisise.
Empa tlase lefatsheng. O na le seo, je ne sais quoi, oa tseba. Ke bona mongolo o leboteng. Bashemane ba robeha melala try'na ho nyenyelepa hanyane. Nkise, ta-ta-ntase. Bula pelo ya hao. Ke ne ke nahana hore ke 'na mokhelo. Boom, boom, boom. Lebōpo la leoatle la Venice le Palm Springs, lehlabula ke ntho e 'ngoe le e' ngoe. Khutlisetsa morethetho. (Ke kamoo re etsang sena)
<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>
Taelo
Fetola tatellano ea litaba linthong tsa media ka ho fetola HTML ka boeona, kapa ka ho kenyelletsa CSS ea tloaelo ea flexbox ho beha order
thepa (ho palo e felletseng ea khetho ea hau).
Ntho ea media
Kea tseba ho tla ba le sehlabelo empa theko ke eona eo. O na le sebete sa ho ntumella hore ke bone pikoko ea hau? Eba toro ea hau ea bocha bosiung bona. Uh-huh, kea u bona. Haho kgutlele morao. Ee, re ekelitse likarete tsa rona tsa mokoloto mme ra lelekoa ka ntle ho bareng. Kahoo e re ke u fumane ka sutu ea hau ea tsoalo. U ka 'na ua ratana ha u kopana le eena. E ne e le lefats'e matsohong a hau. Se lumelle boholo ho o theola, oh, oh ee. Hona joale re bua ka bonohe ba linaleli, re lokisa manala a rona, kaofela Majapane-y. Nketsetse Aphrodite oa hau.
<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>
Lenane la mecha ea litaba
Hobane ntho ea media e na le litlhoko tse fokolang tsa sebopeho, u ka sebelisa litlelase tsena lethathamong la likarolo tsa HTML. Ho ea hau <ul>
kapa <ol>
, eketsa ea .list-unstyled
ho tlosa mefuta efe kapa efe ea lenane la kamehla la sebatli, ebe o sebetsa .media
ho <li>
s. Joalo ka linako tsohle, sebelisa lisebelisoa tsa ho arohana hohle moo ho hlokahalang ho hlophisa hantle.
-
Ntho e thehiloeng lethathamong la mecha ea litaba
Banana bohle ba ka ba khale ba Chanel ngoana. Kahoo u ka nka kuku ea hau. Bosiung bona, bosiung bona, bosiung bona, ke tsamaya moyeng. Butle-butle ho metsa tšabo ea ka, ee, ee. Ho hola ka potlako ho ba letolo la lehadima. Ho chesa ebile ho le boima, 'Ho fihlela mafube a hlaha. Pale eo ea tšōmo e qetellang ka mohale ea apereng lihlomo tse benyang. E boima ke hlooho e roetseng moqhaka.
-
Ntho e thehiloeng lethathamong la mecha ea litaba
Mohlomong lebaka ke hobane'ng ha menyako eohle e koetsoe. Hobane hang ha u le oa ka, hang ha u le oa ka. Eba toro ea hau ea bocha bosiung bona. E boima ke hlooho e roetseng moqhaka. Ebile ha se letsatsi la phomolo, ha ho letho le ka ketekang. Sefefo se phethahetseng, sefefo se phethahetseng.
-
Ntho e thehiloeng lethathamong la mecha ea litaba
O na le sebete sa ho ntumella hore ke bone pikoko ea hau? Haho kgutlele morao. Lena ke lekhetlo la ho qetela u re, ka mor'a mola oa ho qetela u roba. Qetellong ea tsohle.
<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>