in English

Medien Objet

Dokumentatioun an Beispiller fir Bootstrap Medienobjekt fir héich repetitive Komponenten wéi Blogkommentarer, Tweets an dergläiche ze konstruéieren.

Beispill

De Medienobjekt hëlleft komplex a repetitive Komponenten opzebauen, wou e puer Medien niewent dem Inhalt positionéiert sinn, deen net ëm déi Medien wéckelt. Plus, et mécht dëst mat nëmmen zwou erfuerderlech Klassen dank Flexbox.

Drënner ass e Beispill vun engem eenzege Medienobjekt. Nëmmen zwou Klassen sinn erfuerderlech - d'Verpakung .mediaan den .media-bodyInhalt ronderëm Ären Inhalt. Optional Padding a Margin kënne kontrolléiert ginn duerch Abstands Utilities .

Placeholder 64x64
Medien Iwwerschrëft

Wëlls du datselwecht fir mech maachen? Et ass Zäit d'Musek ze konfrontéieren Ech sinn net méi Är Muse. Héiert et ass schéin, sief de Riichter a meng Meedercher wäerten e Vote maachen. Ech kann e Phoenix an mir fillen. Den Himmel ass jalous op eis Léift, Engele kräischen vun uewen. Jo, Dir bréngt mech an d'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: Inline Elementer ginn net als Flexartikel behandelt

Internet Explorer 10-11 maachen keng Inline Elementer wéi Linken oder Biller (oder ::beforea ::afterPseudo-Elementer) als Flex Elementer. Déi eenzeg Léisung ass en net-inline displayWäert ze setzen (zB , block, inline-blockoder flex). Mir proposéieren .d-flex, ee vun eise Display-Utilities ze benotzen , als einfach Fix.

Quell: Flexbugs op GitHub

Nesting

Medienobjekter kënnen onendlech nestéiert ginn, obwuel mir proposéieren datt Dir iergendwann ophalen. Plaz nestéiert .mediaan der .media-bodyvun engem Elterendeel Medienobjekt.

Placeholder 64x64
Medien Iwwerschrëft

Stand op der Frontlinn wann d'Bommen ufänken ze falen. Den Himmel ass jalous op eis Léift, Engele kräischen vun uewen. Kann Iech net mat enger Millioun Réng ersetzen. Jong, wann Dir bei mir sidd, ginn ech Iech e Goût. Et gëtt kee Wee zréck. Ier Dir mech begéint, war ech an der Rei, awer d'Saache waren zimlech schwéier. Heavy ass de Kapp deen d'Kroun dréit.

Placeholder 64x64
Medien Iwwerschrëft

Gréiss Léifsten loosst eis eng Rees maachen. Jo, mir maachen Engele kräischen, reenen op der Äerd vun uewen erof. Gëff Iech eppes Guddes fir ze feieren. Ech hunn meng Zong gebass an den Otem gehal. Ech ma kréien Är Häerz Rennen a meng Haut-enk Jeans. Wéi ech eleng zu engem anere Beat marschéieren. Summer no Lycée wann mir eis éischt begéint. Dir sidd sou hypnotiséierend, kéint Dir den Däiwel sinn? Kënnt Dir en Engel sinn? Et ass Zäit déi grouss Ballonen erauszebréngen. Ech hu geduecht datt ech d'Ausnam wier. Bikinis, Zucchinis, Martinis, keng 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>

Ausriichtung

Medien an engem Medienobjekt kënne mat Flexbox Utilities op d'Spëtzt (Standard), Mëtt oder Enn vun Ärem .media-bodyInhalt ausgeriicht ginn.

Placeholder 64x64
Top-ausgeriicht Medien

Ech setzen hatt an e Koma. Dir gitt honnert Grënn firwat, an Dir sot, Dir wäert wierklech probéieren. Also souz ech roueg, héiflech ausgemaach. Passt op meng Krounschluecht. An op mengem 18. Gebuertsdag hu mir passende Tattooen. Also très chic, jo, si ass e Klassiker. Ech si prett fir d'Strooss manner gereest.

Ech ginn op der Loft (den Owend). Awer erof op d'Äerd. Dir sidd originell, kann net ersat ginn. Awer an engem anere Liewen wier ech Äert Meedchen. Mir sinn op Cali gefuer an hunn eis op der Plage gedronk. Mir kënnen danzen, bis mir stierwen, Dir an ech, wäerte fir ëmmer jonk sinn. Huet dech an der Stad de Blues gesongen.

<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
Zentrum-ausgeriicht Medien

