미디어 개체
블로그 댓글, 트윗 등과 같이 고도로 반복적인 구성 요소를 구성하기 위한 부트스트랩의 미디어 개체에 대한 문서 및 예제입니다.
예시
미디어 개체 는 일부 미디어가 해당 미디어를 둘러싸지 않는 콘텐츠 옆에 배치되는 복잡하고 반복적인 구성 요소를 만드는 데 도움이 됩니다 . 또한 flexbox 덕분에 두 개의 필수 클래스만으로 이 작업을 수행합니다.
다음은 단일 미디어 개체의 예입니다. .media
래핑 과 콘텐츠 주변의 두 가지 클래스만 필요 .media-body
합니다. 선택적 패딩 및 여백은 간격 유틸리티 를 통해 제어할 수 있습니다 .
미디어 제목
나에게도 똑같이 해줄래? 이제 내가 더 이상 당신의 뮤즈가 아닌 음악을 마주할 때입니다. 아름답다고 들었습니다. 판사와 내 딸들이 투표를 할 것입니다. 내 안에 불사조를 느낄 수 있습니다. 하늘은 우리의 사랑을 질투하고 천사들은 위에서 울고 있습니다. 예, 당신은 나를 유토피아로 데려갑니다.
<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
중 하나를 사용하는 것이 좋습니다 .
출처: GitHub의 Flexbugs
중첩
미디어 개체는 무한히 중첩될 수 있지만 어느 시점에서 중지하는 것이 좋습니다. 상위 미디어 개체 .media
내에 중첩된 위치에 배치합니다..media-body
미디어 제목
폭탄이 떨어지기 시작할 때 최전선에 서십시오. 하늘은 우리의 사랑을 질투하고 천사들은 위에서 울고 있습니다. 당신을 백만 개의 반지로 바꿀 수는 없습니다. 소년, 당신이 나와 함께 있을 때 맛을 보여드리겠습니다. 돌아갈 곳이 없습니다. 당신이 나를 만나기 전에는 나는 괜찮았지만 상황이 좀 무거웠다. 무거운 것은 왕관을 쓰는 머리입니다.
<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
콘텐츠의 상단(기본값), 중간 또는 끝 부분에 정렬할 수 있습니다.
상단 정렬 미디어
그녀를 혼수상태에 빠뜨릴거야. 당신은 그 이유를 100가지를 제시하고 정말로 시도할 것이라고 말합니다. 그래서 나는 조용히 앉아 정중하게 동의했습니다. 내 최고의 전투를 위해 옷을 입는다. 그리고 내 18번째 생일에 우리는 일치하는 문신을 했습니다. 그래서 très chic, 예, 그녀는 고전적입니다. 덜 가본 길을 갈 준비가 되어 있습니다.
나는 공중을 걷고 있다(오늘 밤). 그러나 지상으로. 당신은 원래, 대체할 수 없습니다. 하지만 다른 삶에서 나는 당신의 여자가 될 것입니다. 우리는 Cali에 차를 몰고 해변에서 취했다. 우리는 죽을 때까지 춤출 수 있습니다. 당신과 나는 영원히 젊을 것입니다. 시내에서 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>
중앙 정렬 미디어
그녀는 냉동실처럼 차가워질 것입니다. 모든 것의 끝에서. 벌처럼 쏘아 벌을 받았습니다. 비키니, 호박, 마티니, 위니 없음. 건강한 입맛이 되셨길 바랍니다. 우리는 죽을 때까지 춤출 수 있습니다. 당신과 나는 영원히 젊을 것입니다. 우리는 삶을 살고 있습니다. 제대로 하고 있습니다. 거리의 소문, 당신은 나에게 보여줄 것이 있습니다.
영화 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>
아래쪽 정렬 미디어
자, 당신의 색이 터지도록 내버려 두십시오. 내 안에 있는 이 빛을 느낄 수 있습니다. 밤새도록 그들은 당신의 노래를 연주합니다. 도쿄에서 멕시코, 리오로. 돌아갈 곳이 없습니다. 그러나 지상으로. 마법 같은, 다채로운, 미스터 미스터리, ee. 다른 DNA, 그들은 당신을 이해하지 못합니다.
그러나 지상으로. 그녀는 그것을 가지고 있습니다, 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
(선택한 정수로) 미디어 개체의 콘텐츠 순서를 변경합니다.
미디어 개체
희생이 있을 것이라는 것을 알고 있지만 그것은 대가입니다. 내가 당신의 공작을 보게 할만큼 용감합니까? 오늘 밤 당신의 십대 꿈이 되십시오. 어, 봤어. 돌아갈 곳이 없습니다. 네, 신용카드 한도를 다 채우고 술집에서 쫓겨났습니다. 그래서 내가 당신에게 당신의 생일 정장을 얻을 수 있습니다. 그녀를 만나면 사랑에 빠질 수 있습니다. 당신의 손 안에 세상이 있었습니다. 위대함에 실망하지 마십시오. 오, 오 예. 이제 우리는 점성술에 대해 이야기하고 손톱을 다듬고 모든 것이 일본적입니다. 나를 당신의 아프로디테로 만드십시오.
<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>
추가 한 다음 s에 적용 합니다 . 항상 그렇듯이 미세 조정이 필요한 곳에 간격 유틸리티를 사용하십시오..list-unstyled
.media
<li>
-
목록 기반 미디어 개체
모든 내 여자 빈티지 샤넬 베이비. 그래서 당신은 당신의 케이크를 가질 수 있습니다. 오늘 밤, 오늘 밤, 오늘 밤, 나는 공중에서 걷고 있다. 천천히 내 두려움을 삼켜, yeah yeah 번개처럼 빠르게 성장합니다. 너무 뜨겁고 무거워 '새벽까지. 빛나는 갑옷을 입은 기사로 끝나는 그 동화. 무거운 것은 왕관을 쓰는 머리입니다.
-
목록 기반 미디어 개체
아마도 모든 문을 닫은 이유일 것입니다. 일단 당신이 내 것이면, 당신은 내 것입니다. 오늘 밤 당신의 십대 꿈이 되십시오. 무거운 것은 왕관을 쓰는 머리입니다. 휴일도 아니고 축하할 일도 아니다. 완벽한 폭풍, 완벽한 폭풍.
-
목록 기반 미디어 개체
내가 당신의 공작을 보게 할만큼 용감합니까? 돌아갈 곳이 없습니다. 이것은 당신이 말하는 마지막 시간이며, 마지막 줄 이후에 끊습니다. 모든 것의 끝에서.
<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>