in English

Mediju objekts

Dokumentācija un piemēri Bootstrap multivides objektam, lai izveidotu ļoti atkārtojošus komponentus, piemēram, emuāra komentārus, tvītus un tamlīdzīgus.

Piemērs

Multivides objekts palīdz veidot sarežģītus un atkārtotus komponentus, kuros daži multivides līdzekļi tiek novietoti blakus saturam, kas neaptver minēto multividi. Turklāt tas tiek darīts tikai ar divām nepieciešamajām klasēm, pateicoties flexbox.

Tālāk ir parādīts viena multivides objekta piemērs. Nepieciešamas tikai divas klases — iesaiņojums .mediaun .media-bodysaturs ap to. Izvēles polsterējumu un piemales var kontrolēt, izmantojot atstarpju utilītus .

Placeholder 64x64
Multivides virsraksts

Vai jūs darīsiet to pašu manā vietā? Ir pienācis laiks stāties pretī mūzikai, es vairs neesmu tava mūza. Dzirdēju, ka tas ir skaisti, esiet tiesnesis, un manas meitenes balsos. Es jūtu fēniksu sevī. Debesis ir greizsirdīgas uz mūsu mīlestību, eņģeļi raud no augšas. Jā, tu mani aizved uz utopiju.

<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: iekļautie elementi netiek uzskatīti par elastīgiem elementiem

Internet Explorer 10–11 neatveido iekļautos elementus, piemēram, saites vai attēlus (vai ::beforepseidoelementus ::after) kā elastīgus vienumus. Vienīgais risinājums ir iestatīt neiekļautu displayvērtību (piemēram, block, inline-block, vai flex). Mēs iesakām izmantot .d-flexvienu no mūsu displeja utilītprogrammām kā vienkāršu problēmu.

Avots: Flexbugs vietnē GitHub

Ligzdošana

Multivides objekti var būt bezgalīgi ligzdoti, lai gan mēs iesakām kādā brīdī apstāties. Novietojiet ligzdotu vecākvides .mediaobjektā .media-body.

Placeholder 64x64
Multivides virsraksts

Stāvot frontē, kad sāk krist bumbas. Debesis ir greizsirdīgas uz mūsu mīlestību, eņģeļi raud no augšas. Nevar tevi aizstāt ar miljonu gredzenu. Puika, kad tu būsi ar mani, es tev nogaršošu. Nav ceļa atpakaļ. Pirms jūs mani satikāt, man bija viss kārtībā, bet lietas bija diezgan smagas. Smaga ir galva, kas nēsā vainagu.

Placeholder 64x64
Multivides virsraksts

Sveicieni, mīļie, dosimies ceļojumā. Jā, mēs raudam eņģeļiem, kas līst virs zemes no augšas. Dodiet jums kaut ko labu svinēšanai. Es mēdzu iekost mēlē un aizturēju elpu. Es likšu tavai sirdij dauzīties manos pieguļošos džinsos. Kamēr es soļoju vienatnē citā ritmā. Vasara pēc vidusskolas, kad mēs pirmo reizi satikāmies. Tu esi tik hipnotizējoša, vai tu varētu būt velns? Vai tu varētu būt eņģelis? Ir pienācis laiks izcelt lielos balonus. Domāju, ka esmu izņēmums. Bikini, cukini, Mārtiņi, bez vīnītēm.

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

Izlīdzināšana

Multivides objektu multivides saturu var līdzināt ar flexbox utilītiem satura augšpusē (noklusējums), vidū vai beigās .media-body.

Placeholder 64x64
Augšpusē līdzināts apdrukājamais materiāls

Es viņu likšu komā. Jūs sniedzat simts iemeslu, kāpēc, un sakāt, ka patiešām mēģināsit. Tā nu es klusi sēdēju, pieklājīgi piekritu. Piemērots manai vainaga cīņai. Un manā 18. dzimšanas dienā mēs ieguvām atbilstošus tetovējumus. Tik ļoti šika, jā, viņa ir klasika. Esmu gatavs mazāk nobrauktam ceļam.

Es eju ēterā (šovakar). Bet pie zemes. Jūs esat oriģināls, to nevar aizstāt. Bet citā dzīvē es būtu tava meitene. Mēs braucām uz Cali un piedzērāmies pludmalē. Mēs varam dejot, līdz mirsim, tu un es, būsim jauni mūžīgi. Es redzēju tevi pilsētas centrā dziedam blūzu.

<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
Centrā līdzināts datu nesējs

