码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap的pillbox使用

时间:2017-08-03 18:56:19      阅读:306      评论:0      收藏:0      [点我收藏+]

标签:bsp   ott   html   ant   使用方法   概念   生效   内容   搭建   

使用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文件

<script src="vendor/fuelux/pillbox.js"></script>

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

bootstrap的pillbox使用

标签:bsp   ott   html   ant   使用方法   概念   生效   内容   搭建   

原文地址:http://www.cnblogs.com/taurusfy/p/7275720.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!