in English

Obiect media

Documentație și exemple pentru obiectul media Bootstrap pentru a construi componente extrem de repetitive, cum ar fi comentarii pe blog, tweet-uri și altele asemenea.

Exemplu

Obiectul media ajută la construirea de componente complexe și repetitive în care unele media sunt poziționate alături de conținut care nu se încadrează în jurul respectivului media. În plus, face acest lucru cu doar două clase necesare datorită flexbox.

Mai jos este un exemplu de un singur obiect media. Sunt necesare doar două clase: împachetarea .mediași .media-bodyconținutul dvs. Suplimentul și marginea opționale pot fi controlate prin utilități de spațiere .

Placeholder 64x64
Titlu media

Vei face la fel pentru mine? E timpul să înfrunt muzica. Nu mai sunt muza ta. Am auzit că e frumos, fii judecător și fetele mele vor vota. Simt un Phoenix în interiorul meu. Cerul este gelos pe iubirea noastră, îngerii plâng de sus. Da, mă duci la utopie.

<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: elementele în linie nu sunt tratate ca elemente flexibile

Internet Explorer 10-11 nu redă elemente inline, cum ar fi link-uri sau imagini (sau ::beforeși ::afterpseudo-elemente) ca elemente flexibile. Singura soluție este să setați o displayvaloare non-inline (de exemplu, block, inline-blocksau flex). Vă sugerăm să utilizați .d-flex, unul dintre utilitățile noastre de afișare , ca o soluție ușoară.

Sursa: Flexbugs pe GitHub

Cuibărire

Obiectele media pot fi imbricate la infinit, deși vă sugerăm să vă opriți la un moment dat. Așezați imbricat .mediaîntr- .media-bodyun obiect media părinte.

Placeholder 64x64
Titlu media

Stând pe prima linie când bombele încep să cadă. Cerul este gelos pe iubirea noastră, îngerii plâng de sus. Nu te pot înlocui cu un milion de inele. Băiete, când ești cu mine, îți voi da un gust. Nu e cale de întoarcere. Înainte să mă cunoști, eram bine, dar lucrurile erau cam grele. Greu este capul care poartă coroana.

Placeholder 64x64
Titlu media

Salutări, dragi, haideți să facem o călătorie. Da, îi facem pe îngeri să plângă, plouând de sus pe pământ. Să-ți ofere ceva bun de sărbătorit. Obișnuiam să-mi mușc limba și să-mi țin respirația. Îți fac inima să bată repede în blugii mei strâmți. În timp ce mărșăluiesc singur la un alt ritm. Vara după liceu când ne-am cunoscut prima dată. Ești atât de hipnotizator, ai putea fi diavolul? Ai putea fi un înger? E timpul să scoți baloanele mari. Am crezut că eu sunt excepția. Bikini, dovlecei, Martini, fără băieți.

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

Aliniere

Media dintr-un obiect media poate fi aliniată cu utilitarele flexbox la partea de sus (implicit), la mijloc sau la sfârșitul .media-bodyconținutului.

Placeholder 64x64
Media aliniate în partea de sus

O voi pune în comă. Dai o sută de motive și spui că chiar vei încerca. Așa că am stat liniștit, am fost de acord politicos. Pregătindu-mă pentru bătălia mea de încoronare. Și la cea de-a 18-a aniversare am primit tatuaje care se potrivesc. Așa foarte șic, da, este o clasică. Sunt pregătit pentru drumul mai puțin parcurs.

Mă plimb pe aer (în seara asta). Dar cu picioarele pe pământ. Esti original, nu poate fi inlocuit. Dar într-o altă viață aș fi fata ta. Am mers cu mașina până la Cali și ne-am îmbătat pe plajă. Putem dansa, până când murim, tu și cu mine vom fi tineri pentru totdeauna. Te-am văzut în centrul orașului cântând 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>
Placeholder 64x64
Media aliniate la centru

