【前言】
使用bootstrap有两年时间了，积累了一些经验，做下分享。
计划会开源，这篇文章先简单介绍一下。
【软肋】
其实bootstrap已经很好了，唯一的软肋就是js方面有些薄弱，对比easyui就知道了，
可以很明显的知道bootstrap是前端人员创建的，而easyui是偏后端人员创建的。
【积累】
对bootstrap做了一些封装，可以使大家使用更方便，如下：
1.封装了alert
2.封装了confirm
3.封装了dialog
4.封装了msg
5.封装了tooltip
6.封装了popover
7.封装了bstree
8.封装了bstro
【alert】
理由：bootstrap是没有alert插件的，基于模态框封装了一下
效果：
使用方法：
// 无回调
qiao.bs.alert(‘这是一个提示‘);
// 有回调
qiao.bs.alert(‘这是一个提示‘,function(){
alert(1);
});
【confirm】
理由：同alert
效果：
使用方法：
qiao.bs.confirm(‘确定要这样吗？‘,function(){
alert(‘点击了确定‘);
},function(){
alert(‘点击了取消‘);
});
【dialog】
理由：同上
效果：
用法：
qiao.bs.dialog({
url : ‘/ucenter/role/setUrl/‘ + id,
title : ‘设置Url‘,
okbtn : ‘保存‘
}, qiao.role.addUrl);
参数：
qiao.bs.dialog(options,func);
其中options有：
qiao.bs.modaloptions = {
url : ‘‘,
fade : ‘fade‘,
close : true,
title : ‘title‘,
btn : false,
okbtn : ‘确定‘,
qubtn : ‘取消‘,
msg : ‘msg‘,
big : false,
show : false,
remote : false,
backdrop: ‘static‘,
keyboard: true,
style : ‘‘
};
func是回调函数，
返回true，关闭dialog
返回false，不关闭dialog
【msg】
理由：bootstrap没有提示消息的js组件，封装了一个
效果：
用法：
// 只有提示
qiao.bs.msg(‘一个提示‘);
// 自定义配置
qiao.bs.msg({
msg : ‘危险提示‘,
type : ‘danger‘,
time : 2000
});
【tooltip】
理由：bootstrap的tooltip每次都需要手动激活，比较麻烦
效果：
用法：
// 默认提示
$(‘#test1‘).bstip(‘123‘);
// 可配置
$(‘#test1‘).bstip({
animation : true,
container : ‘body‘,
content : ‘content‘,
html : true,
placement : ‘bottom‘,
title : ‘‘,
trigger : ‘hover‘//click | hover | focus | manual.
});
【popover】
理由：同上
效果：
用法：
// 默认提示
$(‘#test1‘).bspop(‘123‘);
// 可配置
$(‘#test1‘).bspop({
animation : true,
container : ‘body‘,
content : ‘content‘,
html : true,
placement : ‘bottom‘,
title : ‘‘,
trigger : ‘hover‘//click | hover | focus | manual.
});
【bstree】
理由：
bootstrap最大的软肋就是做后台ui的时候功能太弱，例如tree组件，datagrid组件都没有，在这点上easyui完胜bootstrap，
封装了tree，这个比较复杂。
效果：
可编辑效果：
选择效果：
用法：
数据结构：
以java为例，需要有这几个属性：
private int id; private String url; private String text; private boolean checked = false; private List<QTree> children;
js参数：
qiao.bs.tree.options = {
url : ‘/ucenter/menu/‘,
height : ‘600px‘,
open : true,
edit : false,
checkbox: false,
showurl : true
};
【bstro】
理由：这个是封装了一个网站引导插件bootstro
效果：
看这里：http://zhidao.beiwaionline.com/
或者：
用法：
var isbstro = $.cookie(‘bootstro‘);
if(!isbstro){
qiao.bs.bstro([
[‘#md5input‘,‘<h3 style="margin-top:10px;">使用关键字检索问题或知识点~</h3>‘],
[‘.breadcrumb‘,‘<h3 style="margin-top:10px;">也可以分类检索问题知识点哟~</h3>‘],
[‘#questionsDiv‘,{content:‘<h3 style="margin-top:10px;">这里是问题知识点列表~</h3>‘,place:‘right‘}],
[‘#addQuestionLi‘,‘<h3 style="margin-top:10px;">提问，或添加知识点在这里~</h3>‘],
[‘#userRankLi‘,‘<h3 style="margin-top:10px;">用户最佳回答排行榜~</h3>‘],
[‘#userLoginLi‘,‘<h3 style="margin-top:10px;">从这里登录哦~</h3>‘]
],{
obtn : ‘我已了解，下次不再提示！‘,
exit : function(){$.cookie(‘bootstro‘,‘ok‘,{expires:30, path:‘/‘});}
});
}
【效果】
总得来说，有几点效果：
1.大大简化使用bootstrap的方法
2.封装了一些常用插件
【开源】
等时间充足，和BootstrapQ更加完善后会开源。
【更多】
更多文章请看：http://uikoo9.com/blog/list
BootstrapQ 封装Bootstrap tree，dialog等
原文地址：http://blog.csdn.net/uikoo9/article/details/42010349
