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-ы дзень нараджэння мы зрабілі аднолькавыя татуіроўкі. Такі шыкоўны, так, яна класіка. Я гатовы да дарогі, па якой менш ездзяць.

Я іду па эфіры (сёння вечарам). Але прыземлены. Вы арыгінал, замяніць нельга. Але ў іншым жыцці я была б тваёй дзяўчынай. Мы паехалі ў Калі і напіліся на пляжы. Мы можам танцаваць, пакуль не памром, ты і я, будзем вечна маладымі. Бачыў, як ты спяваў блюз у цэнтры горада.

<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 або дадаўшы нейкі карыстальніцкі CSS flexbox, каб усталяваць 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
    Спіс медыяаб'екта

    Усе мае дзяўчынкі вінтажныя Шанэль. Такім чынам, вы можаце мець свой торт. Сёння вечарам, сёння вечарам, сёння вечарам, я іду па паветры. Павольна праглынаю свой страх, так, так. Хутка расце ў маланку. Так горача і цяжка, да світання. Тая казка заканчваецца рыцарам у бліскучых даспехах. Цяжкая тая галава, што носіць карону.

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