Bootstrap学习之路(3)---列表组件

列表是几乎所有网站都会用到的一个组件,正好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">微笑话列表项3</li>
<li class="list-group-item">微笑话列表项4</li>
<li class="list-group-item">微笑话列表项5</li>
</ul>

运行效果如下:
Bootstrap学习之路(3)---列表组件

上面介绍的是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学习之路(3)---列表组件

同样,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>

运行效果如下:

Bootstrap学习之路(3)---列表组件

然后,我想给列表加上徽章:

<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>

于是我得到了徽章:
Bootstrap学习之路(3)---列表组件

定制内容
列表组中的每个元素都可以是任何 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>

运行得出的结果:

Bootstrap学习之路(3)---列表组件

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

还有本人的小站《微笑话》手机版上线了,用bootstrap实现的页面,大家可以去看看,地址是:www.weixh.net,手机访问会自动跳转到手机版的,给大家贴个效果图

Bootstrap学习之路(3)---列表组件

还有,如果转载本文,需注明出处。

上一篇:为了弄懂Flutter的状态管理, 我用10种方法改造了counter app


下一篇:MySQL 分区表原理及数据备份转移实战