整理关于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 相关文章推荐
JavaScript 封装Ajax传递的数据代码
Jun 05 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
May 27 Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
JavaScript中扩展Array contains方法实例
Aug 23 Javascript
深入浅析react native es6语法
Dec 09 Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 Javascript
详解webpack4之splitchunksPlugin代码包分拆
Dec 04 Javascript
详解Vue、element-ui、axios实现省市区三级联动
May 07 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输出Excel文件类
2010/02/08 PHP
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
php自定义函数截取汉字长度
2014/05/15 PHP
smarty中常用方法实例总结
2015/08/07 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
7个jQuery最佳实践
2016/01/12 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
JavaScript对Json的增删改属性详解
2016/06/02 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
jQuery双向列表选择器DIV模拟版
2016/11/01 Javascript
jQuery实现给input绑定回车事件的方法
2017/02/09 Javascript
JS传参及动态修改页面布局
2017/04/13 Javascript
javascript完美实现给定日期返回上月日期的方法
2017/06/15 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
Node错误处理笔记之挖坑系列教程
2018/06/05 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
python文件操作相关知识点总结整理
2016/02/22 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
python实现图片转字符画
2021/02/19 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
nohup的用法
2014/08/10 面试题
什么时候用assert
2015/05/08 面试题
交通专业个人自荐信格式
2013/09/23 职场文书
市场部规章制度
2014/01/24 职场文书
学校2014年度工作总结
2014/12/06 职场文书
课外活动实习计划
2015/01/19 职场文书
企业安全生产规章制度
2015/08/06 职场文书
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技