Bootstrap学习笔记—关于列表组与多媒体对象

Bootstrap学习笔记—关于列表组与多媒体对象

1、列表组

代码：

<div class="list-group">
  <a class="list-group-item active" href="list01.html">列表1</a>
  <a class="list-group-item" href="list02.html">列表2</a>
  <a class="list-group-item" href="list03.html">列表3</a>
  <a class="list-group-item" href="list04.html">列表4</a>
  <a class="list-group-item" href="list05.html">列表5</a>
  <a class="list-group-item" href="list06.html">列表6</a>
</div>

注释：

（1）此列表组为带链接的列表组，可以指向指定的html页面；

（2）active使指明列表项有背景颜色，使该列表项更加突出；

（3）如果想要增加徽章，则在列表栏中写上<span class="badge"></span>

2、多媒体对象

代码：

<ul class="media-list">
  <li class="media">
    <div class="media-left media-middle">
        <a class="pull-left" href="#">
            <img class="img-circle media-object" src="" />
        </a>
    </div>
    <div class="media-body">
            <h4 class="media-heading"></h4>
            <br />
            <p></p>
            <br />
            <p></p>
    </div>
  </li>
</ul>

注释：

（1）多媒体对象可以实现图文混排，图像（视频或音频）可以左对齐或右对齐；

（2）.media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。
.media-list：使各项内容成为无序列表的一部分，可用于评论列表与文章列表；

（3）img-circle media-object图片为圆形

列表组与多媒体对象的组合可以生成“我的”页面。

举例：

<div class="container">
  <div class="list-group">
    <li class="list-group-item">
      <div class="container">
        <ul class="media-list">
          <li class="media">
            <div class="media-left media-middle">
              <a class="pull-left" href="#">
               <img class="img-circle media-object" src="" />
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">个人信息</h4>
              <br />
              <p>姓名:&nbsp;&nbsp;</p>
              <br />
              <p>账号:&nbsp;&nbsp;</p>
            </div>
          </li>
       </ul>
     </div>
    </li>
    <a class="list-group-item" href="mine_collection.html">我的收藏</a>
    <a class="list-group-item" href="mine_comment.html">我的点评</a>
    <a class="list-group-item" href="mine_message.html">我的消息</a>
  </div>
</div>