bootstrap的pillbox使用

使用bootstrap的cameo模版，搭建了一个cms系统，使用pillbox做显示的时候，出现点击×失败的问题。

分析了一下pillbox这个控件的使用方法。

pillbox的样例在cameo/forms.html文件中。

样式定义的cameo/css/main.css中：

.pillbox {margin-bottom: 10px;padding: 5px;border: 1px solid #e8ecf3;border-radius: 2px;line-height: 1;
}
.pillbox ul {display: inline-block;margin: 0;
}
.pillbox li {display: inline-block;margin: 2px;padding: 4px;vertical-align: middle;cursor: pointer;border-radius: 2px;font-weight: bold;
}
.pillbox li:after {position: relative;float: right;padding-left: 4px;content: " \00D7";font-size: 12px;
}
.pillbox li.status-important {background-color: #ff604f;
}
.pillbox li.status-warning {background-color: #ffb244;
}
.pillbox li.status-success {background-color: #2dcb73;
}
.pillbox li.status-info {background-color: #1ec3c8;
}

其中"×"这个图标定义在这里，:after属于css中伪类的概念，:after 选择器在被选元素的内容后面插入内容，content 属性来指定要插入的内容。如下li:after表示在li这个元素后面插入内容"\00D7"，也就是”×“这个图标。

.pillbox li:after {position: relative;float: right;padding-left: 4px;content: " \00D7";font-size: 12px;
}

点击的动作执行脚本被定义在cameo\vendor\fuelux\pillbox.js中，如果要使对这个控件的动作生效，在html文档中必须引用pillbox.js文件

由于之前的html文件中，只引用了main.css没有引用pillbox.js，所以该控件的显示没有问题，但点击叉叉的动作没有响应。

转载于:https://www.cnblogs.com/taurusfy/p/7275720.html

bootstrap的pillbox使用相关推荐

GitHub托管BootStrap资源汇总（持续更新中…）
Twitter BootStrap已经火过大江南北,对于无法依赖美工的程序员来说,这一成熟前卫的前端框架简直就一神器,轻轻松松地实现出专业的UI效果.GitHub上相关的的开源项目更是层出不穷,在此整 ...
GitHub托管BootStrap资源汇总
MESSENGER 替换alert()消息和其他用户交互通知. JQUERY.TOCIFY.JS 可以用Bootstrap或jQueryUI主题的Jquery表格组件. BOOTSTRAP-PROMP ...
推荐13款优秀的Twitter Bootstrap JavaScript插件
Bootstrap是基于HTML,CSS和JavaScript的简洁灵活的流行前端框架及交互组件集,由微博先驱Twitter在2011年8月开源的整套前端解决解决方案,拥有非常完备和详尽的开发文档,有 ...
SpringCloud配置文件 application.yml和 bootstrap.yml区别，执行顺序
说在前面 SpringBoot默认支持properties和YAML两种格式的配置文件.前者格式简单,但是只支持键值对.如果需要表达列表,最好使用YAML格式.SpringBoot支持自动加载约定名称 ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：禁用按钮
<!DOCTYPE html> <html><head><meta charset="utf-8"> <title>菜鸟 ...
Bootstrap 栅格系统理解与总结
Bootstrap 栅格系统学习总结 Bootstrap框架是如今最流行的前端框架之一,Bootstrap功能强大,简单易学,很符合实际应用场景. 只是Bootstrap的内容较多,新手往往不能很快 ...
基于Metronic的Bootstrap开发框架经验总结（7）--数据的导入、导出及附件的查看处理...
在很多系统模块里面,我们可能都需要进行一定的数据交换处理,也就是数据的导入或者导出操作,这样的批量处理能给系统用户更好的操作体验,也提高了用户录入数据的效率.我在较早时期的EasyUI的Web框架上, ...
Bootstrap学习的点点滴滴
1)网站: http://www.bootcss.com/ http://v3.bootcss.com/getting-started/#download https://github.com/twb ...
bootstraptable 汇总_JS组件系列——表格组件神器：bootstrap table
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
bootstrap跟vue冲突吗_知道微服务，但你知道微前端吗？
在 toB 的前端开发工作中,我们往往就会遇到如下困境: 工程越来越大,打包越来越慢团队人员多,产品功能复杂,代码冲突频繁.影响面大内心想做 SaaS 产品,但客户总是要做定制化不同的团队可能有 ...

bootstrap的pillbox使用

bootstrap的pillbox使用相关推荐

最新文章

热门文章