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 .media
an den .media-body
Inhalt ronderëm Ären Inhalt. Optional Padding a Margin kënne kontrolléiert ginn duerch Abstands Utilities .
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 ::before
a ::after
Pseudo-Elementer) als Flex Elementer. Déi eenzeg Léisung ass en net-inline display
Wäert ze setzen (zB , block
, inline-block
oder 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 .media
an der .media-body
vun engem Elterendeel Medienobjekt.
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.
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-body
Inhalt ausgeriicht ginn.
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>
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>
Ë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' order
Eegeschaft 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.
<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-unstyled
fir all Browser Standard Lëscht Stiler ze läschen, an dann .media
op Är <li>
s gëllen. Wéi ëmmer, benotzt Abstands-Utilities wou et néideg ass fir ze feinstemmen.
-
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.
-
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.
-
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>