Bootstrap3.0建站教程(一)之bootstrap表单元素排版

更新时间：2016年06月01日 15:30:53 作者：下一秒_待续

本文给大家介绍Bootstrap3.0建站教程(一)之bootstrap表单元素排版，本文给大家列举了文字和输入框前后排列和上下排列的实例代码，有需要的朋友参考下吧

1、文字和输入框前后排列：

代码：

<div class="row"> 
<div class="col-lg-12"> 
<div class="panel panel-default"> 
<div class="panel-heading"> 
<h2>条件查找</h2> 
</div> 
<div class="panel-body"> 
<div class="row"> 
<div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12"> 
<div class="form-horizontal"> 
<div class="form-group"> 
<div class="col-md-4 control-label" for="select">归属地</div> 
<div class="col-md-4"> 
<asp:DropDownList ID="ddlsheng" DataTextField="name" DataValueField="id" runat="server" 
AutoPostBack="True" OnSelectedIndexChanged="ddlsheng_SelectedIndexChanged" CssClass="form-control"> 
<asp:ListItem Value="0">全国</asp:ListItem> 
</asp:DropDownList> 
</div> 
<div class="col-md-4"> 
<asp:ScriptManager ID="ScriptManager1" runat="server"> 
</asp:ScriptManager> 
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> 
<ContentTemplate> 
<asp:DropDownList ID="ddlshi" DataTextField="name" DataValueField="id" runat="server" 
AutoPostBack="True" CssClass="form-control"> 
</asp:DropDownList> 
</ContentTemplate> 
<Triggers> 
<asp:AsyncPostBackTrigger ControlID="ddlsheng" EventName="SelectedIndexChanged" /> 
</Triggers> 
</asp:UpdatePanel> 
</div> 
</div> 
</div> 
</div> 
<div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12"> 
<div class="form-horizontal"> 
<div class="form-group"> 
<div class="col-md-4 control-label" for="select">余额</div> 
<div class="col-md-4"> 
<input type="text" class="form-control" runat="server" id="Balance_start" name="Balance_start" /> 
</div> 
<div class="col-md-4"> 
<input type="text" class="form-control" runat="server" id="Balance_end" name="Balance_end" /> 
</div> 
</div> 
</div> 
</div> 
<div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12"> 
<div class="form-horizontal"> 
<div class="form-group"> 
<div class="col-md-4 control-label" for="select">是否VIP</div> 
<div class="col-md-4"> 
<asp:DropDownList ID="select_IsVIP" runat="server" 
AutoPostBack="True" CssClass="form-control"> 
<asp:ListItem Value="-1">全部</asp:ListItem> 
<asp:ListItem Value="0">是</asp:ListItem> 
<asp:ListItem Value="1">否</asp:ListItem> 
</asp:DropDownList> 
</div> 
<div class="col-md-4"> 
</div> 
</div> 
</div> 
</div> 
</div> 
<div class="row"> 
<div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12"> 
<div class="form-horizontal"> 
<div class="form-group"> 
<div class="col-md-4 control-label" for="select">日期</div> 
<div class="col-md-4"> 
<input type="text" id="txtfrom" runat="server" class="form-control" placeholder="选择开始日期" onfocus="WdatePicker({dateFmt:'yyyy/MM/dd'})"> 
</div> 
<div class="col-md-4"> 
<input type="text" id="txtto" runat="server" class="form-control" placeholder="选择结束日期" onfocus="WdatePicker({dateFmt:'yyyy/MM/dd'})"><%--,minDate:'%y-%M-%d %H:%m:%s'--%> 
</div> 
</div> 
</div> 
</div> 
<div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12"> 
<div class="form-horizontal"> 
<div class="form-group"> 
<div class="col-md-4 control-label" for="select">代驾次数</div> 
<div class="col-md-4"> 
<input type="text" class="form-control" runat="server" id="daijicount_start" name="daijicount_start" /> 
</div> 
<div class="col-md-4"> 
<input type="text" class="form-control" runat="server" id="daijicount_end" name="daijicount_end" /> 
</div> 
</div> 
</div> 
</div> 
<div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12"> 
<div class="form-horizontal"> 
<div class="form-group"> 
<div class="col-md-4 control-label" for="select">生日月份</div> 
<div class="col-md-4"> 
<asp:DropDownList ID="BirthdayMonth" runat="server" 
AutoPostBack="True" CssClass="form-control"> 
<asp:ListItem Value="0">全部</asp:ListItem> 
<asp:ListItem Value="1">1月</asp:ListItem> 
<asp:ListItem Value="2">2月</asp:ListItem> 
<asp:ListItem Value="3">3月</asp:ListItem> 
<asp:ListItem Value="4">4月</asp:ListItem> 
<asp:ListItem Value="5">5月</asp:ListItem> 
<asp:ListItem Value="6">6月</asp:ListItem> 
<asp:ListItem Value="7">7月</asp:ListItem> 
<asp:ListItem Value="8">8月</asp:ListItem> 
<asp:ListItem Value="9">9月</asp:ListItem> 
<asp:ListItem Value="10">10月</asp:ListItem> 
<asp:ListItem Value="11">11月</asp:ListItem> 
<asp:ListItem Value="12">12月</asp:ListItem> 
</asp:DropDownList> 
</div> 
<div class="col-md-4"> 
</div> 
</div> 
</div> 
</div> 
</div> 
<div class="row"> 
<div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12"> 
<div class="form-horizontal"> 
<div class="form-group"> 
<div class="col-md-4 control-label" for="select">跟踪状态</div> 
<div class="col-md-4"> 
<asp:DropDownList ID="TrackingState" runat="server" AutoPostBack="True" CssClass="form-control"> 
<asp:ListItem Value="-1">全部</asp:ListItem> 
<asp:ListItem Value="0">有意向</asp:ListItem> 
<asp:ListItem Value="1">无意向</asp:ListItem> 
</asp:DropDownList> 
</div> 
<div class="col-md-4"> 
</div> 
</div> 
</div> 
</div> 
<div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12"> 
<div class="form-horizontal"> 
<div class="form-group"> 
<div class="col-md-4 control-label" for="select">再联系时间</div> 
<div class=" col-md-8 "> 
<input type="text" id="NextContactDate" runat="server" class="form-control" placeholder="选择日期" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"> 
</div> 
</div> 
</div> 
</div> 
<div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12"> 
<div class="form-horizontal"> 
<div class="form-group"> 
<div class="col-md-4 control-label" for="select">集团用户</div> 
<div class="col-md-4"> 
<asp:DropDownList ID="GroupUser" runat="server" AutoPostBack="True" CssClass="form-control"> 
<asp:ListItem Value="-1">全部</asp:ListItem> 
<asp:ListItem Value="0">个人用户</asp:ListItem> 
<asp:ListItem Value="1">集团用户</asp:ListItem> 
</asp:DropDownList> 
</div> 
<div class="col-md-4"> 
</div> 
</div> 
</div> 
</div> 
</div> 
<div class="row"> 
<div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12"> 
<div class="form-horizontal"> 
<div class="form-group"> 
<div class="col-md-4 control-label" for="select">客户类型</div> 
<div class="col-md-4"> 
<asp:DropDownList ID="CustomersType" runat="server" AutoPostBack="True" CssClass="form-control"> 
<asp:ListItem Value="0">全部</asp:ListItem> 
<asp:ListItem Value="1">预付用户</asp:ListItem> 
<asp:ListItem Value="2">推荐用户</asp:ListItem> 
<asp:ListItem Value="3">普通用户</asp:ListItem> 
<asp:ListItem Value="4">定额合约后付费商户</asp:ListItem> 
<asp:ListItem Value="5">非定额后付费合约商户</asp:ListItem> 
</asp:DropDownList> 
</div> 
<div class="col-md-4"> 
</div> 
</div> 
</div> 
</div> 
<div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12"> 
<div class="form-horizontal"> 
<div class="form-group"> 
<div class="col-md-3 control-label" for="select" >开票</div> 
<div class="col-md-3" > 
<asp:DropDownList ID="ddl_Invoice" runat="server" AutoPostBack="True" CssClass="form-control"> 
<asp:ListItem Value="-1">全部</asp:ListItem> 
<asp:ListItem Value="1">已开发票</asp:ListItem> 
<asp:ListItem Value="0">未开发票</asp:ListItem> 
</asp:DropDownList> 
</div> 
<div class="col-md-3 control-label" for="select">标记</div> 
<div class="col-md-3"> 
<asp:DropDownList ID="ddlRemark" runat="server" 
CssClass="form-control" > 
<asp:ListItem Value="0">全部</asp:ListItem> 
<asp:ListItem Value="1">空号</asp:ListItem> 
<asp:ListItem Value="2">通话中</asp:ListItem> 
<asp:ListItem Value="3">拒接</asp:ListItem> 
<asp:ListItem Value="4">无人接听</asp:ListItem> 
<asp:ListItem Value="5">停机</asp:ListItem> 
<asp:ListItem Value="6">非本人</asp:ListItem> 
<asp:ListItem Value="7">不需要</asp:ListItem> 
<asp:ListItem Value="8">酒店</asp:ListItem> 
<asp:ListItem Value="9">E代驾</asp:ListItem> 
<asp:ListItem Value="10">重复数据</asp:ListItem> 
<asp:ListItem Value="11">其他</asp:ListItem> 
</asp:DropDownList> 
</div> 
</div> 
</div> 
</div> 
<div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12"> 
<div class="form-horizontal"> 
<div class="form-group"> 
<div class="col-md-4 control-label">关键字</div> 
<div class="col-md-4"> 
<input type="text" class="form-control" runat="server" id="keyword" name="keyword" /> 
</div> 
<div class="col-md-4"> 
<asp:Button ID="btnSearch" runat="server" Text=" 筛 选 " CssClass="btn btn-success col-md-12 " OnClick="btnSearch_Click"/> 
</div> 
</div> 
</div> 
</div> 
</div> 
<!--查询 按钮--> 
</div> 
</div> 
</div> 
<!--/col--> 
</div> 
<!--/条件查找-->

