Detailed explanation of Bootstrap media objects

This chapter we will explain the multimedia object (Media Object) in Bootstrap. These abstract object styles are used to create various types of components (such as blog comments). We can use mixed graphics and text in the components, and the images can be left or right aligned. Media objects can be used to mix media objects and text with less code.

The lightweight tagging and easy-to-extend features of media objects are achieved by applying classes to simple tags. You can add the following two forms to the HTML tag to set the media object:

.media: This class allows multimedia (images, videos, audio) in the media object to be floated to the left or right of the content block .

.media-list: If you need a list where each item is part of an unordered list, you can use this class. Can be used for comment lists and article lists.

Default style

Media objects generally appear in groups, and a group of media objects often includes the following parts:

☑ Container of media objects: often use " "media" class name indicates that it is used to accommodate all the contents of the media object

　☑ The object of the media object: often expressed by "media-object", which is the object in the media object, often a picture

　☑ The main body of the media object: often expressed by "media-body", which is the main content in the media object. It can be any element, often the content on the side of the picture

　☑ The title of the media object: often Use "media-heading", which is a title used to describe the object. This part is optional

In addition to the above four parts, "media-left" or "media" are often used in the Bootstrap framework. -right" to control the floating mode of objects in media objects

[Note] In the html structure, .media-right should be placed in .media-body Behind

The media object style is relatively simple, just set the spacing between them

.media,
.media-body {
  overflow: hidden;
  zoom: 1;
}.media,
.media .media {
  margin-top: 15px;
}.media:first-child {
  margin-top: 0;
}.media-object {
  display: block;
}.media-heading {
  margin: 0 0 5px;
}.media-left {
  margin-right: 10px;
}.media-right {
  margin-left: 10px;
}

<div class="media"><a class="media-left" href="#"><img class="media-object" width=100 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>好的代码像粥一样，都是用时间熬出来的</div></div></div>

Nesting

In the comment system, there is often a need for nesting of media objects. The media object in the Bootstrap framework also has such a function. You only need to place another media object structure in the body of the media object "media-body"

<div class="media"><a class="media-left" href="#"><img class="media-object" width=100 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>好的代码像粥一样，都是用时间熬出来的</div><div class="media"><a class="pull-left" href="#"><img class="media-object" src="http://via.placeholder.com/100x100" alt="..."></a><div class="media-body"><h4 class="media-heading">我是小火柴</h4><div>好巧啊，我也叫小火柴</div><div class="media"><a class="pull-left" href="#"><img class="media-object" width=100 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>是的</div></div></div></div></div></div></div><div class="media"><a class="media-left" href="#"><img class="media-object" width=100 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>蓝色理想衰落了，前端却欣欣向荣起来</div></div></div>

Alignment

Images or other media types can be aligned top, middle, or bottom. Default is top aligned. Set

.media-middle {vertical-align: middle;
}.media-bottom {vertical-align: bottom;
}

<div class="media"><a class="media-left" href="#"><img class="media-object" width=30 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>蓝色理想衰落了，前端却欣欣向荣起来</div></div></div><div class="media"><a class="media-left media-middle" href="#"><img class="media-object" width=30 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>蓝色理想衰落了，前端却欣欣向荣起来</div></div></div><div class="media"><a class="media-left media-bottom" href="#"><img class="media-object" width=30 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>蓝色理想衰落了，前端却欣欣向荣起来</div></div></div>

through .media-middle or .media-bottom

Media object list

The nesting of media objects is only one of the simple application effects in media objects. In many cases, we will also encounter a list, and each list item looks similar to a media object. The Bootstrap framework provides a list display effect. You can use ul when writing the structure, and add the class name "media-list" to ul, and use "media" on li

Media object list, There is not much special processing in the style, just setting the left spacing of the list to 0 and removing the item list symbol

.media-list {
  padding-left: 0;
  list-style: none;
}

<ul class="media-list">
  <li class="media"><a class="media-left" href="#"><img class="media-object" width=30 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>蓝色理想衰落了，前端却欣欣向荣起来</div></div>
  </li>
  <li class="media"><a class="media-left" href="#"><img class="media-object" width=30 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>好的代码像粥一样，都是用时间熬出来的</div></div>
  </li>  </ul>

The above is the detailed content of Detailed explanation of Bootstrap media objects. For more information, please follow other related articles on the PHP Chinese website!