1、html
<form class="form-inline search-box" role="form" name="logFilter_form"> <div class="operate-wrap"> <div class="row-fluid"> <div class="form-group span12"> <label class="control-label">{{'zeus.systemLog.operationLog.resourceName'| translate}}</label> <div class="controls"> <input type="text" class="form-control resourceName" ng-model="filterData.resource"/> </div> </div> </div> <div class="row-fluid"> <div class="form-group span6"> <label class="control-label">{{'zeus.systemLog.operationLog.event_type'| translate}}</label> <div class="controls " > <select2 ng-model="filterData.event_type" s2-options="item.name as item.title for item in event_type" > </select2> </div> </div> <div class="form-group span6"> <label class="control-label">{{'zeus.systemLog.operationLog.event_status'| translate}}</label> <div class="controls "> <select2 ng-model="filterData.result" s2-options="item.name as item.title for item in result"> </select2> </div> </div> </div> <div class="row-fluid"> <div class="form-group time-picker start span6"> <label class="control-label">开始时间</label> <div class="controls"> <div class="input-group date form_date col-md-5"> <input class="form-control fromTime" name="startTime" autocomplete="off" type="text" size="16" get-timepicker ng-model="filterData.stime" ng-pattern="/^\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}$/" placeholder="{{'zeus.systemLog.click2choseStartTime'| translate}}"> <span class="input-group-addon"> <span class="glyphicon glyphicon-remove fa fa-remove"></span> </span> <span class="input-group-addon calendar-cont" get-timepicker> <span class="glyphicon glyphicon-calendar fa fa-calendar"></span> </span> <div class="error" ng-messages="logFilter_form.startTime.$error"> <div ng-message="pattern">{{'zeus.errors.systemLog.timeFormatError'| translate}}</div> </div> </div> </div> </div> <div class="form-group time-picker end span6"> <label class="control-label">结束时间</label> <div class="controls"> <div class="input-group date form_date col-md-5"> <input class="form-control endTime" name="endTime" type="text" size="16" autocomplete="off" get-timepicker ng-model="filterData.etime" ng-pattern="/^([1][7-9][0-9][0-9]|[2][0][0-9][0-9])-([0][1-9]|[1][0-2])-([0-2][1-9]|[3][0-1])\s([0-1][0-9]|[2][0-3]):([0-5][0-9]):([0-5][0-9])$/" placeholder="{{'zeus.systemLog.click2choseEndTime'| translate}}"> <span class="input-group-addon"> <span class="glyphicon glyphicon-remove fa fa-remove"></span> </span> <span class="input-group-addon calendar-cont" get-timepicker> <span class="glyphicon glyphicon-calendar fa fa-calendar"></span> </span> <div class="error" ng-messages="logFilter_form.endTime.$error"> <div ng-message="pattern">{{'zeus.errors.systemLog.timeFormatError'| translate}}</div> </div> </div> </div> </div> </div> <div class=" btn-operate"> <div class="form-group" > <button type="submit" class="btn btn-default" ng-click="queryFun()" ng-disabled="logFilter_form.$invalid">{{'zeus.systemLog.query'| translate}}</button> </div> </div> </div> </form>
2、css
.operate-wrap{ .form-group{ display: block; padding:0 5px; margin-bottom:8px; input{ border: 1px solid #dce3e5; border-radius: 7px; } .control-label{ float:left; width:80px; text-align:right; line-height:40px; margin-bottom:0; } .controls{ margin-left:90px; display:block; .form-control{ width:100%; max-width:none; box-sizing:border-box; height:40px; } .select2-container{ width:100%; a{ border: 1px solid #dce3e5; height: 35px; line-height: 35px; } span{ &.select2-arrow{ border: 1px solid #ccc; } } } } .input-group{ .input-group-addon{ display: inline-block; border: 1px solid #dce3e5; padding:0 5px; border-left: none; height: 38px; line-height: 34px; margin-left: -4px; color: #43b49e; } .calendar-cont{ border-bottom-right-radius: 5px; border-top-right-radius: 5px; } } .form_date{ position: relative; .input-group-addon{ position:absolute; right:30px; top:0; padding:0; width:30px; text-align:center; } .calendar-cont{ position:absolute; right:0; top:0; } } } .btn-operate{ margin-left:90px; .btn{ position: static; background: #43b49e; font-size: 16px; color: #fff; border-radius: 8px; border: 1px solid #43b49e; padding: 0 40px; width:auto } } }
相关推荐
用bootstrap的栅格“ coll-md- ”命令设置宽度总是不尽人意,有时上下框对不齐,有时上下宽度又不齐,这时...label class=col-sm-2 control-label no-padding-rightstyle=float:left;font-size:1em; font-family:Mic
赠送jar包:swagger-bootstrap-ui-1.9.6.jar;...使用方法:解压翻译后的API文档,用浏览器打开“index.html”文件,即可纵览文档内容。 人性化翻译,文档中的代码和结构保持不变,注释和说明精准翻译,请放心使用。
easyui-bootstrap-gh-pages.zip
压缩包里面有: 1.bootstrap-table-editable.js 2.bootstrap-editable.js 3.bootstrap-editable.css 用于bootstrap table实现x-editable的行单元格编辑
fastadmin 表格添加固定表头 bootstrap-table-fixed-columns所需插件
bootstrap-table-zh-CN.js,有需要就下载吧
如有使用疑问,联系博主 bootstrap-table-fixed-columns.css固定列 冻结列
bootstrap-table-editable.js
bootstrap最新版资源下载不易。
Java bootstrap-3.4.1-dist 前端框架
bootstrap-table-pagejump。bootstrap分页插件查询有的需要跳转到指定页面。
bootstrap-table插件:bootstrap-editable,可编辑下拉框,以及代码实例,
在原bootstrap-table-fixed-columns的基础上,解决了冻结列后,排序失效、列宽错位和合并行失效问题
用于bootstrap数据表格的导出插件,在引入bootstrap其他主要js和css的前提下,再将bootstrap-table-export.js和tableExport.js引入
FastAdmin使用bootstrap-table作为前端表格的基础组件库,通常列表交互展示已经够用了,包括通用搜索、排序、分页、导出、合并相同行/列等等。最近需要对表头进行冻结,找到了bootstrap-table-fixed-columns组件(也...
压缩包里面有: 1.bootstrap-table-editable.js 2.bootstrap-editable.js 3.bootstrap-editable.css 用于bootstrap table实现x-editable的行单元格编辑
startbootstrap-sb-admin-gh-pages 免费模板 ,可以根据模板搭建自己的页面
startbootstrap-sb-admin-2-1.0.5 管理界面风格