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:;
}
.pillbox ul {
display: inline-block;
margin:;
}
.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文件
<script src="vendor/fuelux/pillbox.js"></script>
由于之前的html文件中,只引用了main.css没有引用pillbox.js,所以该控件的显示没有问题,但点击叉叉的动作没有响应。
bootstrap的pillbox使用的更多相关文章
- GitHub托管BootStrap资源汇总(持续更新中…)
Twitter BootStrap已经火过大江南北,对于无法依赖美工的程序员来说,这一成熟前卫的前端框架简直就一神器,轻轻松松地实现出专业的UI效果.GitHub上相关的的开源项目更是层出不穷,在此整 ...
- 推荐13款优秀的Twitter Bootstrap JavaScript插件
Bootstrap是基于HTML,CSS和JavaScript的简洁灵活的流行前端框架及交互组件集,由微博先驱Twitter在2011年8月开源的整套前端解决解决方案,拥有非常完备和详尽的开发文档,有 ...
- GitHub托管BootStrap资源汇总
MESSENGER替换alert()消息和其他用户交互通知. JQUERY.TOCIFY.JS可以用Bootstrap或jQueryUI主题的Jquery表格组件. BOOTSTRAP-PROMPTS ...
- Twitter Bootstrap JavaScript插件
Twitter Bootstrap JavaScript插件本文收集了10款非常不错的JavaScript Twitter bootstrap扩展插件,利用Boostrap开发者可以节省大量的时间修复 ...
- 旺财速啃H5框架之Bootstrap(五)
在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...
- 旺财速啃H5框架之Bootstrap(四)
上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...
- bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序
也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...
- 参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...
- Bootstrap 模态框(Modal)插件
页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
随机推荐
- 启动Hive时报错(com.mysql.jdbc.Driver") was not found in the CLASSPATH)
这是因为没有mysql-connector的jar包.需要把jar包复制到hive目录lib文件夹中. 参考博客:https://blog.csdn.net/Realoyou/article/deta ...
- 获取table中CheckBox选中行的id
方式一 var selectList=''; jQuery(".table tbody input[type=checkbox]:checked").map(function () ...
- 理解 Oracle 多租户体系中(12c,18c,19c)创建用户作用域范围
本篇探讨以下几个问题:你可提前猜测下面6个场景语句中,哪几个可以成功创建用户? 1. 在CDB级别中创建公共用户,不带 container 子句的效果: 2. 在CDB级别中创建公共用户,带 cont ...
- 笔记(tm_springboot)
1.@change="getFile($event)" 2.File imageFolder= new File(request.getServletContext().getRe ...
- 杭电oj1995——汉诺塔V(java实现)
正文之前,先说下做这题的心路历程(简直心累) 这是今天下午的第一道题 第一次看到题目标题——汉诺塔 内心OS:wc,汉诺塔诶,听名字就很难诶,没做过诶,肯定很难实现吧,不行,我得去看看讲解 然后就上b ...
- Python之路Day07
基础数据类型补充 str s.capitalize() -- 首字母大写 s.title() -- 每个单词首字母大写 s.swapcase() -- 大小写转换 s.center() -- 居中/填 ...
- linux中的oracle数据库
安装orcal http://www.cnblogs.com/nucdy/p/5603998.html 搭建Linux操作系统+Oracle数据库的环境 https://blog.csdn.net/p ...
- Tomcat解压版-环境配置
[问题]Tomcat解压版在本地后,双击双击startup.bat,闪退 [解决办法] 1.在已解压的tomcat的bin文件夹下找到startup.bat,右击->编辑.在文件头加入下面 ...
- 计算机网络,HTTP - 如何查看一个网站是否使用HTTP/2?
方法 HTTP/2用":authority"头部代替"Host"头部. Chrome F12里面,HTTP/1.1有"view source" ...
- rancher三节点k8s集群部署例子
rancher三节点k8s集群部署例子 待办 https://rorschachchan.github.io/2019/07/25/使用Rancher2-1部署k8s/