in English

Réad meáin

Déanann doiciméadú agus samplaí le haghaidh meáin Bootstrap comhpháirteanna an-athchleachtach a thógáil cosúil le tuairimí blag, tweets, agus a leithéidí.

Sampla

Cuidíonn réad na meán le comhpháirteanna casta agus athchleachtach a thógáil ina bhfuil roinnt meáin suite taobh le hábhar nach gcuimsítear sna meáin sin. Ina theannta sin, déanann sé é seo gan ach dhá rang riachtanach a bhuíochas le flexbox.

Seo thíos sampla de réad meán amháin. Níl ach dhá rang ag teastáil - an clúdach .mediaagus an .media-bodyt-ábhar timpeall ort. Is féidir stuáil agus corrlach roghnach a rialú trí fhóntais spásála .

Placeholder 64x64
Ceannteideal meáin

An ndéanfaidh tú mar an gcéanna domsa? Tá sé in am aghaidh a thabhairt ar an gceol nach mise do muse a thuilleadh. Chuala go bhfuil sé go hálainn, bí i do bhreitheamh agus glacfaidh mo chailíní vóta. Is féidir liom Fhionnuisce a mhothú istigh ionam. Tá éad ar neamh lenár ngrá, tá aingil ag caoineadh ó thuas. Sea, tógann tú chuig utopia mé.

<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: Ní láimhseáiltear eilimintí inlíne mar mhíreanna solúbtha

Ní fhágann Internet Explorer 10-11 gnéithe inlíne cosúil le naisc nó íomhánna (nó ::beforeeilimintí ::afterbréagacha) mar mhíreanna solúbtha. Is é an t-aon réiteach oibre ná luach neamh-inlíne a shocrú display(m.sh., block, inline-block, nó flex). Molaimid úsáid a bhaint as .d-flex, ceann dár bhfóntais taispeána , mar shocrú éasca.

Foinse: Flexbugs ar GitHub

Neadaithe

Is féidir rudaí meán a neadú gan teorainn, cé go molaimid duit stopadh ag pointe éigin. Áit neadaithe .medialaistigh .media-bodyde réad meán tuismitheora.

Placeholder 64x64
Ceannteideal meáin

Seasamh ar an líne tosaigh nuair a thosaíonn na buamaí ag titim. Tá éad ar neamh lenár ngrá, tá aingil ag caoineadh ó thuas. Ní féidir milliún fáinne a chur in ionad tú. A ghasúr, nuair a bheidh tú liom tabharfaidh mé blaiseadh duit. Níl aon dul ar ais. Sular bhuail tú liom bhí mé ceart go leor ach bhí rudaí cineál trom. Is trom an ceann a chaitheann an choróin.

Placeholder 64x64
Ceannteideal meáin

Beannachtaí a ngaolta déanaimis turas. Sea, déanaimid aingil ag caoineadh, ag cur báistí anuas ar domhan ó thuas. Rud éigin maith a thabhairt duit le ceiliúradh a dhéanamh. Ba ghnách liom mo theanga a bhualadh agus m’anáil a choinneáil. Tá mé in ann do chroí a chur ag rásaíocht i mo jeans daingean craiceann. Agus mé ag máirseáil liom féin chuig buille eile. Samhradh tar éis na scoile ard nuair a bhuail muid ar dtús. Tá tú chomh hypnotizing, an bhféadfá a bheith ar an diabhal? An bhféadfá a bheith i do aingeal? Tá sé in am na balúin mhóra a thabhairt amach. Shíl mé go raibh mé an eisceacht. Bikinis, zucchinis, Martinis, aon 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>

Ailíniú

Is féidir meáin i réad meán a ailíniú le fóntais flexbox go barr (réamhshocraithe), lár, nó deireadh d' .media-bodyábhar.

Placeholder 64x64
Meáin bharr-ailínithe

Cuirfidh mé i gcóma í. Tugann tú céad fáthanna, agus deir tú go bhfuil tú chun iarracht a dhéanamh. Mar sin shuigh mé go ciúin, aontaithe go múinte. Oiriúnach do mo cath corónach. Agus ar mo 18ú Breithlá fuaireamar tatúnna meaitseála. Mar sin très chic, yeah, tá sí ina clasaiceach. Táim réidh don bhóthar is lú a thaistil.

Tá mé ag siúl ar an aer (anocht). Ach síos go talamh. Tá tú bunaidh, ní féidir é a ionadú. Ach i saol eile is mise do chailín. Thiomáin muid go Cali agus fuair mé ar meisce ar an trá. Is féidir linn rince, go dtí go bhfaighidh muid bás, beidh tú féin agus mé óg go deo. Chonaic tú lár na cathrach ag canadh na Gormacha.

<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>
Placeholder 64x64
Meáin lár-ailínithe