2、文字和输入框上下排列：

代码：

<div class="row"> <div class="form-group col-sm-4"> 
<div>司机姓名</div> 
<asp:TextBox ID="txt_DriverName" runat="server" class="form-control "></asp:TextBox> 
</div> 
<div class="form-group col-sm-4"> 
<div>司机工号</div> 
<asp:TextBox ID="txt_Ucode" runat="server" class="form-control "></asp:TextBox> 
</div> 
<div class="form-group col-sm-2"> 
<div>归属地</div> 
<asp:DropDownList ID="ddlshengAdd" runat="server" CssClass="form-control " OnSelectedIndexChanged="ddlshengAdd_SelectedIndexChanged" AutoPostBack="true"> 
<asp:ListItem Value="0">全省</asp:ListItem> 
</asp:DropDownList> 
</div> 
<div class="form-group col-sm-2"> 
<asp:ScriptManager ID="ScriptManager1" runat="server"> 
</asp:ScriptManager> 
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> 
<ContentTemplate> 
<label></label> 
<asp:DropDownList ID="ddlshiAdd" DataTextField="name" DataValueField="id" runat="server" CssClass="form-control "></asp:DropDownList> 
</ContentTemplate> 
<Triggers> 
<asp:AsyncPostBackTrigger ControlID="ddlshengAdd" EventName="SelectedIndexChanged" /> 
</Triggers> 
</asp:UpdatePanel> 
</div> 
</div>

