Boostrap学习心得
进入新公司，前端用到各种页面元素几乎都是bootStrap框架里的，下面介绍下某些页面控件怎么运用，作为知识点备份，提供有需要人观看；
首先下载bootstrap，地址http://www.bootcss.com/；
日期/时间控件
名称: laydate-master 官网: http://sentsin.com/layui/laydate 页面中需要引入的文件: <script src="js/laydate-master/laydate.js"></script> 使用示例: <input class="col-xs-6 date_picker for_workitem laydate-icon" id="endDate" type="text" class="input_select form-control"
onclick="laydate({istime: false, format: 'YYYY-MM-DD'})"> 备注: 1.此控件不依赖jQuery 2.如需使用时间选项，配置{istime:true}
树控件
名称:bootstrap tree view
官网:https://github.com/jonmiles/bootstrap-treeview
页面中需要引入的文件:
<link rel="stylesheet" href="style/bootstrap.min.css">
<link rel="stylesheet" href="style/bootstrap-treeview.min.css">
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap-treeview.min.js"></script>
json数据示例：
var tree = [
{
text: "Parent 1",
nodes: [
{
text: "Child 1",
nodes: [
{
text: "Grandchild 1"
},
{
text: "Grandchild 2"
}
]
},
{
text: "Child 2"
}
]
},
{
text: "Parent 2"
},
{
text: "Parent 3"
},
{
text: "Parent 4"
},
{
text: "Parent 5"
}
]
使用示例:
<div class="admin_table">
<div id="tree">
</div>
</div>
$('#tree').treeview(data : tree);
文本编辑器
名称:bootstrap-wysiwyg
官网:http://github.com/mindmup/bootstrap-wysiwyg
页面中需要引入的文件:
<link rel="stylesheet" href="style/bootstrap.min.css">
<link rel="stylesheet" href="style/editor/font-awesome.css">
<link rel="stylesheet"
href="style/datepicker/css/bootstrap-datepicker.min.css">
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/editor/external/jquery.hotkeys.js"></script>
<script src="js/jquery-ui-1.9.2.min.js"></script>
<script src="js/editor/external/google-code-prettify/prettify.js"></script>
<script src="js/editor/bootstrap-wysihtml5.js"></script>
<script src="js/editor/bootstrap-wysihtml5-locales/bootstrap-wysihtml5.zh-CN.js"></script>
<script src="js/editor/bootstrap-wysiwyg.js"></script>
使用示例:
<div class="container">
<div class="btn-toolbar col-sm-12" data-role="editor-toolbar"
data-target="#editor">
<div class="btn-group ">
<a class="btn dropdown-toggle font_size_select" data-toggle="dropdown" title="字体大小"><i class="icon-text-height"></i> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a data-edit="fontSize 5"><font size="5">大</font></a></li>
<li><a data-edit="fontSize 3"><font size="3">中</font></a></li>
<li><a data-edit="fontSize 1"><font size="1">小</font></a></li>
</ul>
</div>
<div class="btn-group">
<a class="btn" data-edit="bold" title="加粗 (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
<a class="btn" data-edit="italic" title="斜体 (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
<a class="btn" data-edit="strikethrough" title="横线"><i class="icon-strikethrough"></i></a>
<a class="btn" data-edit="underline" title="下划线 (Ctrl/Cmd+U)"><i class="icon-underline"></i></a>
</div>
<div class="btn-group">
<a class="btn" data-edit="insertunorderedlist" title="无序列表"><i class="icon-list-ul"></i></a>
<a class="btn" data-edit="insertorderedlist" title="有序列表"><i class="icon-list-ol"></i></a>
<a class="btn" data-edit="outdent" title="减少缩进 (Shift+Tab)"><i class="icon-indent-left"></i></a>
<a class="btn" data-edit="indent" title="增加缩进 (Tab)"><i class="icon-indent-right"></i></a>
</div>
<div class="btn-group">
<a class="btn" data-edit="justifyleft" title="左对齐 (Ctrl/Cmd+L)"><i class="icon-align-left"></i></a>
<a class="btn" data-edit="justifycenter" title="居中 (Ctrl/Cmd+E)"><i class="icon-align-center"></i></a>
<a class="btn" data-edit="justifyright" title="右对齐 (Ctrl/Cmd+R)"><i class="icon-align-right"></i></a>
<a class="btn" data-edit="justifyfull" title="平铺 (Ctrl/Cmd+J)"><i class="icon-align-justify"></i></a>
</div>
</div>
<div id="editor" class="col-sm-12"></div>
</div>
$('#editor').wysiwyg();
选择(select)控件
名称: bootstrap-select
官网: http://silviomoreto.github.io/bootstrap-select
页面中需要引入的文件:
<link rel="stylesheet" href="style/bootstrap-select.min.css">
<script src="js/bootstrap-select.min.js"></script>
<script src="js/defaults-zh_CN.min.js"></script>
使用示例:
$('select').selectpicker({
style:'btn-inverse',
width:'80%'
});
修改select值，必须要$('select').selectpicker('refresh');
示例页面:modules/overview/workwindow.jsp
表格控件
名称: bootstrap-table
官网: https://github.com/wenzhixin/bootstrap-table/
页面中需要引入的文件:
<link rel="stylesheet" href="style/bootstrap.min.css">
<link rel="stylesheet" href="style/bootstrap-table.min.css">
<link rel="stylesheet" href="style/bootstrap-treeview.min.css">
<script src="js/bootstrap-table.min.js"></script>
使用示例:
<table id="table0" ></table>
var tableConfig = {
data:[],
pagination: false,
pageSize: 11,
smartDisplay: true,
columns: [{
field: 'col1',
title: '字段1'
},{
field: 'col2',
title: '字段2'
},{
field: 'operate',
title: '操作',
formatter: function (value, row, index) {
}
}
],
onClickRow :function(row){
},
formatLoadingMessage:function () {
return "加载中，请稍候..."
},
formatShowingRows: function (pageFrom, pageTo, totalRows) {
return '显示'+pageFrom+'到'+pageTo+'条 '+'共'+totalRows+'条记录'
},
formatRecordsPerPage: function (pageNumber) {
return '每页 ' + pageNumber + '条记录';
}
}
表格初始化：$('#table0').bootstrapTable(tableConfig);
表格加载数据：
var tabledata = [{"col1":"1","col2":"2","col3":"3"}];
$('#table0').bootstrapTable('load', tabledata);
tab控件（此为easyUi中，暂在此列举）
名称: jQuery EasyTabs
官网: https://github.com/JangoSteve/jQuery-EasyTabs
页面中需要引入的文件: <script src="js/jquery.easytabs.min.js"></script>
使用示例: $('.your_class').easytabs();
示例页面: modules/overview/workwindow.jsp
备注: 使用示例中的'.your_class' 必须包住包括导航条和子页面在内的全部html内容。具体参见示例页面
上传图片进度条控件
名称: jQuery UI progressbar
官网: http://api.jqueryui.com/progressbar/
页面中需要引入的文件:
<link rel="stylesheet" href="style/bootstrap.min.css">
<script src="js/jquery-1.10.1.min.js"></script>
使用示例:
html部分, body中的任意位置加入
<div class="progress progress-striped active" style="width: 70%;position: absolute;top: 33%;left: 16%;display: none;z-index: 100">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 100%;">
<span class="sr-only">40% 完成</span>
</div>
</div>
js部分
$(".progress-striped").css("display","block");
$(".progress-bar-success").css("width","100%");
种桃道士归何处，前度刘郎今又来。
