in English

Медиен обект

Документация и примери за медийния обект на Bootstrap за конструиране на силно повтарящи се компоненти като коментари в блогове, туитове и други подобни.

Пример

Медийният обект помага за изграждането на сложни и повтарящи се компоненти, където някои медии са разположени до съдържание, което не се увива около споменатите медии. Плюс това, той прави това само с два задължителни класа благодарение на flexbox.

По-долу е даден пример за един медиен обект. Необходими са само два класа – обвивката .mediaи обвивката .media-bodyоколо вашето съдържание. Незадължителните подложки и маржове могат да се контролират чрез помощни програми за интервали .

Placeholder 64x64
Медийно заглавие

Ще направиш ли същото за мен? Време е да се изправим пред музиката, вече не съм твоята муза. Чух, че е красиво, бъди съдия и моите момичета ще гласуват. Усещам феникс в себе си. Небето ревнува от нашата любов, ангели плачат от горе. Да, ти ме отвеждаш в утопията.

<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: Вградените елементи не се третират като гъвкави елементи

Internet Explorer 10-11 не изобразява вградени елементи като връзки или изображения (или ::beforeи ::afterпсевдоелементи) като гъвкави елементи. Единственото решение е да зададете невградена displayстойност (напр. block, inline-blockили flex). Предлагаме да използвате .d-flex, една от нашите помощни програми за показване , като лесно решение.

Източник: Flexbugs на GitHub

Гнездене

Медийните обекти могат да бъдат безкрайно вложени, въпреки че ви предлагаме да спрете в даден момент. Поставете вложено .mediaв .media-bodyродителския медиен обект.

Placeholder 64x64
Медийно заглавие

Застанете на фронтовата линия, когато бомбите започнат да падат. Небето ревнува от нашата любов, ангели плачат от горе. Не мога да те заменя с милион пръстена. Момче, когато си с мен, ще ти дам да опиташ. Няма връщане назад. Преди да ме срещнеш, бях добре, но нещата бяха доста тежки. Тежка е главата, която носи короната.

Placeholder 64x64
Медийно заглавие

Поздрави любими хора, нека да поемем на пътешествие. Да, ние караме ангелите да плачат, валят на земята отгоре. Дайте ви нещо добро за празнуване. Прехапвах си езика и задържах дъха си. Ще разкарам сърцето ти в тесните ми дънки. Докато марширувам сам в различен ритъм. Лятото след гимназията, когато се срещнахме за първи път. Толкова си хипнотизиращ, може ли да си дяволът? Можеш ли да бъдеш ангел? Време е да извадите големите балони. Мислех, че съм изключение. Бикини, тиквички, мартини, без бикини.

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

Подравняване

Медиите в медиен обект могат да бъдат подравнени с помощните програми на flexbox към горната част (по подразбиране), средата или края на вашето .media-bodyсъдържание.

Placeholder 64x64
Медия, подравнена отгоре

Ще я вкарам в кома. Давате сто причини защо и казвате, че наистина ще опитате. Затова седях тихо и учтиво се съгласих. Подготвям се за коронната си битка. И на моя 18-ти рожден ден си направихме еднакви татуировки. Толкова трès chic, да, тя е класика. Готов съм за по-малко пътувания път.

Ходя в ефир (тази вечер). Но на земята. Вие сте оригинални, не можете да ги замените. Но в друг живот щях да бъда твоето момиче. Карахме до Кали и се напихме на плажа. Можем да танцуваме, докато умрем, ти и аз, ще бъдем млади завинаги. Видях те в центъра да пееш блус.

<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
Централно подравнена медия

Тя ще стане студена като фризер. В края на всичко това. Жил като пчела, спечелих си ивиците. Бикини, тиквички, мартини, без бикини. Надявам се, че имате здравословен апетит. Можем да танцуваме, докато умрем, ти и аз, ще бъдем млади завинаги. Ние живеем живота. Правим го правилно. Говори се на улицата, имаш какво да ми покажеш, аз.

Искате ли да видите шоуто в 3D, филм. Казват, страхувай се, че не си като другите, футуристичен любовник. Отворете сърцето си. Затова седях тихо и учтиво се съгласих. Миналата петък вечер. Да, късметлия си, ако си в нейния самолет. Аз ще бъда твоят подарък, ще ти дам нещо хубаво за празнуване.

<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
Медия, подравнена отдолу

Хайде, нека цветовете ви избухнат. Усещам тази светлина, която е вътре в мен. Цяла нощ свирят твоята песен. От Токио до Мексико, до Рио. Няма връщане назад. Но на земята. Вълшебен, цветен, г-н Мистерия, ее. Различно ДНК, не те разбират.

Но на земята. Тя има това, je ne sais quoi, ти го знаеш. Виждам надписа на стената. Момчетата чупят вратовете си, опитвайки се да пропълзят малко крадешливо. Вземи ме, та-та-вземи ме. Отворете сърцето си. Мислех, че съм изключение. Бум, бум, бум. Венис Бийч и Палм Спрингс, лятото е всичко. Върнете ритъма. (Ето как правим)

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

Поръчка

Променете реда на съдържанието в медийните обекти, като модифицирате самия HTML или като добавите персонализиран flexbox CSS, за да зададете orderсвойството (на цяло число по ваш избор).

Медиен обект

Знам, че ще има жертви, но това е цената. Достатъчно смел ли си да ми позволиш да видя твоя паун? Бъдете вашата тийнейджърска мечта тази вечер. Аха, виждам те. Няма връщане назад. Да, увеличихме кредитните си карти и ни изгониха от бара. Така че позволете ми да ви облека в костюма ви за рожден ден. Може да се влюбите, когато я срещнете. Имаше света в дланта на ръцете си. Не позволявай на величието да те съкруши, о, о, да. Сега говорим за астрология, за оформяне на ноктите, всички японски. Направи ме твоята Афродита.

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>

Списък с медии

Тъй като медийният обект има толкова малко структурни изисквания, можете също да използвате тези класове върху HTML елементи на списък. На вашия <ul>или <ol>добавете , за .list-unstyledда премахнете всички стилове на списък по подразбиране на браузъра, и след това приложете .mediaкъм вашите <li>s. Както винаги, използвайте помощни програми за интервали, където е необходимо, за фина настройка.

  • Placeholder 64x64
    Базиран на списък медиен обект

    Всички мои момичета ретро Chanel baby. Така че можете да вземете вашата торта. Тази вечер, тази вечер, тази вечер, аз се разхождам в ефир. Бавно преглъщам страха си, да, да. Прерастващ бързо в мълния. Толкова горещ и тежък, до зори. Онази приказка, завършваща с рицар в блестящи доспехи. Тежка е главата, която носи короната.

  • Placeholder 64x64
    Базиран на списък медиен обект

    Може би причината всички врати да са затворени. Защото веднъж си мой, веднъж си мой. Бъдете вашата тийнейджърска мечта тази вечер. Тежка е главата, която носи короната. Дори не е празник, няма какво да празнуваме. Перфектна буря, перфектна буря.

  • Placeholder 64x64
    Базиран на списък медиен обект

    Достатъчно смел ли си да ми позволиш да видя твоя паун? Няма връщане назад. Това е последният път, когато казвате, след последния ред прекъсвате. В края на всичко това.

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