In a web page, the image is on the left and the content is arranged on the right, which is a very common effect. It is also a media object. It is an abstract style that 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 generally appear in groups, and a group of media objects generally include the following parts:
1. Media object container: used to accommodate all contents of media objects. The class name must be used on the container. media
2. Object of media object: generally a picture, and the class.media-object is required.
3. The subject of the media object: it is the subject content of the media object. It can be any element and requires the use of the class.media-body
4. The title of the media object: a title used to describe the media object, the class.media-heading is required.
In addition, classes .pull-left and .pull-right are often used in the bootstrap framework to control the floating method of objects in media objects.
Here are 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, just set the spacing between them;
Let’s take a look at the use of media objects:
<h1>Default media object</h1><div><a href="#"><img src="img/1.jpg"></a><div><h4>Moonlight in the lotus pond</h4><div>I am quite uneasy these days. I was sitting in the yard tonight to enjoy the cool air, and suddenly I remembered the lotus pond I walked by every day. On this full moon night, I should always look different. The moon gradually rose, and the laughter of the children on the road outside the wall...</div></div></div>
Nesting of media objects
bootstrap media objects nest, just place another media object structure in the body of the media object (.media-body). Let’s take a look at the application of media object nesting
<h1>Nesting of default media objects</h1><div><a href="#"><img src="img/3.jpg"></a><div><h4>Moonlight in the lotus pond</h4><div>Moonlight quietly pours on these leaves and flowers like flowing water. A thin blue mist floated in the lotus pond. The leaves and flowers seem to have been washed in milk; they are also like dreams covered with veil. Although it is a full moon, there is a faint cloud in the sky, so it cannot shine brightly; but I think this is just the advantage - a deep sleep is indispensable, and a nap has a unique flavor. </div><div><a href="#"><img src="img/4.jpg"></a><div><h4> Here are the nested content1111</h4><div>Four sides of the lotus pond, far, near, high and low, trees, and willows are the most. These trees surrounded a lotus pond; they were only on the side of the path, with a few gaps leaking, as if they were left specifically for the moonlight. </div><div><a href="#"><img src="img/5.jpg"></a><div><h4> Here is a nested content 2222</h4><div>There is a distant mountain on the treetops, and it is just a little careless. There were also one or two street lights leaking from the cracks in the tree. What was listless was the eyes of thirsty sleeping people. The most lively thing at this time is the sound of cicadas on the trees and the sound of frogs in the water; but the excitement is theirs, and I have nothing</div></div></div></div></div></div></div>
The effects are as follows:
Media Object List
The bootstrap framework provides a media object list display effect. When writing structures, you can use the tag ul and add the class name on the tag ul.media-list, and use the class on the tag ul.media.
For example:
<h1>Media Object List</h1><ul><li><a href="#"><img src="img/1.jpg"></a><div><h4>Media Object List 111</h4><div>Along the lotus pond, it is a tortuous small coal chip road. This is a secluded road; there are few people walking during the day, and it is even more lonely at night. There are many trees growing around the lotus pond, and they are depressed (2). On the side of the road were willows and some trees with unknown names. On a night without moonlight, the road was gloomy and a little scared of people. It was very good tonight, although the moonlight was still faint. </div></div></li><li><a href="#"><img src="img/2.jpg"></a><div><h4>Media Object List 222</h4><div>I was the only one on the road, walking with my hands behind my back. This world seems to be mine; I also feel like I am beyond my usual self and have entered another world. I love excitement and tranquility; I love living in groups and being alone. Like tonight, under this vast moon, you can think of anything and don’t think of anything, and you will feel that you are a free person. </div></div></li><li><a href="#"><img src="img/3.jpg"></a><div><h4>Media Object List 333</h4><div>What you must do and say during the day can be ignored now. This is the beauty of being alone, and I will enjoy the endless lotus fragrance and moonlight. Above the winding lotus pond, the leaves of the fields (4) are everywhere. The leaves are very high, like the skirt of a tall dancer. Among the layers of leaves, some white flowers are dotted sporadically, some are blooming gracefully, and some are shyly playing with flowers; just like pearls, stars in the blue sky, and beauty just out of the bath. The breeze brings rays of fragrance, as if the silence of singing on the tall buildings in the distance. </div></div></li><li><a href="#"><img src="img/4.jpg"></a><div><h4>Media Object List 444</h4><div> Suddenly I remembered the story of picking lotus. Lotus picking is an old custom in Jiangnan. It seems to have existed very early, but it was prosperous during the Six Dynasties; we can roughly know it from poetry. The ones who picked lotus were young women, who went there in small boats and singing erotic songs (14). Needless to say, there are many people who pick lotus. There are also people who pick lotus. It was a lively season and a romantic (15). Emperor Yuan of Liang (16) said it well in "The Lotus Picking Fu":. </div></div></li></ul>
The effects are as follows: