What are the media objects implemented by bootstrap?

bootstrap media object is a type of component with special layout, used to design the effect of mixed graphics and text; bootstrap provides two types of media objects, namely media and media list. Media is used to display a single Objects and media lists are used to display multiple objects.

The operating environment of this tutorial: Windows 10 system, bootstrap version 5, DELL G3 computer

What are the media objects implemented by bootstrap

Media objects are a type of component with a special layout, used to design the effect of mixed graphics and text. They are mostly composed of an image floating to the left or right and some text.

Bootstrap provides two types of media objects: media (.media) and media list (.media-list). Media is used to display a single object, and media lists are used to display multiple objects.

Media

By default, media consists of a media object (such as image, video, audio, etc.) and media content floating to the left or right. Within one media, another media can be nested.

In the HTML structure, a media consists of 3 parts: .media creates a media container, .media-object creates a media object, and .media-body creates media content (where .media-heading creates the media title). For example:

<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" data-src="holder.js/64x64">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
    <!-- Nested media object -->
    <div class="media">
      ...
    </div>
  </div>
</div>

Media objects generally appear in groups. A group of media objects generally includes the following parts:

1. Container of media objects: used to accommodate all contents of media objects. Container You need to use the class name .media

2. The object of the media object: usually a picture, you need to use the class .media-object

3. The main body of the media object: it is the main content of the media object. , can be any element, you need to use the class .media-body

4. The title of the media object: a title used to describe the media object, you need to use the class .media-heading

In addition, The classes .pull-left and .pull-right are often used in the bootstrap framework to control the floating mode of objects in media objects

Related recommendations:bootstrap tutorial

The above is the detailed content of What are the media objects implemented by bootstrap?. For more information, please follow other related articles on the PHP Chinese website!