Bootstrap3 _ 媒体列表

媒体列表

这是一个挺复杂的组件，它只是预设了一种展示新闻列表的方式。

媒体列表 - 基础样式

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Nested media heading

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

运行一下

媒体列表 - 对齐

Top aligned media

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Middle aligned media

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Bottom aligned media

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

运行一下

媒体列表 - 嵌套递进

反清复明

地振高冈，一派西山千古秀；门朝大海，三合河水万年流。

反清复明

地振高冈，一派西山千古秀；门朝大海，三合河水万年流。

反清复明

地振高冈，一派西山千古秀；门朝大海，三合河水万年流。
...（此处还可以继续嵌套）

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" 
      src="https://logo.zhuanfou.com/ruby300.png">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">反清复明</h4>
    地振高冈，一派西山千古秀；门朝大海，三合河水万年流。
    <!-- 此处第一层嵌套开始 -->
    <div class="media">
      <div class="media-left">
        <a href="#">
          <img class="media-object" 
          src="https://logo.zhuanfou.com/ruby300.png">
        </a>
      </div>
      <div class="media-body">
        <h4 class="media-heading">反清复明</h4>
        地振高冈，一派西山千古秀；门朝大海，三合河水万年流。<br>
        ...（此处还可以继续嵌套）
      </div>
    </div>
    <!-- 此处第一层嵌套结束 -->
  </div>
</div>

运行一下

媒体列表

推广