整理关于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 相关文章推荐
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
JavaScript:Date类型全面解析
May 19 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 Javascript
轻松实现jquery选项卡切换效果
Oct 10 Javascript
js弹出窗口简单实现代码
Mar 22 Javascript
webpack配置之后端渲染详解
Oct 26 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
node app 打包工具pkg的具体使用
Jan 17 Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 Javascript
vuecli项目构建SSR服务端渲染的实现
Oct 30 Javascript
基于JavaScript实现年月日三级联动
Jun 22 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/11/25 PHP
深入解析PHP的引用计数机制
2013/06/14 PHP
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
Map.vue基于百度地图组件重构笔记分享
2017/04/17 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
python常见的格式化输出小结
2016/12/15 Python
详解python中的 is 操作符
2017/12/26 Python
Python实现求一个集合所有子集的示例
2018/05/04 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
Python3转换html到pdf的不同解决方案
2019/03/11 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
解决Numpy中sum函数求和结果维度的问题
2019/12/06 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
详解Python的三种拷贝方式
2020/02/11 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
用C#语言写出与SQLSERVER访问时的具体过程
2013/04/16 面试题
银行授权委托书格式
2014/10/10 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
投资意向协议书
2015/01/29 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
2019个人工作总结
2019/06/21 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
php去除数组中为0的元素的实例分析
2021/11/17 PHP