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',
		'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=" 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=" 100%;">
      <span class="sr-only">40% 完成</span>
    </div> 
    </div>	
    js部分
    $(".progress-striped").css("display","block");
	$(".progress-bar-success").css("width","100%");