Casfaidh sí fuar mar reoiteoir. I ndeireadh na dála ar fad. Ag gobadh mar bheach thuill mé mo stríoca. Bikinis, zucchinis, Martinis, aon weenies. Tá súil agam go bhfuil goile sláintiúil agat. Is féidir linn rince, go dtí go bhfaighidh muid bás, beidh tú féin agus mé óg go deo. Táimid ag maireachtáil an tsaoil. Táimid ag déanamh ceart é. Focal ar an tsráid, fuair tú rud éigin a thaispeáint dom, dom.

Ag iarraidh an seó a fheiceáil i 3D, scannán. Deir siad, bíodh eagla ort nach bhfuil tú cosúil leis na cinn eile, leannán futuristic. Oscail suas do chroí. Mar sin shuigh mé go ciúin, aontaithe go múinte. Oíche dé hAoine seo caite. Sea, tá an t-ádh ort má tá tú ar a eitleán. Beidh mé mar bhronntanas duit, tabhair rud éigin maith duit le ceiliúradh.

<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>
Placeholder 64x64
Meáin bun-ailínithe

Come on, lig do dathanna pléasctha. Is féidir liom an solas seo a bhraitheann taobh istigh ionam. Gach oíche tá siad ag seinm, do amhrán. Ó Tóiceo go Meicsiceo, go Rio. Níl aon dul ar ais. Ach síos go talamh. Draíochtúil, ildaite, rúndiamhair an Uasail, ee. DNA difriúil, ní thuigeann siad tú.

Ach síos go talamh. Tá sin faighte aici, je ne sais quoi, tá a fhios agat é. Is féidir liom an scríbhinn a fheiceáil ar an mballa. Briseann na buachaillí a muiníl agus iad ag iarraidh sracfhéachaintín beag. Tóg me, ta-ta-tóg me. Oscail suas do chroí. Shíl mé go raibh mé an eisceacht. Borradh, borradh, borradh. Trá na Veinéise agus Palm Springs, tá samhradh gach rud. Tabhair an buille ar ais. (Seo mar a dhéanaimid)

<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>

Ordú

Athraigh ord an ábhair i réada meán tríd an HTML féin a mhodhnú, nó trí roinnt flexbox CSS saincheaptha a chur leis chun an t- orderairí a shocrú (go slánuimhir de do rogha féin).

Réad meáin

Tá a fhios agam go mbeidh íobairt ann ach sin é an praghas. An bhfuil tú cróga go leor chun ligean dom do peacock a fheiceáil? Bí i do bhrionglóid dhéagóir anocht. Uh-huh, feicim thú. Níl aon dul ar ais. Sea, d'uasmhéadaigh muid ár gcártaí creidmheasa agus fuaireamar ciceáil amach as an mbarra. Mar sin lig dom tú a chur i do chulaith lá breithe. Féadfaidh tú titim i ngrá nuair a bhuaileann tú léi. Bíodh an domhan i dtearmann do lámha. Ná lig don mhóráltacht tú a chur síos, ó, ó sea. Anois táimid ag caint astrology, ag fáil ár tairní raibh, gach Seapáinis-y. Déan do Aphrodite dom.

Placeholder 64x64
<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 meáin

Toisc gur beag riachtanas struchtúrach atá ag réad na meán, is féidir leat na haicmí seo a úsáid freisin ar eilimintí liosta HTML. Ar do <ul><ol>, cuir an .list-unstyledchun aon stíleanna liosta réamhshocraithe brabhsálaí a bhaint, agus ansin cuir i bhfeidhm .mediaar do <li>s. Mar is gnáth, bain úsáid as fóntais spásála nuair is gá chun mionchoigeartú a dhéanamh.

  • Placeholder 64x64
    Réad meáin liosta-bhunaithe

    Mo chailíní go léir seanré Chanel leanbh. Mar sin is féidir leat do chíste a bheith agat. Anocht, anocht, anocht, tá mé ag siúl ar an aer. Slugadh síos go mall mo eagla, yeah yeah. Ag fás go tapa isteach i bolt de lightning. Chomh te agus chomh trom, 'Go breacadh an lae. Críochnaíonn an scéal fairy sin le ridire ag lonrú armúr. Is trom an ceann a chaitheann an choróin.

  • Placeholder 64x64
    Réad meáin liosta-bhunaithe

    B’fhéidir fáth a bhfuil na doirse go léir dúnta. Cause nuair a bhíonn tú liom, nuair a bhíonn tú liom. Bí i do bhrionglóid dhéagóir anocht. Is trom an ceann a chaitheann an choróin. Ní fiú saoire é, rud ar bith le ceiliúradh. Stoirm foirfe, stoirm foirfe.

  • Placeholder 64x64
    Réad meáin liosta-bhunaithe

    An bhfuil tú cróga go leor chun ligean dom do peacock a fheiceáil? Níl aon dul ar ais. Is é seo an uair dheireanach a deir tú, tar éis an líne dheireanach a bhriseann tú. I ndeireadh na dála ar fad.

<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>