Si gëtt kal wéi e Frigo. Um eh-Enn vun all. Stingend wéi eng Bei hunn ech meng Sträifen verdéngt. Bikinis, Zucchinis, Martinis, keng Weenies. Ech hoffen Dir hutt e gesonden Appetit. Mir kënnen danzen, bis mir stierwen, Dir an ech, wäerte fir ëmmer jonk sinn. Mir liewen d'Liewen. Mir maachen et richteg. Wuert op der Strooss, Dir hutt eppes fir mir ze weisen, mir.

Wëllt Dir d'Show an 3D gesinn, e Film. Si soen, fäert Dir sidd net wéi déi aner, futuristesche Liebhaber. Maacht Äert Häerz op. Also souz ech roueg, héiflech ausgemaach. An der Nuecht vum leschte Freideg. Jo, Dir hutt Gléck wann Dir op hirem Fliger sidd. Ech wäert Äre Kaddo sinn, ginn Iech eppes Guddes fir ze feieren.

<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
Ënnen ausgeriicht Medien

Komm, loosst Är Faarwen platzen. Ech kann dëst Liicht fillen dat a mir ass. Déi ganz Nuecht spillen se, Äert Lidd. Vun Tokyo op Mexiko, op Rio. Et gëtt kee Wee zréck. Awer erof op d'Äerd. Magesch, faarweg, Här Mystery, Ee. Verschidde DNA, si verstinn dech net.

Awer erof op d'Äerd. Si huet dat, je ne sais quoi, Dir wësst et. Ech gesinn d'Schreiwen op der Mauer. D'Jongen briechen den Hals try'na fir e klengen Sneak Peek ze kräischen. Huelt mech, ta-ta-huelt mech. Maacht Äert Häerz op. Ech hu geduecht datt ech d'Ausnam wier. Bomm, Bomm, Bomm. Venedeg Plage a Palm Springs, Summer ass alles. Bréngt de Beat zréck. (Dëst ass wéi mir et maachen)

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

Uerdnung

Ännert d'Uerdnung vum Inhalt a Medienobjekter andeems Dir den HTML selwer ännert, oder andeems Dir e personaliséierte Flexbox CSS bäidréit fir d' orderEegeschaft ze setzen (op eng ganz Zuel vun Ärer Wiel).

Medien Objet

Ech weess datt et Affer gëtt, awer dat ass de Präis. Sidd Dir dapere genuch fir mech Äre Pfau ze gesinn? Sidd Ären Teenager Dram den Owend. Ähm, ech gesinn dech. Et gëtt kee Wee zréck. Jo, mir hunn eis Kredittkaarte maximéiert a sinn aus der Bar geschloen. Also loosst mech Iech an Ärem Gebuertsdagskostüm kréien. Dir kënnt verléift falen wann Dir hatt begéint. Hat d'Welt an der Handfläch. Loosst d'Gréisst dech net erofsetzen, oh, oh jo. Elo schwätze mir Astrologie, eis Neel gemaach, all japanesch-y. Maacht mir Är Aphrodite.

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>

Medien Lëscht

Well de Medien Objet esou wéineg strukturell Ufuerderunge huet, kënnt Dir och dës Klassen op Lëscht HTML Elementer benotzen. Op Ärem <ul>oder <ol>, füügt de .list-unstyledfir all Browser Standard Lëscht Stiler ze läschen, an dann .mediaop Är <li>s gëllen. Wéi ëmmer, benotzt Abstands-Utilities wou et néideg ass fir ze feinstemmen.

  • Placeholder 64x64
    Lëscht-baséiert Medien Objet

    All meng Meedercher Vintage Chanel Puppelchen. Also kënnt Dir Äre Kuch hunn. Haut den Owend, haut den Owend, ginn ech op der Loft. Lues a lues schlucken meng Angscht, jo, jo. Wuesse séier an e Blëtz. Sou waarm a schwéier, 'Til Sonnenopgang. Dat Mäerchen, dat mat engem Ritter a glänzend Rüstung endet. Heavy ass de Kapp deen d'Kroun dréit.

  • Placeholder 64x64
    Lëscht-baséiert Medien Objet

    Vläicht e Grond firwat all d'Dieren zou sinn. Cause eemol bass du mäin, eemol bass du mäin. Sidd Ären Teenager Dram den Owend. Heavy ass de Kapp deen d'Kroun dréit. Et ass net emol eng Vakanz, näischt ze feieren. E perfekte Stuerm, perfekte Stuerm.

  • Placeholder 64x64
    Lëscht-baséiert Medien Objet

    Sidd Dir dapere genuch fir mech Äre Pfau ze gesinn? Et gëtt kee Wee zréck. Dëst ass déi leschte Kéier wou Dir seet, no der leschter Zeil brécht Dir. Um eh-Enn vun all.

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