BootStarp 小总结

引用文件

<!-- Bootstrap 插件 css -->
    <link href="<%=request.getContextPath() %>/js/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
    <!-- Bootstrap 核心css -->
    <link href="<%=request.getContextPath() %>/js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <!-- Bootstrap TreeView css -->
    <link href="<%=request.getContextPath() %>/js/bootstrap-treeview/dist/bootstrap-treeview.min.css" rel="stylesheet">
    
       <!-- Bootstrap addTabs css -->
    <link href="<%=request.getContextPath() %>/js/bootStrap-addTabs/bootstrap.addtabs.css" rel="stylesheet">
  
     <!-- Bootstrap table css -->
    <link href="<%=request.getContextPath() %>/js/bootstrap-table/dist/bootstrap-table.css" rel="stylesheet">
   <!-- bootstrap-datetimepicker css -->
    <link href="<%=request.getContextPath() %>/js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css" rel="stylesheet">
   
     <!-- bootstrap-dialog css -->
    <link href="<%=request.getContextPath() %>/js/bootstrap-dialog/dist/css/bootstrap-dialog.css" rel="stylesheet">
     <!-- bootstrap-fileinput css -->
    <link href="<%=request.getContextPath() %>/js/bootstrap-fileinput/css/fileinput.css" rel="stylesheet">  
    <style type="text/css">
      .navbar{
         height: 60px;
         background: black;
      
      }
      .layout{
        padding-top: 60px;
        position: relative;
        
      }
    
    </style>

<!--jQuery核心js  -->
    <script src="<%=request.getContextPath() %>/js/jquery.min.js"></script>
    <!-- bootstrap 核心js文件 -->
    <script src="<%=request.getContextPath() %>/js/bootstrap/js/bootstrap.min.js"></script>
    <!-- bootStrap TreeView -->
    <script src="<%=request.getContextPath() %>/js/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
    
    <!-- bootStrap addTabs -->
    <script src="<%=request.getContextPath() %>/js/bootStrap-addTabs/bootstrap.addtabs.js"></script>
    
    <!-- bootStrap table -->
    <script src="<%=request.getContextPath() %>/js/bootstrap-table/dist/bootstrap-table.js"></script>
    <!-- bootStrap table 语言包中文-->
    <script src="<%=request.getContextPath() %>/js/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>
    
    <!-- bootstrap-datetimepicker -->
    <script src="<%=request.getContextPath() %>/js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
    <script src="<%=request.getContextPath() %>/js/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    
     <!-- bootstrap-dialog -->
    <script src="<%=request.getContextPath() %>/js/bootstrap-dialog/dist/js/bootstrap-dialog.js"></script>
     <!-- bootstrap-fileinput -->
    <script src="<%=request.getContextPath() %>/js/bootstrap-fileinput/js/fileinput.js"></script>
    <script src="<%=request.getContextPath() %>/js/bootstrap-fileinput/js/locales/zh.js"></script>

 

 

一 添加下拉框 

     <select class="form-control" id="fileType">
          <option value="0">请选择</option>
          <option value="1">技术</option>
          <option value="2">小说</option>
          <option value="3">摘要</option>
        </select>

二 文本框 以及 My97区间查询

	<div class="panel-group" id="panel-59632">
				<div class="panel panel-default">
					<div class="panel-heading">
						 <a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-59632" href="#panel-element-1525">高级搜索</a>
					</div>
					<div id="panel-element-1525" class="panel-collapse collapse">
						<div class="panel-body" align="center">
							商品名称:<input type="text" name="sname" id="sname">
							<br>
							<br>
							库存数量:<input type="text" name="kucun1" id="kucun1"/>~
								  <input type="text" name="kucun2" id="kucun2"/>
							<br>
							<br>
							入库时间:<input id="d4311" class="Wdate" type="text" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4312\')||\'2030-10-01\'}'})"/>~
								  <input id="d4312" class="Wdate" type="text" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d4311\')}',maxDate:'2030-10-01'})"/>
							<br>
							<br>
							  <button type="button" class="btn btn-block btn-primary btn-default" onclick="search()">搜索</button>
						</div>
					</div>
				</div>
			</div>

三 表格

