利用bootstrap栅格系统编写input、select、textarea、日历等
一、bootstrap栅格系统
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
Bootstrap 栅格系统的工作原理：
“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。通过“行（row）”在水平方向创建一组“列（column）”。
二、案例
由于本人工作中经常接触到表格表单之类的页面，所以下面案例中以固定宽度（min-width:1000px;）来编写代码，实现的效果并不是响应式的，童鞋们看仔细了。代码及效果图如下：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap栅格系统案例</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-datetimepicker.min.css"/>
<!--umeditor -->
<link href="js/umeditor1_2_2-utf8-net/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/umeditor1_2_2-utf8-net/third-party/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/umeditor1_2_2-utf8-net/umeditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="js/umeditor1_2_2-utf8-net/umeditor.min.js"></script>
<script type="text/javascript" src="js/umeditor1_2_2-utf8-net/lang/zh-cn/zh-cn.js"></script>
<style type="text/css">
.BootstrapDemo {
padding: 20px;
min-width: 1000px;
}
.container .row {
margin-bottom: 10px;
}
.container .row label {
line-height: 30px;
font-weight: normal;
}
.container .row input,
.container .row select {
height: 30px;
line-height: 30px;
}
.container .row input,
.container .row select,
.container .row textarea {
margin-left: 0px;
width: 25%;
padding: 3px;
}
.must {
color: #FF0000;
font-size: 15px;
margin-right: 5px;
}
.BootstrapDemo .edui-container .edui-editor-body {
overflow-y: auto;height: 200px;z-index: 999999;
}
</style>
</head>
<body>
<div class="container BootstrapDemo">
<div class="row">
<label for="" class="col-xs-2 col-sm-2" style="text-align: right;">
<span class="must">*</span>姓名 ：
</label>
<input type="text" class="col-xs-4 col-sm-4" id='' title="姓名" />
<label for="" class="col-xs-2 col-sm-2" style="text-align: right;">
<span class="must">*</span>联系方式 ：
</label>
<input type="text" class="col-xs-4 col-sm-4" id='' title="联系方式" />
</div>
<div class="row">
<label for="" class="col-xs-2 col-sm-2" style="text-align: right;">姓名 ： </label>
<input type="text" class="col-xs-4 col-sm-4" id='' title="姓名" />
<label for="" class="col-xs-2 col-sm-2" style="text-align: right;">性别 ： </label>
<select name="" class="col-xs-4 col-sm-4">
<option value="">男</option>
<option value="">女</option>
</select>
</div>
<div class="row">
<label for="" class="col-xs-2 col-sm-2" style="text-align: right;">日期 ： </label>
<div class="col-xs-4 col-sm-4" style="padding:0px;float:left;width:25%;">
<div class="input-group date form_date">
<input class="form-control data-control date-from" size="100" type="text"
style="padding:3px;width:100%" id='' value="" title="日期" >
<span class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</span>
</div>
</div>
<label for="" class="col-xs-2 col-sm-2" style="text-align: right;">性别 ： </label>
<div class="col-xs-4 col-sm-4" style="margin-top: 5px;padding: 0;">
<input type="radio" class="col-xs-1 col-sm-1" checked="checked" id='radio1' title="男"
style="width: 15px;margin: -5px 5px 0 0;"/>
<span style="display: inline-block;float: left;">男</span>
<input type="radio" class="col-xs-1 col-sm-1" id='radio2' title="女"
style="width: 15px;margin: -5px 5px 0 20px;"/>
<span style="display: inline-block;float: left;">女</span>
</div>
</div>
<div class="row">
<label for="" class="col-xs-2 col-sm-2" style="text-align: right;">数量1 ：</label>
<input type="text" class="col-xs-2 col-sm-2" id='' title="数量1" style="margin-left:0px;width:11.2%;"/>
<label for="" class="col-xs-2 col-sm-2" style="text-align: right;">数量2 ： </label>
<input type="text" class="col-xs-2 col-sm-2" id='' title="数量2" style="margin-left:0px;width:11.2%;"/>
<label for="" class="col-xs-2 col-sm-2" style="text-align: right;">数量3 ： </label>
<input type="text" class="col-xs-2 col-sm-2" id='' title="数量3" style="margin-left:0px;width:11.2%;"/>
</div>
<div class="row">
<label for="" class="col-xs-2 col-sm-2" style="text-align: right;">地址 ：</label>
<input type="text" class="col-xs-4 col-sm-4" style="width: 67%;" id='' title="地址" />
</div>
<div class="row">
<label for="" class="col-xs-2 col-sm-2" style="text-align: right;">备注 ：</label>
<textarea class="col-xs-4 col-sm-4" style="width: 67%;height: 80px;padding: 3px;" title="备注" ></textarea>
</div>
<!--利用百度富文本编辑器-->
<div class="row">
<label for="" class="col-xs-2 col-sm-2" style="text-align: right;">备注：</label>
<div class="col-xs-10 col-sm-10 " style="width: 67.5%;height: 200px;padding: 3px;" >
<script type="text/plain" id="REMARK" style="width: 100%;height: 200px; text-align: left"></script>
</div>
</div>
</div>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap/js/bootstrap-datetimepicker.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap/js/bootstrap-datetimepicker.fr.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap/js/bootstrap-datetimepicker.zh-CN.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//实例化编辑器
var um1 = UM.getEditor('REMARK');
//日历
$('.form_date').datetimepicker({
language: 'zh-CN', //显示
format: 'yyyy-mm-dd hh:ii:ss', //显示格式年-月-日
minView: 0, //设置只显示到月份
weekStart: 0,//一周从周日开始
todayBtn: 1,//显示今日按钮
autoclose: 1,//选中自动关闭
todayHighlight: 1,//高亮当前日期
startView: 2,//0 or 'hour' 为小时视图；
//1 or 'day' 为天视图；
//2 or 'month' 为月视图（为默认值）；
//3 or 'year' 为年视图；
//4 or 'decade' 为十年视图
minView: 2,
forceParse: 0//当选择器关闭的时候，是否强制解析输入框中的值。
});
$("input[type='radio']").click(function(){
$(this).attr("checked","checked").siblings().removeAttr("checked");
});
});
</script>
</body>
</html>效果图：
备注我用了两种方法写的，一种是textarea，另一种是百度富文本编辑器，大家可以根据自己的需要来选择，代码仅供参考。
bootstrap栅格系统详细使用请参考：https://v3.bootcss.com/css/#grid
扫一扫
98
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
