bootstrap 之 列表组件使用

列表是几乎所有网站都会用到的一个组件，正好bootstrap也给我们提供了这个组件的样式，下面我给大家简单介绍一下bootstrap中的列表组件的用法！

首先，重提一下引用bootstrap的核心文件的问题，以免有些刚入手的朋友忘了这个。

在页面的开头，先引用bootstrap的核心文件（css，js）等。

   <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel='stylesheet' href='css/bootstrap.min.css' />
    <!-- jQuery文件 -->
   <script type='text/javascript' src='js/jquery-1.11.1.min.js'>     </script>
   <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script type='text/javascript' src='js/bootstrap.min.js'></script>
   <!-- 下面这句话是为了让网页在手机端时禁止页面缩放，达到最佳视觉效果，在PC端可以注释掉 -->
   <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'/>

接下来说到bootstrap的列表组件了：

下面是一个最简单的列表组，仅仅是一个带有多个列表条目的无序列表，另外还需要设置适当的类。bootstrap给我们提供了一些预定义的样式，你可以根据自身的需求通过 CSS 自己定制。

列表组的样式类为：.list-group，列表中每列的样式为：.list-group-item：

<ul class='list-group'>
<li class='list-group-item'>微笑话列表项1</li>
<li class='list-group-item'>微笑话列表项2</li>
<li class='list-group-item'>微笑话列表项4</li>
<li class='list-group-item'>微笑话列表项5</li>
</ul>




运行效果如下：

上面介绍的是bootstrap中最简单的列表；

其实，用div+a标签同样也能够实现上面列表的效果：

 

<div class='list-group'>
  <a href='http://www.weixh.net' class='list-group-item active'>微笑话1</a>
  <a href='#' class='list-group-item'>微笑话2</a>
  <a href='#' class='list-group-item'>微笑话3</a>
  <a href='#' class='list-group-item'>微笑话4</a>
  <a href='#' class='list-group-item'>微笑话5</a>
</div>




还是用ul、li 的样式，运行效果如下：

同样，bootstrap也给我们提供了几种列表的样式，如果大家觉得列表的样式不是你喜欢的，你也可以重写他的样式，改成自己喜欢的：

<div class='list-group'>
  <a href='http://www.weixh.net' class='list-group-item list-group-item-success active'>微笑话1</a>
  <a href='#' class='list-group-item list-group-item-info'>微笑话2</a>
  <a href='#' class='list-group-item list-group-item-warning'>微笑话3</a>
  <a href='#' class='list-group-item list-group-item-danger'>微笑话4</a>
  <a href='#' class='list-group-item' style='background:#F75000;'>自己定义的样式</a>
</div>

 

运行效果如下：

然后，我想给列表加上徽章：

<div class='list-group'>
  <a href='http://www.weixh.net' class='list-group-item list-group-item-success active'><span class='badge'>15</span>微笑话1</a>
  <a href='#' class='list-group-item list-group-item-info'><span class='badge'>14</span>微笑话2</a>
  <a href='#' class='list-group-item list-group-item-warning'><span class='badge'>18%</span>微笑话3</a>
  <a href='#' class='list-group-item list-group-item-danger'><span class='badge'>100</span>微笑话4</a>
  <a href='#' class='list-group-item' style='background:#F75000;'><span class='badge'>33</span>自己定义的样式</a>
</div>

 

于是我得到了徽章：

定制内容
列表组中的每个元素都可以是任何 HTML 内容，甚至是像下面的带链接的列表组。

<div class='list-group'>
  <a href='http://www.weixh.net' class='list-group-item active'>
  <h4 class='list-group-item-heading'>这里可以放标题</h4>
    <p class='list-group-item-text'>这里就是内容咯</p>
  </a>
  <a href='http://www.weixh.net' class='list-group-item'>
  <h4 class='list-group-item-heading'>这里可以放标题</h4>
    <p class='list-group-item-text'>这里就是内容咯</p>
  </a>
  <a href='http://www.weixh.net' class='list-group-item'>
  <h4 class='list-group-item-heading'>这里可以放标题</h4>
    <p class='list-group-item-text'>这里就是内容咯</p>
  </a>
  <a href='http://www.weixh.net' class='list-group-item'>
  <h4 class='list-group-item-heading'>这里可以放标题</h4>
    <p class='list-group-item-text'>本文出自博客园-三卷天书</p>
  </a>
</div>

 

运行得出的结果：

是不是觉得不用自己写CSS实在是太好了呢，好了，今天就跟大家啰嗦到这来，不理解或者不懂的可以回复提问，大家共同学习！