整理关于Bootstrap列表组的慕课笔记


Posted in Javascript onMarch 29, 2017

整理自慕课笔记
列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单、垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件。

基础列表组

基础列表组,看上去就是去掉了列表符号的列表项,并且配上一些特定的样式。在Bootstrap框架中的基础列表组主要包括两个部分:
* list-group:列表组容器,常用的是ul元素,当然也可以是ol或者div元素
* list-group-item:列表项,常用的是li元素,当然也可以是div元素
来看一个简单的示例:

<ul class="list-group">
 <li class="list-group-item">揭开CSS3的面纱</li>
 <li class="list-group-item">CSS3选择器</li>
 <li class="list-group-item">CSS3边框</li>
 <li class="list-group-item">CSS3背景</li>
 <li class="list-group-item">CSS3文本</li>
</ul>

整理关于Bootstrap列表组的慕课笔记

带徽章的列表组

带徽章的列表组其实就是将Bootstrap框架中的徽章组件和基础列表组结合在一起的一个效果。具体做法很简单,只需要在“list-group-item”中添加徽章组件“badge”:

<ul class="list-group">
 <li class="list-group-item">
 <span class="badge">13</span>揭开CSS3的面
 </li>
 <li class="list-group-item">
 <span class="badge">456</span>CSS3选择器
 </li>
 <li class="list-group-item">
 <span class="badge">892</span>CSS3边框
 </li>
 <li class="list-group-item">
 <span class="badge">90</span>CSS3背景
 </li>
 <li class="list-group-item">
 <span class="badge">1290</span>CSS3文本
 </li>
</ul>

整理关于Bootstrap列表组的慕课笔记

带链接的列表组

带链接的列表组,其实就是每个列表项都具有链接效果。大家可能最初想到的就是在基础列表组的基础上,给列表项的文本添加链接:

<ul class="list-group">
  <li class="list-group-item">
    <a href="##">揭开CSS3的面</a>
  </li>
  <li class="list-group-item">
    <a href="##">CSS3选择器</a>
  </li>
  ...
</ul>

整理关于Bootstrap列表组的慕课笔记

这样做有一个不足之处,就是链接的点击区域只在文本上有效, 但很多时候,都希望在列表项的任何区域都具备可点击。这个时候就需要在链接标签上增加额外的样式:“display:block”;虽然这样能解决问题,达到需求。但在Bootstrap框架中,还是采用了另一种实现方式。就是将ul.list-group使用div.list-group来替换,而li.list-group-item直接用a.list-group-item来替换。这样就可以达到需要的效果:

<div class="list-group">
  <a href="##" class="list-group-item">图解CSS3</a>
  <a href="##" class="list-group-item"><span class="badge">220</span>Sass教程</a>
  <a href="##" class="list-group-item">玩转Bootstrap</a>
</div>

自定义列表组

Bootstrap框加在链接列表组的基础上新增了两个样式:
* list-group-item-heading:用来定义列表项头部样式
* list-group-item-text:用来定义列表项主要内容
这两个样式最大的作用就是用来帮助开发者可以自定义列表项里的内容,如下面的示例:

<div class="list-group">
  <a href="##" class="list-group-item">
    <h4 class="list-group-item-heading">图解CSS3</h4>
    <p class="list-group-item-text">...</p>
  </a>
  <a href="##" class="list-group-item">
    <h4 class="list-group-item-heading">Sass中国</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

整理关于Bootstrap列表组的慕课笔记

列表项的状态设置

Bootstrap框架也给组合列表项提供了状态效果,特别是链接列表组。比如常见状态和禁用状态等。实现方法和前面介绍的组件类似,在列表组中只需要在对应的列表项中添加类名:
* active:表示当前状态
* disabled:表示禁用状态
来看个示例:

<div class="list-group">
  <a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
  <a href="##" class="list-group-item"><span class="badge">15902</span>W3cplus</a>
  <a href="##" class="list-group-item"><span class="badge">59020</span>慕课网</a>
  <a href="##" class="list-group-item disabled"><span class="badge">0</span>Sass中国</a>
</div>

整理关于Bootstrap列表组的慕课笔记

多彩列表组

列表组组件和警告组件一样,Bootstrap为不同的状态提供了不同的背景颜色和文本色,可以使用这几个类名定义不同背景色的列表项。
* list-group-item-success:成功,背景色绿色
* list-group-item-info:信息,背景色蓝色
* list-group-item-warning:警告,背景色为黄色
* list-group-item-danger:错误,背景色为红色
如果你想给列表项添加什么背景色,只需要在“list-group-item”基础上增加对应的类名:

<div class="list-group">
  <a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
  <a href="##" class="list-group-item"><span class="badge">15902</span>W3cplus</a>
  <a href="##" class="list-group-item"><span class="badge">59020</span>慕课网</a>
  <a href="##" class="list-group-item disabled"><span class="badge">0</span>Sass中国</a>
</div>

整理关于Bootstrap列表组的慕课笔记

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 初体验(建议学习jquery)
Apr 25 Javascript
Jquery知识点三 jquery表单对象操作
Jan 17 Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
使用js 设置url参数
Jul 08 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
Jul 27 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
JS实现碰撞检测的方法分析
Jan 19 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
Aug 08 Javascript
JS模拟实现京东快递单号查询
Nov 30 Javascript
Vue.js 插件开发详解
Mar 29 #Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 #Javascript
整理关于Bootstrap模态弹出框的慕课笔记
Mar 29 #Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 #Javascript
jQuery插件之validation插件
Mar 29 #jQuery
Vue.js实现移动端短信验证码功能
Mar 29 #Javascript
Angular2入门--架构总览
Mar 29 #Javascript
You might like
如何获得PHP相关资料
2006/10/09 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
window.returnValue使用方法示例介绍
2014/07/03 Javascript
jQuery制作简洁的多级联动Select下拉框
2014/12/23 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
更强大的vue ssr实现预取数据的方式
2019/07/19 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
浅谈es6中的元编程
2020/12/01 Javascript
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
[01:55]2014DOTA2国际邀请赛 BBC正赛第一天总结
2014/07/10 DOTA
Python调用命令行进度条的方法
2015/05/05 Python
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
python中管道用法入门实例
2015/06/04 Python
Python实现分割文件及合并文件的方法
2015/07/10 Python
使用Python写一个量化股票提醒系统
2018/08/22 Python
详解python中eval函数的作用
2019/10/22 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
美国网上眼镜供应商:LEOTONY(眼镜、RX太阳镜和太阳镜)
2017/10/31 全球购物
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
请解释在new与override的区别
2012/10/29 面试题
甜美蛋糕店创业计划书
2014/01/30 职场文书
小区推广策划方案
2014/06/06 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
工作失职造成投诉的检讨书范文
2014/10/05 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
父母教会我观后感
2015/06/17 职场文书
职工食堂管理制度
2015/08/06 职场文书
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL
angular异步验证器防抖实例详解
2022/03/31 Javascript