Rud meadhanan
Sgrìobhainnean agus eisimpleirean airson cuspair meadhanan Bootstrap gus co-phàirtean fìor ath-aithris a thogail leithid beachdan blog, tweets, agus an leithid.
eisimpleir
Bidh cuspair nam meadhanan a ’ cuideachadh le bhith a’ togail phàirtean iom-fhillte agus ath-aithriseach far a bheil cuid de mheadhanan suidhichte ri taobh susbaint nach eil a’ cuairteachadh nam meadhanan sin. A bharrachd air an sin, bidh e a’ dèanamh seo le dìreach dà chlas a tha a dhìth le taing do flexbox.
Gu h-ìosal tha eisimpleir de aon nì meadhan. Chan eil a dhìth ach dà chlas - am pasgadh .media
agus .media-body
timcheall air do shusbaint. Faodar smachd a chumail air pleadhag agus iomall roghainneil tro ghoireasan eadar -dhealaichte .
Ceann nam meadhanan
An dèan thu an aon rud dhòmhsa? Tha an t-àm ann aghaidh a chur ris a' cheòl Chan eil mi tuilleadh na do mhus. Chuala e gu bheil e brèagha, bi am britheamh agus bidh mo chlann-nighean a’ gabhail bhòt. Is urrainn dhomh a bhith a’ faireachdainn phoenix a-staigh orm. Tha farmad aig nèamh ri ar gràdh, tha ainglean ag èigheach o shuas. Yeah, bheir thu mi gu 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: Chan eilear a’ dèiligeadh ri eileamaidean in-loidhne mar nithean sùbailte
Cha bhith Internet Explorer 10-11 a’ toirt seachad eileamaidean in-loidhne leithid ceanglaichean no ìomhaighean (no ::before
agus ::after
eileamaidean meallta) mar nithean sùbailte. Is e an aon dòigh-obrach luach neo-loidhne a shuidheachadh display
(me, block
, , inline-block
, no flex
). Tha sinn a’ moladh a bhith a’ cleachdadh .d-flex
, aon de na goireasan taisbeanaidh againn , mar fhuasgladh furasta.
Stòr: Flexbugs air GitHub
A' neadachadh
Faodaidh nithean meadhanan a bhith air an neadachadh gu neo-chrìochnach, ged a tha sinn a’ moladh gun stad thu aig àm air choreigin. Àite air a neadachadh .media
taobh a-staigh .media-body
nì meadhanan pàrant.
Ceann nam meadhanan
A’ seasamh air an loidhne aghaidh nuair a thòisicheas na bomaichean a’ tuiteam. Tha farmad aig nèamh ri ar gràdh, tha ainglean ag èigheach o shuas. Chan urrainn millean fàinne a chuir na àite. Balach, nuair a bhios tu còmhla rium bheir mi dhut blasad. Chan eil dol air ais. Mus do choinnich thu rium bha mi ceart gu leòr ach bha cùisean caran trom. Is trom an ceann a bhios a’ caitheamh a’ chrùin.
Ceann nam meadhanan
Beannachdan luchd-gràidh leig leinn turas a ghabhail. Seadh, bheir sinn air ainglean caoineadh, a' sileadh sìos air thalamh bho shuas. Thoir rudeigin math dhut airson a chomharrachadh. B’ àbhaist dhomh mo theanga a bhìdeadh agus m’ anail a chumail. Tha mi ma gheibh do chridhe rèiseadh anns na jeans teann craiceann agam. Mar a bhios mi a’ meàrrsadh leis fhèin gu buille eile. As t-samhradh às dèidh àrd-sgoil nuair a choinnich sinn an toiseach. Tha thu cho hypnotizing, am b’ urrainn dhut a bhith nad diabhal? Am b’ urrainn dhut a bhith nad aingeal? Tha an t-àm ann na bailiùnaichean mòra a thoirt a-mach. Shaoil mi gur e eisgeachd a bh’ annam. Bikinis, zucchinis, Martinis, no 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>
Co-thaobhadh
Faodaidh meadhanan ann an nì meadhanan a bhith air an co-thaobhadh ri goireasan flexbox gu mullach (bunaiteach), meadhan no deireadh do .media-body
shusbaint.
Meadhanan àrd-cho-thaobhadh
Cuiridh mi ann an coma i. Bheir thu ceud adhbhar carson, agus tha thu ag ràdh gu bheil thu gu bhith a’ feuchainn. Mar sin shuidh mi gu sàmhach, dh'aontaich mi gu modhail. Freagarrach airson mo bhlàr crùnaidh. Agus air an 18mh co-là-breith agam fhuair sinn tattoos maidsidh. Mar sin très chic, yeah, tha i na clasaig. Tha mi deiseil airson an rathad nas lugha de shiubhal.
Tha mi a’ coiseachd air an adhar (a-nochd). Ach sìos gu talamh. Tha thu tùsail, chan urrainn dhut a chur na àite. Ach ann am beatha eile 's mise do nighean. Chaidh sinn gu Cali agus fhuair sinn an deoch air an tràigh. Faodaidh sinn dannsa, gus am bàsaich sinn, bidh thu fhèin agus mise, òg gu bràth. Chunnaic mi thu meadhan a’ bhaile a’ seinn nan 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>
Meadhanan co-cheangailte ris an ionad
Tionndaidhidh i fuar mar reòiteag. Aig deireadh a h-uile càil. Le gath mar sheillean choisinn mi mo strì. Bikinis, zucchinis, Martinis, no weenies. Tha mi an dòchas gun d’ fhuair thu biadh fallain. Faodaidh sinn dannsa, gus am bàsaich sinn, bidh thu fhèin agus mise, òg gu bràth. Tha sinn a 'fuireach na beatha. Tha sinn ga dhèanamh ceart. Facal air an t-sràid, fhuair thu rudeigin ri shealltainn dhomh, dhomh.
Tha mi airson an taisbeanadh fhaicinn ann an 3D, film. Tha iad ag ràdh, biodh eagal ort nach eil thu coltach ris an fheadhainn eile, leannan teachdail. Fosgail suas do chridhe. Mar sin shuidh mi gu sàmhach, dh'aontaich mi gu modhail. Oidhche Haoine sa chaidh. Yeah, tha thu fortanach ma tha thu air an itealan aice. Bidh mi nam thiodhlac dhut, bheir mi dhut rudeigin math airson a chomharrachadh.
<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>
Meadhanan co-thaobhadh gu h-ìosal
Thig air adhart, leig leis na dathan agad spreadhadh. Is urrainn dhomh a bhith a’ faireachdainn an t-solais seo a tha na bhroinn. Fad na h-oidhche tha iad a 'cluich, do òran. Bho Tokyo gu Mexico, gu Rio. Chan eil dol air ais. Ach sìos gu talamh. Draoidheil, dathach, Mr Dìomhair, ee. DNA eadar-dhealaichte, chan eil iad gad thuigsinn.
Ach sìos gu talamh. Tha sin aice, je ne sais quoi, tha fios agad air. Chì mi an sgrìobhadh air a’ bhalla. Bidh na balaich a 'briseadh an amhaich a' feuchainn ri beagan sreap a shlaodadh. Gabh mi, ta-ta-take me. Fosgail suas do chridhe. Shaoil mi gur e eisgeachd a bh’ annam. Boom, boillsgeadh, borb. Tràigh Venice agus Palm Springs, is e àm samhraidh a h-uile dad. Thoir am buille air ais. (Seo mar a nì sinn)
<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>
Òrdugh
Atharraich òrdugh an t-susbaint ann an nithean meadhanan le bhith ag atharrachadh an HTML fhèin, no le bhith a’ cur beagan flexbox CSS àbhaisteach ris gus an order
togalach a shuidheachadh (gu àireamh iomlan de do roghainn).
Rud meadhanan
Tha fios agam gum bi ìobairt ann ach sin a’ phrìs. A bheil thu treun gu leòr airson leigeil leam do pheucag fhaicinn? Bi nad bhruadar deugaire a-nochd. Uh-huh, tha mi gad fhaicinn. Chan eil dol air ais. Yeah, chuir sinn suas na cairtean creideis againn agus chaidh ar breabadh a-mach às a’ bhàr. Mar sin leig dhomh do thoirt anns an deise co-là-breith agad. Faodaidh tu tuiteam ann an gaol nuair a choinnicheas tu rithe. Biodh an saoghal ann am pailm do làmh. Na leig leis a’ mhòrachd do chuir sìos, o, seadh. A-nis tha sinn a 'bruidhinn astrology, a' faighinn ar n-ìnean, a h-uile Iapan-y. Dèan dhomh do 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>
Liosta nam meadhanan
Leis gu bheil cho beag de riatanasan structarail aig cuspair nam meadhanan, faodaidh tu cuideachd na clasaichean sin a chleachdadh air liosta eileamaidean HTML. Air do <ul>
no <ol>
, cuir ris .list-unstyled
gus stoidhlichean liosta bunaiteach brabhsair sam bith a thoirt air falbh, agus an uairsin cuir .media
a-steach air na roghainnean agad <li>
. Mar as àbhaist, cleachd goireasan beàrn far a bheil feum air gus gleusadh a dhèanamh.
-
Rud meadhanan stèidhichte air liosta
A h-uile nighean agam seann Chanel baby. Mar sin faodaidh tu do chèic a bhith agad. A-nochd, a-nochd, a-nochd, tha mi a’ coiseachd air an adhar. Gu mall shluig sìos m' eagal, seadh. A 'fàs gu luath a-steach do bolt dealanaich. Cho teth 's cho trom, 'Gus an fheasgar. An sgeulachd sìthiche sin a’ crìochnachadh le ridire ann an armachd deàrrsadh. Is trom an ceann a bhios a’ caitheamh a’ chrùin.
-
Rud meadhanan stèidhichte air liosta
Is dòcha gur e adhbhar carson a tha na dorsan uile dùinte. Adhbhar aon uair 's gur ann leamsa a tha thu, aon uair 's gu bheil thu leamsa. Bi nad bhruadar deugaire a-nochd. Is trom an ceann a bhios a’ caitheamh a’ chrùin. Chan e eadhon saor-làithean a th’ ann, chan eil dad ri chomharrachadh. Stoirm foirfe, stoirm foirfe.
-
Rud meadhanan stèidhichte air liosta
A bheil thu treun gu leòr airson leigeil leam do pheucag fhaicinn? Chan eil dol air ais. Seo an turas mu dheireadh a chanas tu, às deidh an loidhne mu dheireadh a bhriseas tu. Aig deireadh a h-uile càil.
<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>