Objet ya media
Mikanda mpe bandakisa mpo na objet ya media ya Bootstrap mpo na kotonga ba composants oyo ezongelamaka mingi lokola ba commentaires ya blog, ba tweets, mpe bongo na bongo.
Ndakisa
Objet ya média esalisaka kotonga ba composants complexes mpe repetitifs esika ba médias mosusu e positionné pembeni ya contenus oyo ezo envelopper te zinga zinga ya ba médias wana. Plus, esalaka yango kaka na deux classes requises grâce na flexbox.
Awa na nse ezali ndakisa ya eloko moko ya media. Bobele bakelasi mibale nde esengeli —kozinga .mediampe .media-bodyzingazinga ya makambo na yo. Padding optionnel na marge ekoki kozala contrôlée na nzela ya ba utilitaires ya espacement .
Motó ya likambo ya bapanzi-nsango
Okosala mpe bongo mpo na ngai? Ekomi tango ya ko facer musique naza lisusu muse na yo te. Yoki eza kitoko, zala juge na ba filles na ngai bakozua vote. Nakoki koyoka phoenix moko na kati na ngai. Lola eza na jaloux na bolingo na biso, ba ange bazo lela wuta likolo. Yeah, omemi ngai na utopie.
<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: Ba éléments ya kati ya ligne etalemaka te lokola biloko ya flex
Internet Explorer 10-11 ezo rendre te ba éléments inline lokola ba liens to ba images (to ::beforepe ::afterba pseudo-éléments) lokola ba éléments flex. Likambo bobele moko ya kosilisa ezali ya kotya motuya oyo ezali na kati ya molongo displayte (ndakisa, block, inline-block, to flex). Tozali kopesa likanisi ya kosalela .d-flex, moko ya ba utilitaires na biso ya kolakisa , lokola bobongisi ya pete.
Liziba: Flexbugs na GitHub
Kosala zumbu
Ba objets ya media ekoki kozala infiniment nested, atako tozali kopesa likanisi ete otelema na esika moko boye. Place nested .mediana kati ya .media-bodyya objet ya media moboti.
Motó ya likambo ya bapanzi-nsango
Kotelema na ligne ya liboso tango ba bombe ebandi kokweya. Lola eza na jaloux na bolingo na biso, ba ange bazo lela wuta likolo. Ekoki ko remplacer yo na million ya ba bague te. Mwana mobali, tango okozala na ngai nakopesa yo elengi. Kozonga sima ezali te. Avant okutana na ngai nazalaki bien mais makambu ezalaki kinda kilo. Kilo ezali motó oyo elataka motole.
Motó ya likambo ya bapanzi-nsango
Mbote balingami tosala mobembo. Ɛɛ, tozali koganga baanzelu, kobɛtaka mbula na mabelé longwa na likoló. Pesa yo eloko moko ya malamu mpo na kosala fɛti. Nazalaki koswa lolemo mpe kokanga mpema. Naza ma kozua motema na yo ezo beta na jeans na ngai oyo ekangamaka na loposo. Lokola nazali kotambola ngai moko na kobeta mosusu. Eleko ya molunge nsima ya eteyelo ya ntei ntango tokutanaki mpo na mbala ya liboso. Ozali ko hypnoser mingi, okokaki kozala zabolo? Okoki kozala anzelu? Ezali tango ya kobimisa ba ballons ya minene. Akanisaki ete ngai nde nazalaki exception. Bikini, courgette, Martinis, ba weenies te.
<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>Kobongisa makambo
Media na objet ya media ekoki kozala aligné na ba utilitaires flexbox na likolo (par défaut), na kati, to na suka ya .media-bodycontenus na yo.
Ba médias oyo ezali na molɔngɔ ya likoló
Nakotia ye na coma. Opesi bantina nkama mpo na nini, mpe olobi ete okomeka mpenza. Yango wana nafandaki nyɛɛ, nandimaki na bonkonde nyonso. Kobongisa mpo na etumba na ngai ya kozwa motole. Mpe na Anniversaire na ngai ya 18 tozwaki ba tatouages oyo ekokani. Donc très chic, yeah, azali classique. Nazali prêt pona nzela oyo esalemi mingi te.
Nazo tambola na mopepe (na butu ya lelo). Kasi na nse na mabele. Ozali original, okoki ko remplacer te. Mais na vie mususu nalingaki nazala fille na yo. Tokendeki na motuka tii na Cali mpe tolangwaki na libongo. Tokoki kobina, kino tokokufa, ngai na yo, tokozala bilenge libela. Namonaki yo na centre-ville koyemba ba 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>Ba médias oyo ezali na boyokani na centre
Ako koma malili lokola congélateur. Na eh-suka ya nionso. Koswa lokola nzoi na gagnaki ba rayures na ngai. Bikini, courgette, Martinis, ba weenies te. Nazali na elikya ete ozwaki mposa ya kolya oyo ezali malamu mpo na nzoto. Tokoki kobina, kino tokokufa, ngai na yo, tokozala bilenge libela. Tozali ko vivre vie. Tozali kosala yango malamu. Liloba na balabala, ozui somethin' ya kolakisa ngai, ngai.
Wanna komona émission na 3D, film moko. Balobi, banga oza lokola ba misusu te, amoureux futuriste. Fungola motema na yo. Yango wana nafandaki nyɛɛ, nandimaki na bonkonde nyonso. Vendredi eleki na butu. Yeah, oza na chance soki oza na avion na ye. Nakozala likabo na yo, pesa yo eloko ya malamu ya kosepela.
<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 oyo ezali na boyokani na nse
Yaka, tika ba couleurs na yo epasuka. Nakoki koyoka pole oyo ezali na kati na ngai. Butu mobimba bazo beta, nzembo na yo. Kobanda na Tokyo tii na Mexique, tii na Rio. Kozonga sima ezali te. Kasi na nse na mabele. Magique, ya langilangi, Mr. Mystère, ee. ADN ekeseni, ba comprendre yo te.
Kasi na nse na mabele. Azali na yango, je ne sais quoi, oyebi yango. Nazali komona makomi oyo ezali na efelo. Ba garçons babukaki ba kingo try'na ko creep mua sneak peek. Mema ngai, ta-ta-zua ngai. Fungola motema na yo. Akanisaki ete ngai nde nazalaki exception. Boom, boom, boom. Plage ya Venise na Palm Springs, été ezalaka nionso. Bozongisa beat yango. (Oyo ndenge tosalaka)
<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>Etinda
Bobongola molongo ya makambo na biloko ya media na kobongisa HTML yango moko, to na kobakisa mwa CSS ya flexbox personnalisé mpo na kotya orderpropriété (na motango mobimba oyo oponi).
Objet ya media
Nayebi sacrifice ekozala mais yango nde prix. Ozali na mpiko ya kotika ngai namona paon na yo? Zala ndoto na yo ya bilenge na butu ya lelo. Uh-huh, namoni yo. Kozonga sima ezali te. Yeah, to maxed ba cartes de crédit na biso pe ba benganaki biso na bar. Yango wana, tiká nakɔtisa yo na kostume na yo ya mokolo ya mbotama. Okoki kolinga mingi ntango okutani na ye. Azalaki na mokili na loboko ya maboko na yo. Kotika te ete bonene ekitisa yo, oh, oh yeah. Sikoyo biso kolobela astrologie, kozua ba nsuki na biso esala, nionso japonais-y. Salá ngai Aphrodite na yo.
<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>Liste ya ba médias
Lokola objet média ezali na ba exigences structurelles moke, okoki pe kosalela ba classes oyo na ba éléments HTML ya liste. Na <ul>to na yo <ol>, bakisa .list-unstyledmpo na kolongola ba styles nyonso ya liste ya navigateur ya liboso, mpe na nsima salelá .mediana s na yo <li>. Lokola ntango nyonso, salelá ba utilitaires ya espacement bisika nyonso oyo esengeli mpo na kobongisa malamu.
-
Objet ya media oyo esalemi na liste
Ba filles na ngai nionso vintage Chanel bébé. Yango wana okoki kozala na gâteau na yo. Na mpokwa ya lelo, na mpokwa ya lelo, na mpokwa ya lelo, nazali kotambola na mopepe. Malembe malembe komela na nse bobangi na ngai, yeah yeah. Kokola nokinoki mpe ekómaka nkake. Boye molunge mpe kilo, 'Til dawn. Lisapo wana oyo esukaka na chevalier moko na bibundeli oyo ezali kongɛnga. Kilo ezali motó oyo elataka motole.
-
Objet ya media oyo esalemi na liste
Peut-être raison oyo ba portes nionso ekangami. Cause une fois oza ya ngai, une fois oza ya ngai. Zala ndoto na yo ya bilenge na butu ya lelo. Kilo ezali motó oyo elataka motole. Ezali kutu feti te, eloko ya kosepela te. Mopepe makasi ya kokoka, mopepe makasi ya kokoka.
-
Objet ya media oyo esalemi na liste
Ozali na mpiko ya kotika ngai namona paon na yo? Kozonga sima ezali te. Oyo ezali mbala ya suka olobi, sima ya molongo ya suka obuka. Na eh-suka ya nionso.
<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>