in English

Đối tượng phương tiện

Tài liệu và ví dụ về đối tượng media của Bootstrap để xây dựng các thành phần có tính lặp lại cao như bình luận blog, tweet và những thứ tương tự.

Thí dụ

Đối tượng phương tiện giúp xây dựng các thành phần phức tạp và lặp đi lặp lại trong đó một số phương tiện được định vị cùng với nội dung không bao quanh phương tiện đã nói. Thêm vào đó, nó thực hiện điều này chỉ với hai lớp bắt buộc nhờ vào flexbox.

Dưới đây là một ví dụ về một đối tượng phương tiện duy nhất. Chỉ cần có hai lớp — lớp bao bọc .mediavà lớp .media-bodyxung quanh nội dung của bạn. Khoảng đệm và lề tùy chọn có thể được kiểm soát thông qua các tiện ích giãn cách .

Placeholder 64x64
Tiêu đề phương tiện

Bạn se lam điêu tương tự cho tôi? Đã đến lúc đối mặt với âm nhạc Em không còn là nàng thơ của anh nữa. Nghe nói nó đẹp, hãy làm giám khảo và các cô gái của tôi sẽ bỏ phiếu. Tôi có thể cảm thấy một con phượng hoàng trong tôi. Thiên đường ghen tị với tình yêu của chúng tôi, thiên thần đang khóc từ trên cao. Yeah, bạn đưa tôi đến điều không tưởng.

<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: Các phần tử nội tuyến không được coi là các mục linh hoạt

Internet Explorer 10-11 không hiển thị các phần tử nội tuyến như liên kết hoặc hình ảnh (hoặc ::before::aftercác phần tử giả) dưới dạng các mục linh hoạt. Cách giải quyết duy nhất là đặt một displaygiá trị không nằm trong dòng (ví dụ:, blockhoặc inline-block) flex. Chúng tôi khuyên bạn nên sử dụng .d-flex, một trong những tiện ích hiển thị của chúng tôi , như một cách khắc phục dễ dàng.

Nguồn: Flexbugs trên GitHub

Làm tổ

Các đối tượng phương tiện có thể được lồng vào nhau vô hạn, mặc dù chúng tôi khuyên bạn nên dừng lại ở một số điểm. Đặt lồng .mediatrong .media-bodyđối tượng phương tiện mẹ.

Placeholder 64x64
Tiêu đề phương tiện

Đứng trên chiến tuyến khi bom rơi. Thiên đường ghen tị với tình yêu của chúng tôi, thiên thần đang khóc từ trên cao. Không thể thay thế bạn bằng một triệu chiếc nhẫn. Chàng trai, khi ở bên em, anh sẽ cho em nếm trải. Một đi không trở lại. Trước khi bạn gặp tôi, tôi không sao nhưng mọi thứ hơi nặng nề. Nặng là đầu đội vương miện.

Placeholder 64x64
Tiêu đề phương tiện

Chào những người thân yêu hãy cùng tham gia một cuộc hành trình. Vâng, chúng tôi làm cho các thiên thần khóc, mưa xuống trái đất từ ​​trên cao. Cung cấp cho bạn một cái gì đó tốt để kỷ niệm. Tôi đã từng cắn lưỡi và nín thở. Tôi khiến trái tim bạn loạn nhịp trong chiếc quần jean bó sát. Khi tôi hành quân một mình theo một nhịp điệu khác. Mùa hè năm sau trung học khi chúng tôi gặp nhau lần đầu. Bạn đang thôi miên quá, bạn có thể là ma quỷ? Bạn có thể là một thiên thần? Đã đến lúc mang những quả bóng bay lớn ra. Tưởng rằng mình là ngoại lệ. Bikini, zucchinis, Martinis, không có đồ ăn vặt.

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

Căn chỉnh

Phương tiện trong một đối tượng phương tiện có thể được căn chỉnh bằng các tiện ích flexbox ở đầu (mặc định), giữa hoặc cuối .media-bodynội dung của bạn.

Placeholder 64x64
Phương tiện được căn chỉnh trên cùng

Tôi sắp đưa cô ấy vào trạng thái hôn mê. Bạn đưa ra hàng trăm lý do tại sao và bạn nói rằng bạn thực sự sẽ cố gắng. Vì vậy, tôi ngồi lặng lẽ, đã đồng ý một cách lịch sự. Chuẩn bị cho cuộc chiến giành vương miện của tôi. Và vào Sinh nhật lần thứ 18 của tôi, chúng tôi đã có những hình xăm phù hợp. Vì vậy, thật sang trọng, vâng, cô ấy là một người cổ điển. Tôi đã sẵn sàng cho con đường ít người đi.

Tôi đang đi trên sóng (tối nay). Nhưng xuống đất. Bạn là bản gốc, không thể thay thế. Nhưng trong một kiếp sống khác, em sẽ là cô gái của anh. Chúng tôi lái xe đến Cali và say khướt trên bãi biển. Chúng ta có thể khiêu vũ, cho đến khi chết, bạn và tôi, sẽ trẻ mãi không già. Thấy bạn hát nhạc Blues ở trung tâm thành phố.

<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
Phương tiện căn giữa

