Media objects that Bootstrap must learn every day_javascript skills

In the production of web pages or mobile pages, we often see this effect, with the left side on the left (or right) and the content on the right (or left), as shown in the figure below:

We often call such effects media objects. It can be said that it is an abstract style that can be used to build different types of components. These components all have the style mentioned at the beginning. Then some parts are specially extracted from the Bootstrap framework to introduce a component. Its corresponding version file:

☑ LESS version: The corresponding source file is media.less

☑ Sass version: The corresponding source file is _media.scss

☑ Compiled version: corresponds to lines 4792 ~ 4819 of the bootstrap.css file

1. Media object – default media object

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

☑ Container of media objects: often represented by the "media" class name, used to accommodate all contents of media objects

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

☑ The body of the media object: often expressed as "media-body", it is the main content in the media object, which can be any element, often the side content of the image

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

As shown below:

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

In specific use, it is as follows:

<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object lazy"  src="/static/imghwm/default1.png"  data-src="imgs/1.jpg"  alt="Media objects that Bootstrap must learn every day_javascript skills">
  </a>
  <div class="media-body">
    <h4 id="系列-十天精通CSS">系列：十天精通CSS3</h4>
    <div>全方位深刻详解CSS3模块知识，经典案例分析，代码同步调试，让网页穿上绚丽装备！</div>
  </div>
</div>

The operation effect is as follows:

Principle analysis:

Media object styles are relatively simple, just set the spacing between them, as shown below:

/Line 4792~Line 4815 of the bootstrap.css file/

.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 > .pull-left {
 margin-right: 10px;
}
.media > .pull-right {
 margin-left: 10px;
}

2. Media objects – nesting of media objects

In the comment system, you can often see the following effect:

Looking from the outside in, there are three media objects here, but one is nested inside the other. Then the media object in the Bootstrap framework also has such a function. You only need to place another media object structure within the body of the media object "media-body", as shown below:

<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object lazy"  src="/static/imghwm/default1.png"  data-src="…"  alt="Media objects that Bootstrap must learn every day_javascript skills">
  </a>
  <div class="media-body">
    <h4 id="Media-Heading">Media Heading</h4>
    <div>…</div>
    <div class="media">
      <a class="pull-left" href="#">
        <img class="media-object lazy"  src="/static/imghwm/default1.png"  data-src="…"  alt="Media objects that Bootstrap must learn every day_javascript skills">
      </a>
      <div class="media-body">
        <h4 id="Media-Heading">Media Heading</h4>
        <div>…</div>
        <div class="media">
          <a class="pull-left" href="#">
            <img class="media-object lazy"  src="/static/imghwm/default1.png"  data-src="…"  alt="Media objects that Bootstrap must learn every day_javascript skills">
          </a>
          <div class="media-body">
            <h4 id="Media-Heading">Media Heading</h4>
            <div>Media objects that Bootstrap must learn every day_javascript skills</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

When ensuring that your structure is not nested incorrectly, you can directly see the effect as shown below:

3. Media objects – 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 the media object. The same is said in the comment system. Thing:

Usage:

For the media object list effect in the above picture, 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", the sample code is as follows:

<ul class="media-list">
  <li class="media">
    <a class="pull-left" href="#">
      <img class="media-object lazy"  src="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201511/20151130100003233.jpg&#63;2015103010012?x-oss-process=image/resize,p_40"  alt="Media objects that Bootstrap must learn every day_javascript skills">
    </a>
    <div>
      <h4 id="Media-Header">Media Header</h4>
      <div>…</div>
    </div>
  </li>
  <li>…</li>
  <li>…</li>
</ul>

The operation effect is as follows:

Principle analysis:

The media object list does not have too much special processing in terms of style. It just sets the left spacing of the list to 0 and removes the bullet list symbol:

/Line 4816~Line 4819 of the bootstrap.css file/

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

The above is the entire content of this article to help you learn Bootstrap media objects. I hope it will be helpful to your learning.