以上内容是小编给大家介绍的Bootstrap3.0建站教程(一)之bootstrap表单元素排版的相关知识，希望对大家有所帮助！

您可能感兴趣的文章:

浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
下面小编就为大家分享一篇浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结。小编觉得写的非常不错，需要的朋友可以过来参考一下
2016-03-03
JavaScript常见错误：“无法读取未定义的属性”的原因及解决方案
本文将深入探讨“无法读取未定义的属性”这一常见JavaScript错误,分析其成因,提供详细的解决方案和最佳实践,帮助开发者有效地预防和修复此类问题,感兴趣的小伙伴跟着小编一起来看看吧
2024-12-12
JavaScript判断DIV内容是否为空的方法
整体思路是这样的：判断div内部是否为空，如果为空，给出无数据提示；否则显示正常页面，下面给大家分享js判断div内容是否为空的方法，对判断div内容是否为空的相关知识感兴趣的朋友一起学习吧
2016-01-01
JavaScript组件焦点与页内锚点间传值的方法
这篇文章主要介绍了JavaScript组件焦点与页内锚点间传值的方法,涉及输入框与锚点的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-02-02
three.js 制作动态二维码的示例代码
这篇文章主要介绍了three.js 制作动态二维码的示例代码，文中讲解非常细致，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
2020-07-07
利用js-cookie实现前端设置缓存数据定时失效
这篇文章主要介绍了利用js-cookie实现前端设置缓存数据定时失效，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-06-06
js实现中文实时时钟
这篇文章主要为大家详细介绍了js实现中文实时时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01
js滑动提示效果代码分享
这篇文章主要为大家分享了js滑动提示效果代码，实现方法简单，感兴趣的小伙伴们可以参考一下
2016-03-03
JS/jQuery实现获取时间的方法及常用类完整示例
这篇文章主要介绍了JS/jQuery实现获取时间的方法及常用类,结合完整实例形式分析了javascript针对日期时间的获取、转换、计算与检测相关操作技巧,需要的朋友可以参考下
2019-03-03
JavaScript jquery及AJAX小结
其实在学习之前，就已经用上了js，jquery和ajax，不过当时不清楚这些的区别，就全都当成js来看，然后别人一说jquery，ajax都觉得好像很高级，等到自己学习的时候，倒是对这些更清楚了一点，下面就来写一下我的总结
2016-01-01

Bootstrap3.0建站教程(一)之bootstrap表单元素排版

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具