//一行俩列 md是bootstrap对响应式布局的设计 可以去看下bootstrap的栅栏布局
<div class="row">
<div class="col-md-6">
<input>
</div>
<div class="col-md-6">
<input>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrapmincss"/>
<script src="js/jquery-311js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrapminjs" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">点击我显示模态框</button>
<!-- 定义模态框触发器，此处为按钮触发 -->
<form method="post" action="indexhtml" class="form-horizontal" role="form" id="myForm" onsubmit="return ">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<!-- 定义模态框，过渡效果为淡入，id为myModal,tabindex=-1可以禁用使用tab切换，aria-labelledby用于引用模态框的标题，aria-hidden=true保持模态框在触发前窗口不可见 -->
<div class="modal-dialog">
<!-- 显示模态框对话框模型（若不写下一个div则没有颜色） -->
<div class="modal-content">
<!-- 显示模态框白色背景，所有内容都写在这个div里面 -->
<div class="btn-info modal-header">
<!-- 模态框标题 -->
<button type="button" class="close" data-dismiss="modal">×</button>
<!-- 关闭按钮 -->
<h4>您好，欢迎进入模态框</h4>
<!-- 标题内容 -->
</div>
<div class="modal-body">
<!-- 模态框内容，我在此处添加一个表单 -->
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="uname" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-9">
<input type="text" id="uname" name="uname" class="form-control well" placeholder="请输入用户名"/>
</div>
</div>
<div class="form-group">
<label for="upwd" class="col-sm-2 control-label">密码</label>
<div class="col-sm-9">
<input type="password" id="upwd" name="upwd" class="form-control well" placeholder="请输入密码"/>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<!-- 模态框底部样式，一般是提交或者确定按钮 -->
<button type="submit" class="btn btn-info">确定</button>
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
</div>
</div><!-- /modal-content -->
</div>
</div> <!-- /modal -->
</form>
</div>
</body>
</html>
开始时间：
<div class="controls input-append date form_datetime " data-date-format="yyyy-mm-dd hh:ii " data-link-field="dtp_input1"> <input id="start_time" class="form-control input-sm" size="20" type="text" value=""
readonly>
<span class="add-on"><i class="icon-remove"></i></span><span class="add-on"><i class="icon-th"></i></span>
<div>
<script type="text/JavaScript"> </div>
//时间选择器
$("form_datetime")datetimepicker({
language: "zh-CN",
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1
});
//jQuery选择器获取时间值，val()方法
$("#data")click(function(){
consolelog($("#datetime")val());
});
<script>
1）
// Get plugin instance var bootstrapValidator = $(form)data('bootstrapValidator');
// and then call method
bootstrapValidatormethodName(parameters)
这种方式获取的是BootstrapValidator的实例，可以直接调用其方法。
2）
两种方式的使用分别如下：

// The first way $(form)
data('bootstrapValidator')
updateStatus('birthday', 'NOT_VALIDATED')
validateField('birthday');
// The second one $(form)
bootstrapValidator('updateStatus', 'birthday', 'NOT_VALIDATED')
bootstrapValidator('validateField', 'birthday');

2 defaultSubmit()
使用默认的提交方式提交表单，调用此方法BootstrapValidator将不执行任何的校验。一般需要时可以放在validator校验的submitHandler属性里调用。
使用：

以上就是关于如何使用 Bootstrap 在 Form 表单一行内放多个控件并上下行对齐全部的内容，包括:如何使用 Bootstrap 在 Form 表单一行内放多个控件并上下行对齐、bootstrap模态框中表单怎么提交表单、bootstrap datetimepicker 插件怎样获取时间值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）