Viņa kļūs auksta kā saldētava. Eh-beigās. Dzelot kā bite, es nopelnīju savas svītras. Bikini, cukini, Mārtiņi, bez vīnītēm. Es ceru, ka jums ir veselīga apetīte. Mēs varam dejot, līdz mirsim, tu un es, būsim jauni mūžīgi. Mēs dzīvojam dzīvi. Mēs to darām pareizi. Vārds uz ielas, tev ir kaut kas man jāparāda.

Vēlaties redzēt šovu 3D formātā, filmu. Viņi saka: baidies, ka tu neesi tāds kā citi, futūristisks mīļākais. Atver savu sirdi. Tā nu es klusi sēdēju, pieklājīgi piekritu. Pagājušās piektdienas nakts. Jā, tev ir paveicies, ja esi viņas lidmašīnā. Es būšu tava dāvana, uzdāvināšu ko labu, ko svinēt.

<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
Apakšējā izlīdzinātais apdrukājamais materiāls

Nāc, ļauj savām krāsām uzsprāgt. Es jūtu šo gaismu, kas ir manī. Visu nakti viņi spēlē jūsu dziesmu. No Tokijas uz Meksiku, uz Rio. Nav ceļa atpakaļ. Bet pie zemes. Maģisks, krāsains, misters Mistērija, ee. Atšķiras DNS, viņi tevi nesaprot.

Bet pie zemes. Viņai tas ir, je ne sais quoi, jūs to zināt. Es redzu uzrakstu uz sienas. Zēni lauž kaklu, mēģina nedaudz ložņāt. Ņem mani, ta-ta-ņem mani. Atver savu sirdi. Domāju, ka esmu izņēmums. Bums, bums, bums. Venēcijas pludmale un Palmspringsa, vasara ir viss. Atgrieziet ritmu. (Tā mēs darām)

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

Pasūtiet

Mainiet satura secību multivides objektos, modificējot pašu HTML vai pievienojot pielāgotu flexbox CSS, lai iestatītu orderrekvizītu (uz jūsu izvēlētu veselu skaitli).

Mediju objekts

Es zinu, ka būs upuris, bet tāda ir cena. Vai tu esi pietiekami drosmīgs, lai ļautu man redzēt tavu pāvu? Esi tavs pusaudžu sapnis šovakar. Uh, es tevi redzu. Nav ceļa atpakaļ. Jā, mēs maksimāli izmantojām kredītkartes un tikām padzīti no bāra. Ļaujiet man ietērpt jūs dzimšanas dienas uzvalkā. Jūs varat iemīlēties, kad viņu satiksit. Pasaule bija jūsu plaukstās. Neļaujiet diženumam jūs pievilt, ak, jā. Tagad mēs runājam par astroloģiju, naglu iegūšanu, viss japāņu valodā. Padari mani par savu Afrodīti.

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>

Mediju saraksts

Tā kā multivides objektam ir tik maz strukturālo prasību, šīs klases varat izmantot arī saraksta HTML elementos. Savai <ul>vai <ol>pievienojiet , .list-unstyledlai noņemtu visus pārlūkprogrammas noklusējuma saraksta stilus, un pēc tam lietojiet .mediato saviem <li>s. Kā vienmēr, izmantojiet atstarpju utilītas, kur nepieciešams, lai precīzi noregulētu.

  • Placeholder 64x64
    Uz sarakstu balstīts multivides objekts

    Visas manas meitenes vintage Chanel baby. Tātad jūs varat baudīt savu kūku. Šovakar, šovakar, šovakar es eju ēterā. Lēnām noriju savas bailes, jā, jā. Ātri aug par zibens spērienu. Tik karsts un smags, līdz rītausmai. Tā pasaka, kas beidzas ar bruņinieku mirdzošās bruņās. Smaga ir galva, kas nēsā vainagu.

  • Placeholder 64x64
    Uz sarakstu balstīts multivides objekts

    Varbūt iemesls, kāpēc visas durvis ir aizvērtas. Jo reiz tu esi mans, kad tu esi mans. Esi tavs pusaudžu sapnis šovakar. Smaga ir galva, kas nēsā vainagu. Tie pat nav svētki, nav ko svinēt. Ideāla vētra, ideāla vētra.

  • Placeholder 64x64
    Uz sarakstu balstīts multivides objekts

    Vai tu esi pietiekami drosmīgs, lai ļautu man redzēt tavu pāvu? Nav ceļa atpakaļ. Šī ir pēdējā reize, kad jūs sakāt pēc pēdējās rindiņas, kuru pārtraucat. Eh-beigās.

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