Se va răci ca un congelator. La sfârșitul tuturor. Înțepăt ca o albină mi-am câștigat dungile. Bikini, dovlecei, Martini, fără băieți. Sper că ai un apetit sănătos. Putem dansa, până când murim, tu și cu mine vom fi tineri pentru totdeauna. Trăim viața. O facem corect. Vorba pe stradă, ai ceva să-mi arăți, mie.

Vrei să vezi spectacolul în 3D, un film. Ei spun, te temi că nu ești ca ceilalți, iubit futurist. Deschide-ți inima. Așa că am stat liniștit, am fost de acord politicos. Ultima noapte de vineri. Da, ești norocos dacă ești în avionul ei. O să fiu cadoul tău, să-ți ofer ceva bun de sărbătorit.

<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
Suport media aliniat în jos

Haide, lasă-ți culorile să explodeze. Pot simți această lumină care este în interiorul meu. Toată noaptea cântă, cântecul tău. Din Tokyo până în Mexic, până la Rio. Nu e cale de întoarcere. Dar cu picioarele pe pământ. Magic, colorat, Mr. Mystery, ee. ADN diferit, ei nu te înțeleg.

Dar cu picioarele pe pământ. Ea are asta, je ne sais quoi, știi asta. Văd scrisul de pe perete. Băieții își rup gâtul încearcă să arunce o scurtă privire. Ia-mă, ta-ta-ia-mă. Deschide-ți inima. Am crezut că eu sunt excepția. Boom Boom Boom. Plaja din Veneția și Palm Springs, vara este totul. Aduceți ritmul înapoi. (Asa o facem noi)

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

Ordin

Schimbați ordinea conținutului în obiectele media modificând HTML-ul în sine sau adăugând un CSS flexbox personalizat pentru a seta orderproprietatea (la un număr întreg la alegerea dvs.).

Obiect media

Știu că vor exista sacrificii, dar acesta este prețul. Ești suficient de curajos să mă lași să-ți văd păunul? Fii visul tău de adolescentă în seara asta. Uh-huh, te văd. Nu e cale de întoarcere. Da, ne-am maxim cardurile de credit și am fost dat afară din bar. Așa că lasă-mă să te iau în costumul tău de ziua ta. S-ar putea să te îndrăgostești când o vei întâlni. Avea lumea în palmă. Nu lăsa măreția să te doboare, oh, oh, da. Acum vorbim de astrologie, ne facem unghiile, toate japoneze. Fă-mă Afrodita ta.

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>

Lista media

Deoarece obiectul media are atât de puține cerințe structurale, puteți utiliza aceste clase și pe elementele HTML din listă. Pe dvs. <ul>sau <ol>, adăugați .list-unstyledpentru a elimina orice stil de listă implicit de browser, apoi aplicați -l pe .mediadvs. <li>Ca întotdeauna, utilizați utilitățile de spațiere oriunde este necesar pentru a regla fin.

  • Placeholder 64x64
    Obiect media bazat pe listă

    Toate fetele mele vintage Chanel baby. Așa că poți avea tortul tău. În seara asta, în seara asta, în seara asta, merg pe aer. Înghițindu-mi încet frica, da, da. Crește rapid într-un fulger. Atât de fierbinte și greu, până în zori. Acel basm care se termină cu un cavaler în armură strălucitoare. Greu este capul care poartă coroana.

  • Placeholder 64x64
    Obiect media bazat pe listă

    Poate un motiv pentru care toate ușile sunt închise. Pentru că odată ce ești al meu, odată ce ești al meu. Fii visul tău de adolescentă în seara asta. Greu este capul care poartă coroana. Nici măcar nu e sărbătoare, nimic de sărbătorit. O furtună perfectă, furtună perfectă.

  • Placeholder 64x64
    Obiect media bazat pe listă

    Ești suficient de curajos să mă lași să-ți văd păunul? Nu e cale de întoarcere. Este ultima dată când spui, după ultimul rând pe care îl rupi. La sfârșitul tuturor.

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