Media khoom
Cov ntaub ntawv thiab cov piv txwv rau Bootstrap cov khoom siv tshaj tawm los tsim cov khoom siv rov ua dua tshiab xws li blog lus, tweets, thiab lwm yam.
Piv txwv
Cov khoom siv xov xwm pab tsim cov txheej txheem nyuaj thiab rov ua dua qhov twg qee qhov xov xwm tau tso nrog cov ntsiab lus uas tsis qhwv ib ncig ntawm cov xov xwm hais. Ntxiv rau, nws ua qhov no tsuas yog ob chav kawm ua tsaug rau flexbox.
Hauv qab no yog ib qho piv txwv ntawm ib qho khoom siv xov xwm. Tsuas yog ob chav kawm yuav tsum tau - kev qhwv .media
thiab .media-body
ib puag ncig koj cov ntsiab lus. Kev xaiv padding thiab cov npoo tuaj yeem tswj tau los ntawm kev siv qhov sib nrug .
Media taub hau
Koj puas yuav ua ib yam rau kuv? Nws yog lub sij hawm mus fim lub suab paj nruag kuv tsis yog koj muse. Hnov nws zoo nkauj, ua tus txiav txim thiab kuv cov ntxhais mus pov npav. Kuv tuaj yeem hnov phoenix hauv kuv. Saum Ntuj Ceeb Tsheej khib peb txoj kev hlub, cov tub txib saum ntuj quaj los saum ntuj. Yog, koj coj kuv mus rau 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: Inline cov ntsiab lus tsis raug kho raws li cov khoom flex
Internet Explorer 10-11 tsis muab cov ntsiab lus hauv kab xws li kev sib txuas lossis cov duab (lossis ::before
thiab ::after
cov ntsiab lus pseudo) ua cov khoom flex. Qhov kev ua haujlwm nkaus xwb yog los teeb tsa tus display
nqi tsis nyob hauv (piv txwv li, block
, inline-block
, lossis flex
). Peb hais kom siv .d-flex
, ib qho ntawm peb cov khoom siv tso saib , ua ib qho yooj yim kho.
Tau qhov twg los: Flexbugs ntawm GitHub
Zes
Cov khoom siv xov xwm tuaj yeem ua zes tsis kawg, txawm hais tias peb xav kom koj nres ntawm qee lub sijhawm. Muab tso .media
rau hauv qhov .media-body
khoom ntawm niam txiv xov xwm.
Media taub hau
Sawv ntsug ntawm pem hauv ntej thaum lub foob pob pib poob. Saum Ntuj Ceeb Tsheej khib peb txoj kev hlub, cov tub txib saum ntuj quaj los saum ntuj. Hloov tsis tau koj nrog ib lab rings. Tub, thaum koj nrog kuv kuv mam li muab rau koj saj. Tsis muaj rov qab. Ua ntej koj ntsib kuv kuv tsis ua li cas tab sis tej yam hnyav hnyav. Hnyav yog lub taub hau uas hnav lub kaus mom.
Media taub hau
Nyob zoo cov phooj ywg peb mus ncig ua si. Yog lawm, peb ua cov tim tswv quaj, los nag los rau hauv lub ntiaj teb los saum toj no. Muab tej yam zoo rau koj ua kev zoo siab. Kuv siv los tom kuv tus nplaig thiab tuav kuv ua tsis taus pa. Kuv tuaj yeem tau txais koj lub siab sib tw hauv kuv daim tawv nqaij nruj ris. Raws li kuv taug kev ib leeg mus rau qhov sib txawv. Lub caij ntuj sov tom qab tsev kawm ntawv theem siab thaum peb xub ntsib. Koj hypnotizing heev, koj puas yog dab ntxwg nyoog? Koj puas tuaj yeem yog tus tim tswv? Nws yog lub sij hawm nqa tawm lub balloons loj. Xav tias kuv yog qhov kev zam. Bikinis, zucchinis, Martinis, tsis muaj 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>
Kev sib tw
Media hauv cov khoom siv xov xwm tuaj yeem ua raws li cov khoom siv flexbox mus rau sab saum toj (default), nruab nrab, lossis kawg ntawm koj .media-body
cov ntsiab lus.
Sab saum toj-aligned media
Kuv yuav muab nws tso rau hauv lub coma. Koj muab ib puas yog vim li cas, thiab koj hais tias koj yeej yuav sim. Yog li ntawd kuv zaum ntsiag to, pom zoo hais lus zoo. Suit rau kuv lub crowning sib ntaus sib tua. Thiab ntawm kuv lub hnub yug 18th peb tau txais tattoos zoo sib xws. Yog li très chic, yog, nws yog classic. Kuv npaj txhij rau txoj kev uas tsis tau mus.
Kuv taug kev saum huab cua (hmo). Tab sis mus rau hauv av. Koj yog tus qub, hloov tsis tau. Tab sis hauv lwm lub neej kuv yuav yog koj tus ntxhais. Peb tsav tsheb mus rau Cali thiab qaug dej qaug cawv ntawm lub puam. Peb tuaj yeem seev cev, txog thaum peb tuag, koj thiab kuv, yuav hluas mus ib txhis. Pom koj hauv plawv nroog hu nkauj 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>
Center-aligned media
Nws yuav txias li lub freezer. Thaum kawg ntawm nws tag nrho. Stinging zoo li ib tug muv kuv khwv tau kuv kab txaij. Bikinis, zucchinis, Martinis, tsis muaj weenies. Kuv vam tias koj tau txais kev noj qab haus huv. Peb tuaj yeem seev cev, txog thaum peb tuag, koj thiab kuv, yuav hluas mus ib txhis. Peb ua neej nyob. Peb ua qhov yog. Lo lus ntawm txoj kev, koj tau txais ib yam dab tsi los qhia kuv, kuv.
Xav pom cov yeeb yam hauv 3D, ua yeeb yaj kiab. Lawv hais tias, ntshai koj tsis zoo li lwm tus, futuristic lover. Qhib koj lub siab. Yog li ntawd kuv zaum ntsiag to, pom zoo hais lus zoo. Hnub Friday dhau los. Yog, koj muaj hmoo yog tias koj nyob ntawm nws lub dav hlau. Kuv yuav ua koj lub txiaj ntsim, muab tej yam zoo rau koj ua kev zoo siab.
<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>
Hauv qab-aligned media
Los, cia koj cov xim tawg. Kuv hnov qhov teeb pom kev no nyob hauv kuv. Txhua hmo lawv tab tom ua si, koj zaj nkauj. Los ntawm Tokyo mus rau Mexico, mus rau Rio. Tsis muaj rov qab. Tab sis mus rau hauv av. Khawv koob, muaj yeeb yuj, Mr. Mystery, ee. DNA txawv, lawv tsis nkag siab koj.
Tab sis mus rau hauv av. Nws tau txais qhov ntawd, je ne sais quoi, koj paub nws. Kuv tuaj yeem pom cov ntawv sau rau ntawm phab ntsa. Cov tub hluas tsoo lawv lub caj dab sim'na mus nkag me ntsis sneak peek. Coj kuv, ta-ta-coj kuv. Qhib koj lub siab. Xav tias kuv yog qhov kev zam. Boom, boom, boom. Venice puam thiab Palm Springs, lub caij ntuj sov yog txhua yam. Nqa lub ntaus rov qab. (Qhov no yog qhov peb ua)
<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>
Kev txiav txim
Hloov qhov kev txiav txim ntawm cov ntsiab lus hauv cov khoom siv xov xwm los ntawm kev hloov kho HTML nws tus kheej, lossis los ntawm kev ntxiv qee qhov kev cai flexbox CSS los teeb tsa cov order
cuab yeej (rau tus lej ntawm koj xaiv).
Media khoom
Kuv paub tias yuav muaj kev txi tab sis qhov ntawd yog tus nqi. Koj siab tawv txaus kom kuv pom koj cov peacock? Ua koj tus hluas npau suav hmo no. Uh-huh, kuv pom koj. Tsis muaj rov qab. Yog, peb maxed peb cov credit card thiab tau ncaws tawm ntawm lub bar. Yog li cia kuv muab koj rau hauv koj lub hnub yug. Tej zaum koj yuav poob rau hauv kev hlub thaum koj ntsib nws. Muaj lub ntiaj teb nyob rau hauv xib-teg ntawm koj txhais tes. Tsis txhob cia qhov kev zoo siab ua rau koj poob, oh, oh yog. Tam sim no peb tham astrology, tau txais peb cov ntsia hlau ua, tag nrho cov Japanese-y. Ua rau kuv yog koj 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>
Media lis
Vim tias cov khoom siv xov xwm muaj ob peb yam kev cai, koj tuaj yeem siv cov chav kawm no ntawm cov npe HTML. Ntawm koj <ul>
lossis <ol>
, ntxiv .list-unstyled
rau tshem tawm ib qho browser default list styles, thiab tom qab ntawd siv .media
rau koj <li>
s. Raws li ib txwm muaj, siv cov khoom siv sib nrug nyob qhov twg xav tau los kho kom zoo.
-
List-based media object
Kuv cov ntxhais vintage Chanel me nyuam. Yog li koj tuaj yeem muaj koj lub ncuav mog qab zib. Hmo no, hmo no, hmo no, kuv taug kev saum huab cua. Maj mam nqos kuv qhov kev ntshai, yog lawm. Loj hlob sai mus rau hauv ib lub bolt ntawm xob laim. Kub thiab hnyav, 'Til kaj ntug. Zaj dab neeg ntawd xaus nrog ib tug tub rog nyob rau hauv ci ntsa iab armor. Hnyav yog lub taub hau uas hnav lub kaus mom.
-
List-based media object
Tej zaum ib qho laj thawj vim li cas txhua lub qhov rooj kaw. Ua ib zaug koj yog kuv, ib zaug koj yog kuv. Ua koj tus hluas npau suav hmo no. Hnyav yog lub taub hau uas hnav lub kaus mom. Nws tsis yog hnub so, tsis muaj dab tsi ua kev zoo siab. Lub cua daj cua dub zoo meej, cua daj cua dub zoo meej.
-
List-based media object
Koj siab tawv txaus kom kuv pom koj cov peacock? Tsis muaj rov qab. Qhov no yog zaum kawg koj hais, tom qab kab kawg koj tawg. Thaum kawg ntawm nws tag nrho.
<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>