js代码
function search(){
     $("#emp-table").bootstrapTable("refresh",{'pageNumber':1});
}
$(function(){
    $("#emp-table").bootstrapTable({
        url:"<%=request.getContextPath()%>/test!queryEmpPage.action",
        striped: true,//隔行变色
        showColumns:true,//是否显示 内容列下拉框
        showPaginationSwitch:true,//是否显示 数据条数选择框
        minimumCountColumns:1,//最小留下一个
        showRefresh:true,//显示刷新按钮
        showToggle:true,//显示切换视图
        
//          search:true,//是否显示搜索框
//        searchOnEnterKey:true,//设置为 true时，按回车触发搜索方法，否则自动触发搜索方法
         pagination:true,//开启分页
         paginationLoop:true,//开启分页无限循环
         pageNumber:1,//当前页数
         pageSize:2,//每页条数
         pageList:[1,2,3,4],//如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
         sidePagination:"server",//
        method:'post',//发送请求的方式
        contentType:"application/x-www-form-urlencoded",//必须的否则条件查询时会乱码
        queryParams:function(){
               var name= $("#empName").val();
                var sex = $("#sex").val();
//                 alert(name+","+sex);
//                 return 的数据 是传递到  action类中的参数
                return {
                    "emp.empname":name,
                    "emp.sex":sex,
                    page:this.pageNumber,//当前页
                    rows:this.pageSize //每页条数
                 }
           },
        columns: [
         {
             checkbox:true,
        },{
            field: 'empid',
            title: '编号',
            idField:true,
            width: 100
        },{
            field: 'empname',
            title: '姓名',
            width: 100
        },{
            field: 'password',
            title: '密码',
            width: 100
           
        },{
            field: 'telphone',
            title: '手机号',
            width: 100
           
        },{
            field: 'birthday',
            title: '生日',
            width: 100
        },{
            field: 'sex',
            title: '性别',
            width: 100,
            formatter:function(value,row,index){
               return value == 0 ?'女':'男';
            }
        }]
    })
})

四 form表单

	<form class="form-horizontal" role="form" id="biao">
  <div class="form-group">
    <label for="firstname" class="col-sm-2 control-label">商品名称</label>
    <div class="col-sm-10">
    <input type="hidden" class="form-control" id="shangpin" value="${bao.shangpin.sid}">${bao.shangpin.sname}
    </div>
  </div>
  <div class="form-group">
    <label for="lastname" class="col-sm-2 control-label">当前库存</label>
    <div class="col-sm-10">
    <input type="hidden" class="form-control" id="kucun" value="${bao.kuid}">${bao.kucun.kucun}
    </div>
  </div>
  <div class="form-group">
      <label for="lastname" class="col-sm-2 control-label">报损数量</label>
    <div class="col-sm-10">
    <input type="hidden" class="form-control" id="bcount" value="${bao.bcount}">${bao.bcount}
    </div>
  </div>
  <div class="form-group">
    <label for="lastname" class="col-sm-2 control-label">报损原因</label>
    <div class="col-sm-10">
    <input type="hidden" class="form-control" id="byuanyin" value="${bao.byuanyin}">${bao.byuanyin}
    </div>
  </div>
</form>

五 导航

<div class="container">
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">作业作业作业!!!!</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>
</div>

六 选项卡的左右布局

	<div class="row clearfix">
		<div class="col-md-4 column">
			<div id="tree1"> </div>
		</div>
		<div class="col-md-8 column">
		  <ul id="myTab" class="nav nav-tabs">
                        <li >
                            <a href="#home" data-toggle="tab"> 首页</a>
                        </li>
                    </ul>
                    <!--想要打开tab页内容，需要把对应的ul和要打开的内容tab放在一个div里  -->
                    <div class="tab-content"></div>
		</div>

七 选中复选框选中的值

 var a= $("#file-table").bootstrapTable('getSelections'); 
 var ids="";
		 if(a.length>=1){  
			 
			 for (var i = 0; i < a.length; i++) {
				ids += ','+a[i].bId;
			}
			 idStr = ids.substr(1)
			 location.href="<%=request.getContextPath()%>/ofo/deleteAll.do?ids="+idStr
		 }else{
			 alert("请选中一行")
		}  

八 手风琴

<div class="container">
	<div class="row clearfix">
		<div class="col-md-12 column">
			<div class="panel-group" id="panel-926132">
				<div class="panel panel-default">
					<div class="panel-heading">
						 <a class="panel-title" data-toggle="collapse" data-parent="#panel-926132" href="#panel-element-450393">Collapsible Group Item #1</a>
					</div>
					<div id="panel-element-450393" class="panel-collapse in">
						<div class="panel-body">
							Anim pariatur cliche...
						</div>
					</div>
				</div>
				<div class="panel panel-default">
					<div class="panel-heading">
						 <a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-926132" href="#panel-element-124440">Collapsible Group Item #2</a>
					</div>
					<div id="panel-element-124440" class="panel-collapse collapse">
						<div class="panel-body">
							Anim pariatur cliche...
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>