Bootstrap Media Objects

In this tutorial you will learn how to use the Bootstrap media object component.

Using the Bootstrap Media Object

If you want to create a layout that contains left- or right-aligned media object like images or video alongside the textual content such as blog comments, Tweets, etc. you can do this easily using the newly introduced Bootstrap media component, like this:

示例

Try this code »

```
<div class="media">
```
```
    <div class="media-left">
```
```
        <a href="#">
```

            <img src="avatar-tiny.jpg" class="media-object" alt="Sample Image">

```
        </a>
```
```
    </div>
```
```
    <div class="media-body">
```

        <h4 class="media-heading">Jhon Carter <small><i>Posted on January 10, 2014</i></small></h4>

        <p>Excellent feature! I love it. One day I'm definitely going to put this Bootstrap component into use and I'll let you know once I do.</p>

```
    </div>
```
```
</div>
```

— 上面示例的输出将如下所示：

You can also apply image modifier classes like .img-rounded, .img-circle etc. to the embedded image to create other variation of the media component.

示例

Try this code »

```
<div class="media">
```
```
    <div class="media-left">
```
```
        <a href="#">
```

            <img src="avatar-tiny.jpg" class="media-object img-circle" alt="Sample Image">

```
        </a>
```
```
    </div>
```
```
    <div class="media-body">
```

        <h4 class="media-heading">Jhon Carter <small><i>Posted on January 10, 2014</i></small></h4>

        <p>Excellent feature! I love it. One day I'm definitely going to put this Bootstrap component into use and I'll let you know once I do.</p>

```
    </div>
```
```
</div>
```

— 上面示例的输出将如下所示：

Alignment of Media Objects

You can also align the images or other media at the middle or bottom of the content block using the class .media-middle or .media-bottom. By default it is top aligned.

示例

Try this code »

```

```
```
<div class="media">
```
```
    <div class="media-left">
```
```
        <a href="#">
```

            <img src="../images/avatar-tiny.jpg" class="media-object" alt="Sample Image">

```
        </a>
```
```
    </div>
```
```
    <div class="media-body">
```

        <h4 class="media-heading">Top aligned media <small><i>This is Default</i></small></h4>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit…</p>

```
    </div>
```
```
</div>
```
```
 
```
```

```
```
<div class="media">
```

    <div class="media-left media-middle">

```
        <a href="#">
```

            <img src="../images/avatar-tiny.jpg" class="media-object" alt="Sample Image">

```
        </a>
```
```
    </div>
```
```
    <div class="media-body">
```

        <h4 class="media-heading">Middle Aligned Media</h4>

        <p>Vestibulum quis quam ut magna consequat faucibus…</p>

```
    </div>
```
```
</div>
```
```
 
```
```

```
```
<div class="media">
```

    <div class="media-left media-bottom">

```
        <a href="#">
```

            <img src="../images/avatar-tiny.jpg" class="media-object" alt="Sample Image">

```
        </a>
```
```
    </div>
```
```
    <div class="media-body">
```

        <h4 class="media-heading">Bottom Aligned Media</h4>

        <p>Amet nibh libero, in gravida nulla. Nulla vel metus…</p>

```
    </div>
```
```
</div>
```

Creating Nested Media List

You can also create a list of media object or nested media object using the media list component. It can be useful for comment threads or article lists.

示例

Try this code »

```
<ul class="media-list">
```
```
    <li class="media">
```
```
        <div class="media-left">
```
```
            <a href="#">
```

                <img src="avatar-tiny.jpg" class="media-object" alt="Sample Image">

```
            </a>
```
```
        </div>
```
```
        <div class="media-body">
```

            <h4 class="media-heading">Media Heading</h4>

            <p>Lorem ipsum dolor sit amet, consectetur adipis elit…</p>

            <!-- Nested media object -->

```
            <div class="media">
```

                <div class="media-left">

```
                    <a href="#">
```

                        <img src="avatar-tiny.jpg" class="media-object" alt="Sample Image">

```
                    </a>
```
```
                </div>
```

                <div class="media-body">

                    <h4 class="media-heading">Nested Media Heading</h4>

                    <p>Vestibulum consectetur scelerisque faucibus…</p>

                    <!-- Nested media object -->

```
                    <div class="media">
```

                        <div class="media-left">

                            <a href="#">

                                <img src="avatar-tiny.jpg" class="media-object" alt="Sample Image">

```
                            </a>
```
```
                        </div>
```

                        <div class="media-body">

                            <h4 class="media-heading">Nested Media Heading</h4>

                            <p>Integer pulvinar leo id risus tempor…</p>

```
                        </div>
```
```
                    </div>
```
```
                </div>
```
```
            </div>
```

            <!-- Nested media object -->

```
            <div class="media">
```

                <div class="media-left">

```
                    <a href="#">
```

                        <img src="avatar-tiny.jpg" class="media-object" alt="Sample Image">

```
                    </a>
```
```
                </div>
```

                <div class="media-body">

                    <h4 class="media-heading">Nested Media Heading</h4>

                    <p>Phasellus vitae suscipit justo mauris…</p>

```
                </div>
```
```
            </div>
```
```
        </div>
```
```
    </li>
```
```
    <li class="media">
```
```
        <div class="media-left">
```
```
            <a href="#">
```

                <img src="avatar-tiny.jpg" class="media-object" alt="Sample Image">

```
            </a>
```
```
        </div>
```
```
        <div class="media-body">
```

            <h4 class="media-heading">Media Heading</h4>

            <p>Quisque pharetra velit id velit iaculis pretium…</p>

```
        </div>
```
```
    </li>
```
```
</ul>
```

Bootstrap Media Objects

Using the Bootstrap Media Object

示例

示例

Alignment of Media Objects

示例

Creating Nested Media List

示例

关于我们

联系方式

互动工具