Bootstrap列表组使用方法

yibin 2015-09-17 网站运营 625

Bootstrap列表组是一个灵活且强大的列表组件,它不仅仅能够显示多样化的列表样式,而且能够在列表中自定义你想要的复杂内容,可以满足开发者的大部分需求。
通过与列表的结合以及对相应样式的引入,你的列表也可以变得非常丰富多彩,让我们来看看如何对Bootstrap列表组进行使用。


Bootstrap列表组基本样式

列表组的基本样式使用起来非常方便,你只需要将对应的样式引入到整个列表中即可,通过这个有序的样式列表组,你能够以一种更为优雅简洁的方式呈现你的列表数据:<ul class="list-group">  <li class="list-group-item">杭州网站建设</li>  <li class="list-group-item">杭州网站设计</li>  <li class="list-group-item">杭州网站制作</li>  <li class="list-group-item">网站建设知识</li>  <li class="list-group-item">Bootstrap教程</li></ul>就像上述代码一样,你需要现在ul标签中引入list-group样式,然后再在内部的li标签中引入list-group-item样式,那么你的Bootstrap列表组基本样式就引用成功了。


Bootstrap列表组与徽章结合

如果你想要在某一个列表项中显示里面的数据量(例如未读信息等),那么就可以在列表组中引入徽章样式,将其与你的代码相结合,就能够做出相当赞的效果了:<ul class="list-group">  <li class="list-group-item">    <span class="badge">14</span>    收件箱  </li></ul>以上代码就会在你的收件箱列表项目后面加入一个14的数字,以表示未读信息。


Bootstrap列表组链接内容

如果你想要在列表组中加入链接,那么这个链接就会引用Bootstrap默认的链接背景色,当然,你可以通过CSS来自定义这个颜色,让我们看看如何使用:<div class="list-group">  <a href="#" class="list-group-item active">    杭州站建设  </a>  <a href="#" class="list-group-item">杭州网站设计</a>  <a href="#" class="list-group-item">杭州网站制作</a>  <a href="#" class="list-group-item">网站建设知识</a>  <a href="#" class="list-group-item">Bootstrap教程</a></div>跟基本样式是一样的,只不过li标签变成了a标签。


Bootstrap列表其他样式

当然,列表样式中也引入了其他颜色的对应样式,同样是对应的那几种颜色和样式后缀,让我们看看:<ul class="list-group">  <li class="list-group-item list-group-item-success">成功样式(绿色)</li>  <li class="list-group-item list-group-item-info">信息样式(蓝色)</li>  <li class="list-group-item list-group-item-warning">警告样式(橙色)</li>  <li class="list-group-item list-group-item-danger">危险样式(红色)</li></ul>按照上面的方式进行样式调用,就能够构建一个丰富多彩的列表组了。


Bootstrap列表自定义内容

如果你想让自己的列表内容不单单只是一个标题或者链接,那你也完全可以在里面自定义自己的列表结构。
例如,你想要添加标题和内容简介,就可以按照下面的代码进行编写:<div class="list-group">  <a href="#" class="list-group-item active">    <h4 class="list-group-item-heading">标题</h4>    <p class="list-group-item-text">详细内容</p>  </a></div>


写在文章最后

还是那句话,Bootstrap提供的组件确实可以大大减少你的网站建设项目开发时间成本,所以当你想要在自己的项目中引入某个样式的时候,不妨先查看一下Bootstrap是否包含该样式,再去决定是否需要自己编写,不然就有些多此一举了哦。


扫码添加微信

13013082126 扫描微信 建站咨询 优化咨询