Kitu cha media
Hati na mifano ya kifaa cha media cha Bootstrap ili kuunda vipengee vinavyojirudiarudia kama vile maoni ya blogu, twiti, na kadhalika.
Mfano
Kifaa cha media husaidia kujenga vipengee changamano na vinavyojirudia rudia ambapo baadhi ya midia huwekwa pamoja na maudhui ambayo hayaambatani na maudhui yaliyosemwa. Pamoja, hufanya hivi na madarasa mawili tu yanayohitajika shukrani kwa flexbox.
Chini ni mfano wa kitu kimoja cha media. Madarasa mawili tu yanahitajika-kufunga .mediana .media-bodykuzunguka yaliyomo. Ufungaji wa hiari na ukingo unaweza kudhibitiwa kupitia huduma za kuweka nafasi .
Kichwa cha habari
Je, utanifanyia vivyo hivyo? Ni wakati wa kukabiliana na muziki mimi si jumba lako la kumbukumbu tena. Sikia ni nzuri, kuwa mwamuzi na wasichana wangu watapiga kura. Ninaweza kuhisi phoenix ndani yangu. Mbingu ina wivu kwa upendo wetu, malaika wanalia kutoka juu. Ndio, unanipeleka kwenye 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: Vipengee vya ndani havichukuliwi kama vitu vinavyobadilikabadilika
Internet Explorer 10-11 haitoi vipengele vya ndani kama vile viungo au picha (au ::beforena ::aftervipengele bandia) kama vipengee vinavyobadilikabadilika. Suluhu pekee ni kuweka thamani isiyo ya ndani display(kwa mfano, block, inline-block, au flex). Tunapendekeza kutumia .d-flex, mojawapo ya huduma zetu za kuonyesha , kama urekebishaji rahisi.
Chanzo: Flexbugs kwenye GitHub
Nesting
Vipengee vya media vinaweza kuwekewa viota, ingawa tunapendekeza uache wakati fulani. Weka kiota .mediandani ya .media-bodykipengee kikuu cha media.
Kichwa cha habari
Kusimama kwenye mstari wa mbele wakati mabomu yanaanza kuanguka. Mbingu ina wivu kwa upendo wetu, malaika wanalia kutoka juu. Haiwezi kukubadilisha na pete milioni. Kijana, ukiwa nami nitakupa ladha. Hakuna kurudi nyuma. Kabla ya kukutana nami nilikuwa sawa lakini mambo yalikuwa mazito. Nzito ni kichwa kinachovaa taji.
Kichwa cha habari
Salamu wapendwa tufunge safari. Naam, tunafanya malaika walie, mvua ikinyesha juu ya nchi kutoka juu. Kukupa kitu kizuri cha kusherehekea. Nilikuwa najiuma ulimi na kushika pumzi. Mimi nina ma kupata moyo wako kwenda mbio katika jeans yangu-tna ngozi. Ninapoandamana peke yangu kwa mpigo tofauti. Majira ya joto baada ya shule ya upili tulipokutana kwa mara ya kwanza. Unadanganya sana, unaweza kuwa shetani? Unaweza kuwa malaika? Ni wakati wa kuleta puto kubwa. Nilidhani kwamba mimi ndiye pekee. Bikinis, zukini, Martinis, hakuna 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>Mpangilio
Midia katika kipengee cha maudhui inaweza kuunganishwa na huduma za flexbox hadi juu (chaguo-msingi), katikati, au mwisho wa .media-bodymaudhui yako.
Vyombo vya habari vilivyowekwa juu
Nitamtia kwenye coma. Unatoa sababu mia kwa nini, na unasema utajaribu kweli. Kwa hiyo nilikaa kimya, nikakubali kwa adabu. Kufaa kwa vita yangu ya taji. Na katika Siku yangu ya Kuzaliwa ya 18 tulipata tatoo zinazolingana. Hivyo très chic, yeah, yeye ni classic. Niko tayari kwa barabara ambayo watu husafiri kidogo.
Ninatembea hewani (usiku wa leo). Lakini chini duniani. Wewe ni asili, hauwezi kubadilishwa. Lakini katika maisha mengine ningekuwa msichana wako. Tuliendesha gari hadi Cali na kulewa ufukweni. Tunaweza kucheza, mpaka tufe, wewe na mimi, tutakuwa vijana milele. Nilikuona katikati ya jiji ukiimba 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>Midia iliyopangwa katikati
Atageuka kuwa baridi kama friji. Wakati eh-mwisho wa yote. Kuuma kama nyuki nilipata kupigwa kwangu. Bikinis, zukini, Martinis, hakuna weenies. Natumai una hamu ya afya. Tunaweza kucheza, mpaka tufe, wewe na mimi, tutakuwa vijana milele. Tunaishi maisha. Tunafanya sawa. Neno mitaani, unayo kitu cha kunionyesha, mimi.
Unataka kuona kipindi katika 3D, filamu. Wanasema, kuwa na hofu wewe si kama wengine, futuristic mpenzi. Fungua moyo wako. Kwa hiyo nilikaa kimya, nikakubali kwa adabu. Ijumaa iliyopita usiku. Ndio, una bahati ikiwa uko kwenye ndege yake. Nitakuwa zawadi yako, nikupe kitu kizuri cha kusherehekea.
<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>Midia iliyopangwa chini
Njoo, acha rangi zako zipasuke. Ninaweza kuhisi mwanga huu ulio ndani yangu. Usiku kucha wanacheza, wimbo wako. Kutoka Tokyo hadi Mexico, hadi Rio. Hakuna kurudi nyuma. Lakini chini duniani. Kichawi, rangi, Mheshimiwa Siri, ee. DNA tofauti, hawakuelewi.
Lakini chini duniani. Ana hiyo, je ne sais quoi, unaijua. Ninaona maandishi ukutani. wavulana kuvunja shingo zao try'na kutambaa kidogo peek sneak. Nichukue, ta-ta-nichukue. Fungua moyo wako. Nilidhani kwamba mimi ndiye pekee. Boom, boom, boom. Pwani ya Venice na Palm Springs, wakati wa kiangazi ndio kila kitu. Rudisha kipigo. (Hivi ndivyo tunavyofanya)
<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>Agizo
Badilisha mpangilio wa yaliyomo katika vipengee vya media kwa kurekebisha HTML yenyewe, au kwa kuongeza kisanduku maalum cha CSS ili kuweka sifa order(kwa nambari kamili ya chaguo lako).
Kitu cha media
Najua kutakuwa na sadaka lakini hiyo ndiyo bei yake. Je, una ujasiri wa kuniruhusu nimuone tausi wako? Kuwa ndoto yako ya ujana usiku wa leo. Uh-huh, ninakuona. Hakuna kurudi nyuma. Ndio, tuliongeza kadi zetu za mkopo na tukafukuzwa kwenye baa. Kwa hivyo wacha nikuchukue kwenye suti yako ya kuzaliwa. Unaweza kupenda unapokutana naye. Ulimwengu ulikuwa kwenye kiganja cha mikono yako. Usiruhusu ukuu ukushushe, oh, ndio. Sasa tunazungumza kuhusu unajimu, kupata kucha zetu, sote Kijapani-y. Nifanye Aphrodite wako.
<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>Orodha ya vyombo vya habari
Kwa sababu kifaa cha media kina mahitaji machache sana ya kimuundo, unaweza pia kutumia madarasa haya kwenye orodha ya vipengele vya HTML. Kwenye yako <ul>au <ol>, ongeza .list-unstyledili kuondoa mitindo ya orodha chaguo-msingi ya kivinjari, kisha uitumie .mediakwa faili yako <li>. Kama kawaida, tumia huduma za kuweka nafasi popote inapohitajika ili kurekebisha vizuri.
-
Kitu cha media kinachotegemea orodha
Wasichana wangu wote zabibu Chanel mtoto. Kwa hivyo unaweza kuwa na keki yako. Usiku wa leo, usiku wa leo, usiku wa leo, ninatembea hewani. Polepole kumeza hofu yangu, ndio ndio. Kukua kwa kasi katika bolt ya umeme. Moto na nzito, 'Hadi alfajiri. Hadithi hiyo ya hadithi inayoisha na shujaa aliyevaa silaha zinazong'aa. Nzito ni kichwa kinachovaa taji.
-
Kitu cha media kinachotegemea orodha
Labda sababu kwa nini milango yote imefungwa. Maana mara wewe ni wangu, mara wewe ni wangu. Kuwa ndoto yako ya ujana usiku wa leo. Nzito ni kichwa kinachovaa taji. Sio likizo, hakuna cha kusherehekea. Dhoruba kamili, dhoruba kamili.
-
Kitu cha media kinachotegemea orodha
Je, una ujasiri wa kuniruhusu nimuone tausi wako? Hakuna kurudi nyuma. Hii ni mara ya mwisho kusema, baada ya mstari wa mwisho kuvunja. Wakati eh-mwisho wa yote.
<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>