Cô ấy sẽ lạnh như một cái tủ đông. Ở phần cuối của tất cả. Tôi đốt như một con ong. Tôi kiếm được sọc của tôi. Bikini, zucchinis, Martinis, không có đồ ăn vặt. Tôi hy vọng bạn có một cảm giác ngon miệng lành mạnh. Chúng ta có thể khiêu vũ, cho đến khi chết, bạn và tôi, sẽ trẻ mãi không già. Chúng ta đang sống cuộc sống. Chúng tôi đang làm đúng. Từ trên đường phố, bạn có gì đó để chỉ cho tôi, tôi.

Muốn xem chương trình ở định dạng 3D, một bộ phim. Họ nói, hãy sợ rằng bạn không giống như những người khác, người yêu tương lai. Mở lối vào trái tim của bạn. Vì vậy, tôi ngồi lặng lẽ, đã đồng ý một cách lịch sự. Đêm thứ Sáu tuần trước. Yeah, bạn thật may mắn nếu bạn đang ở trên máy bay của cô ấy. Tôi sẽ là món quà của bạn, cho bạn một cái gì đó tốt đẹp để kỷ niệm.

<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
Phương tiện được căn chỉnh dưới cùng

Nào, hãy để màu sắc của bạn bùng nổ. Tôi có thể cảm thấy ánh sáng bên trong tôi. Cả đêm họ đang chơi, bài hát của bạn. Từ Tokyo đến Mexico, đến Rio. Một đi không trở lại. Nhưng xuống đất. Huyền bí, đầy màu sắc, Mr. Mystery, ee. DNA khác nhau, họ không hiểu bạn.

Nhưng xuống đất. Cô ấy hiểu điều đó, je ne sais quoi, bạn biết điều đó. Tôi có thể nhìn thấy chữ viết trên tường. Các chàng trai bẻ cổ cố gắng len lén nhìn lén một chút. Đưa tôi đi, đưa tôi đi. Mở lối vào trái tim của bạn. Tưởng rằng mình là ngoại lệ. Bùm, bùm, bùm. Bãi biển Venice và Palm Springs, mùa hè là tất cả. Đưa nhịp trở lại. (Đây là cách chúng tôi làm)

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

Gọi món

Thay đổi thứ tự của nội dung trong các đối tượng phương tiện bằng cách sửa đổi chính HTML hoặc bằng cách thêm một số CSS flexbox tùy chỉnh để đặt thuộc ordertính (thành số nguyên bạn chọn).

Đối tượng phương tiện

Tôi biết sẽ có hy sinh nhưng đó là cái giá phải trả. Bạn có đủ can đảm để cho tôi nhìn thấy con công của bạn? Hãy là giấc mơ tuổi teen của bạn đêm nay. Uh-huh, tôi thấy bạn. Một đi không trở lại. Vâng, chúng tôi đã tăng tối đa thẻ tín dụng của mình và bị đuổi khỏi quán bar. Vì vậy, hãy để tôi có được bạn trong bộ đồ sinh nhật của bạn. Bạn có thể yêu ngay khi gặp cô ấy. Đã có cả thế giới trong lòng bàn tay của bạn. Đừng để sự vĩ đại làm bạn thất vọng, oh, oh yeah. Bây giờ chúng ta đang nói về chiêm tinh học, làm móng tay, tất cả đều là tiếng Nhật-y. Hãy biến tôi thành Aphrodite của bạn.

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>

Danh sách phương tiện

Vì đối tượng media có rất ít yêu cầu về cấu trúc, bạn cũng có thể sử dụng các lớp này trên các phần tử HTML danh sách. Trên <ul>hoặc của bạn <ol>, thêm biểu tượng .list-unstyledđể xóa mọi kiểu danh sách mặc định của trình duyệt, sau đó áp dụng .mediacho các kiểu của bạn <li>. Như thường lệ, hãy sử dụng các tiện ích giãn cách bất cứ khi nào cần thiết để tinh chỉnh.

  • Placeholder 64x64
    Đối tượng phương tiện dựa trên danh sách

    Tất cả các cô gái của tôi cổ điển Chanel baby. Vì vậy, bạn có thể có bánh của bạn. Tối nay, tối nay, tối nay, tôi đang đi trên sóng. Từ từ nuốt xuống nỗi sợ hãi của tôi, vâng vâng. Phát triển nhanh chóng thành một tia chớp. Nóng và nặng nề, 'cho đến rạng sáng. Đó là câu chuyện cổ tích kết thúc với một hiệp sĩ trong bộ giáp sáng chói. Nặng là đầu đội vương miện.

  • Placeholder 64x64
    Đối tượng phương tiện dựa trên danh sách

    Có thể là một lý do tại sao tất cả các cửa được đóng lại. Vì một khi bạn là của tôi, một khi bạn là của tôi. Hãy là giấc mơ tuổi teen của bạn đêm nay. Nặng là đầu đội vương miện. Nó thậm chí không phải là một ngày lễ, không có gì để ăn mừng. Một cơn bão hoàn hảo, cơn bão hoàn hảo.

  • Placeholder 64x64
    Đối tượng phương tiện dựa trên danh sách

    Bạn có đủ can đảm để cho tôi nhìn thấy con công của bạn? Một đi không trở lại. Đây là lần cuối cùng bạn nói, sau khi bạn ngắt dòng cuối cùng. Ở phần cuối của tất cả.

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