Implementation of Bootstrap media objects _ javascript skills

On a web page, the picture is left and the content is arranged right. It is a very common effect, that is, a media object. It is an abstract style, it can be used to build different types of components. This article describes how to implement the Bootstrap media object. If you are interested, you can join us and learn about it. On the web page, pictures are arranged on the left and the content is arranged on the right, which is very common, it is also a media object. It is an abstract style and can be used to build different types of components. The corresponding version files in the bootstrap framework are as follows:

LESS: media. less

SASS: _ media. scss

Media objects are generally grouped. A group of media objects generally includes the following parts:

1. media object container: used to hold all content of a media object. The container must use the class name. media

2. media object: generally an image. You need to use the class. media-object.

3. Subject of a media object: it is the subject content of a media object. It can be any element and requires class. media-body.

4. media object title: used to describe a title of a media object. You must use the class. media-heading

In addition, the bootstrap framework usually uses the class. pull-left and. pull-right to control the object floating mode in the media object.

The following is their css source code:

.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;}

Media styles are relatively simple, but the spacing between them is set;

Let's take a look at the use of media objects:

Default media object
Moonlight in hetang
These days are not quiet. When I sat down in the courtyard tonight, I suddenly remembered the hetang that I had traveled by day. On this full moon night, there should always be another look. The moon gradually rose, and the children laughed on the street outside the wall ......

Nesting of media objects

The bootstrap media object is nested. You only need to place the structure of another media object in the body of the media object (. media-body. Next let's take a look at the use of nested media objects.

Nesting of default media objects
Moonlight in hetang
Moonlight is like a flow of water, quietly falling in this piece of leaves and flowers. The thin blue mist floated in the hetang. The leaves and flowers seem to have been washed in the milk, and they are like a dream of a light yarn. Although it is a full moon, there is a faint cloud in the sky, so you can not shine; but I think this is just a benefit-sleep is indispensable, nap is also distinctive.
Nested content 1111
The four sides of the hetang are far and near, while the high, high, and low are trees, and willow is the most. These trees will be surrounded by a pond; just beside the path, there are a few gaps, such as those left by moonlight.
Nested content 2222
The treasure on the treasure is just a little careless. There are also one or two lights missing in the tree seams. It is a sleep eye. At this time, the most lively part is the record of the trees and the frog in the water. But they are busy, and I have nothing to do with it.

The effect is as follows:

Media Object List

The bootstrap framework displays a list of media objects. When writing a structure, you can use the ul tag and add the class name to the ul tag. media-list, class used on label li. media

For example:

Media Object List
 
 

  
  
Media objects 111
Along the hetang road, it is a tortuous Small Coal Mine. This is a secluded road, with fewer people walking during the day and more lonely at night. Around the hetang, there are many trees, and there are two gloomy trees. On the side of the road are willow trees and trees without names. There is no moonlight in the evening, this road is gloomy, some are afraid of people. It's good tonight, although the moonlight is still faint.

  
  
Media objects 222
I was alone on the road, carrying my hands on his hands. This world seems to be mine, and I have gone beyond my ordinary one and entered another world. I love fun, quiet, group, and solitude. Like tonight, a person can think about everything and do not want anything in this vast month, so he feels like a free person.

  
  
Media objects 333
All things that must be done during the day and things that must be said can be ignored now. This is a wonderful place to be alone, and I have benefited from this boundless moonlight. On the treasure pond, mi Wang (3) is the leaf of Tian (4. The leaves are very tall, like a dancing lady's dress. In the middle of the layers of leaves, some white flowers are dotted with flowers and flowers; just like the pearl of a grain, like the stars in the sky, just like the beauty of the bath. When the breeze passes through, it sends a scent of scent, as if the distant high upstairs sound.

  
  
Media objects 444
I suddenly remembered that cailian was coming. Cailian is an old saying in the south of the Yangtze River. It seems to have been around for a long time, and the Six Dynasties are prosperous. You can know it from poetry. Cailian is a young girl. They went with a boat and sang a colorful Song (14. Needless to say, there are many people in cailian. It is a lively season and a romantic season (15. Liang yuandi (16 :.

 
 

The effect is as follows: