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


代码：

  1.  <div class="row">
  2.         <div class="col-lg-12">
  3.             <div class="panel panel-default">
  4.                 <div class="panel-heading">
  5.                     <h2>条件查找</h2>
  6.                 </div>
  7.                 <div class="panel-body">
  8.                     <div class="row">
  9.                         <div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12">
  10.                             <div class="form-horizontal">
  11.                                 <div class="form-group">
  12.                                     <div class="col-md-4 control-label" for="select">归属地</div>
  13.                                     <div class="col-md-4">
  14.                                         <asp:DropDownList ID="ddlsheng" DataTextField="name" DataValueField="id" runat="server"
  15.                                             AutoPostBack="True" OnSelectedIndexChanged="ddlsheng_SelectedIndexChanged" CssClass="form-control">
  16.                                              <asp:ListItem Value="0">全国</asp:ListItem>
  17.                                         </asp:DropDownList>
  18.                                     </div>
  19.                                     <div class="col-md-4">
  20.                                         <asp:ScriptManager ID="ScriptManager1" runat="server">
  21.                                         </asp:ScriptManager>
  22.                                         <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
  23.                                             <ContentTemplate>
  24.                                                 <asp:DropDownList ID="ddlshi" DataTextField="name" DataValueField="id" runat="server"
  25.                                                     AutoPostBack="True" CssClass="form-control">
  26.                                                 </asp:DropDownList>
  27.                                             </ContentTemplate>
  28.                                             <Triggers>
  29.                                                 <asp:AsyncPostBackTrigger ControlID="ddlsheng" EventName="SelectedIndexChanged" />
  30.                                             </Triggers>
  31.                                         </asp:UpdatePanel>
  32.                                     </div>
  33.                                 </div>
  34.                             </div>
  35.                         </div>
  36.                         <div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12">
  37.                             <div class="form-horizontal">
  38.                                 <div class="form-group">
  39.                                     <div class="col-md-4 control-label" for="select">剩余金额</div>
  40.                                     <div class="col-md-4">
  41.                                         <input type="text" class="form-control" runat="server" id="Balance_start" name="Balance_start" />
  42.                                     </div>
  43.                                     <div class="col-md-4">
  44.                                         <input type="text" class="form-control" runat="server" id="Balance_end" name="Balance_end" />
  45.                                     </div>
  46.                                 </div>
  47.                             </div>
  48.                         </div>
  49.                         <div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12">
  50.                             <div class="form-horizontal">
  51.                                 <div class="form-group">
  52.                                     <div class="col-md-4 control-label" for="select">是否VIP</div>
  53.                                     <div class="col-md-4">
  54.                                         <asp:DropDownList ID="select_IsVIP" runat="server"
  55.                                             AutoPostBack="True" CssClass="form-control">
  56.                                             <asp:ListItem Value="-1">所有</asp:ListItem>
  57.                                             <asp:ListItem Value="0">是</asp:ListItem>
  58.                                             <asp:ListItem Value="1">否</asp:ListItem>
  59.                                         </asp:DropDownList>
  60.                                     </div>
  61.                                     <div class="col-md-4">
  62.                                     </div>
  63.                                 </div>
  64.                             </div>
  65.                         </div>
  66.                     </div>
  67.                     <div class="row">
  68.                         <div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12">
  69.                             <div class="form-horizontal">
  70.                                 <div class="form-group">
  71.                                     <div class="col-md-4 control-label" for="select">日期</div>
  72.                                     <div class="col-md-4">
  73.                                         <input type="text" id="txtfrom" runat="server" class="form-control" placeholder="选择開始日期" onfocus="WdatePicker({dateFmt:'yyyy/MM/dd'})">
  74.                                     </div>
  75.                                     <div class="col-md-4">
  76.                                         <input type="text" id="txtto" runat="server" class="form-control" placeholder="选择结束日期" onfocus="WdatePicker({dateFmt:'yyyy/MM/dd'})"><%--,minDate:'%y-%M-%d %H:%m:%s'--%>
  77.                                     </div>
  78.                                 </div>
  79.                             </div>
  80.                         </div>
  81.                         <div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12">
  82.                             <div class="form-horizontal">
  83.                                 <div class="form-group">
  84.                                     <div class="col-md-4 control-label" for="select">代驾次数</div>
  85.                                     <div class="col-md-4">
  86.                                         <input type="text" class="form-control" runat="server" id="daijicount_start" name="daijicount_start" />
  87.                                     </div>
  88.                                     <div class="col-md-4">
  89.                                         <input type="text" class="form-control" runat="server" id="daijicount_end" name="daijicount_end" />
  90.                                     </div>
  91.                                 </div>
  92.                             </div>
  93.                         </div>
  94.                         <div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12">
  95.                             <div class="form-horizontal">
  96.                                 <div class="form-group">
  97.                                     <div class="col-md-4 control-label" for="select">生日月份</div>
  98.                                     <div class="col-md-4">
  99.                                         <asp:DropDownList ID="BirthdayMonth" runat="server"
  100.                                             AutoPostBack="True" CssClass="form-control">
  101.                                             <asp:ListItem Value="0">所有</asp:ListItem>
  102.                                             <asp:ListItem Value="1">1月</asp:ListItem>
  103.                                             <asp:ListItem Value="2">2月</asp:ListItem>
  104.                                             <asp:ListItem Value="3">3月</asp:ListItem>
  105.                                             <asp:ListItem Value="4">4月</asp:ListItem>
  106.                                             <asp:ListItem Value="5">5月</asp:ListItem>
  107.                                             <asp:ListItem Value="6">6月</asp:ListItem>
  108.                                             <asp:ListItem Value="7">7月</asp:ListItem>
  109.                                             <asp:ListItem Value="8">8月</asp:ListItem>
  110.                                             <asp:ListItem Value="9">9月</asp:ListItem>
  111.                                             <asp:ListItem Value="10">10月</asp:ListItem>
  112.                                             <asp:ListItem Value="11">11月</asp:ListItem>
  113.                                             <asp:ListItem Value="12">12月</asp:ListItem>
  114.                                         </asp:DropDownList>
  115.                                     </div>
  116.                                     <div class="col-md-4">
  117.                                     </div>
  118.                                 </div>
  119.                             </div>
  120.                         </div>
  121.                     </div>
  122.                     <div class="row">
  123.                         <div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12">
  124.                             <div class="form-horizontal">
  125.                                 <div class="form-group">
  126.                                     <div class="col-md-4 control-label" for="select">跟踪状态</div>
  127.                                     <div class="col-md-4">
  128.                                         <asp:DropDownList ID="TrackingState" runat="server" AutoPostBack="True" CssClass="form-control">
  129.                                             <asp:ListItem Value="-1">所有</asp:ListItem>
  130.                                             <asp:ListItem Value="0">有意向</asp:ListItem>
  131.                                             <asp:ListItem Value="1">无意向</asp:ListItem>
  132.                                         </asp:DropDownList>
  133.                                     </div>
  134.                                     <div class="col-md-4">
  135.                                     </div>
  136.                                 </div>
  137.                             </div>
  138.                         </div>
  139.                         <div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12">
  140.                             <div class="form-horizontal">
  141.                                 <div class="form-group">
  142.                                     <div class="col-md-4 control-label" for="select">再联系时间</div>
  143.                                     <div class=" col-md-8 ">
  144.                                         <input type="text" id="NextContactDate" runat="server" class="form-control" placeholder="选择日期" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})">
  145.                                     </div>
  146.                                 </div>
  147.                             </div>
  148.                         </div>
  149.                         <div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12">
  150.                             <div class="form-horizontal">
  151.                                 <div class="form-group">
  152.                                     <div class="col-md-4 control-label" for="select">集团用户</div>
  153.                                     <div class="col-md-4">
  154.                                         <asp:DropDownList ID="GroupUser" runat="server" AutoPostBack="True" CssClass="form-control">
  155.                                             <asp:ListItem Value="-1">所有</asp:ListItem>
  156.                                             <asp:ListItem Value="0">个人用户</asp:ListItem>
  157.                                             <asp:ListItem Value="1">集团用户</asp:ListItem>
  158.                                         </asp:DropDownList>
  159.                                     </div>
  160.                                     <div class="col-md-4">
  161.                                     </div>
  162.                                 </div>
  163.                             </div>
  164.                         </div>
  165.                     </div>
  166.                     <div class="row">
  167.                         <div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12">
  168.                             <div class="form-horizontal">
  169.                                 <div class="form-group">
  170.                                     <div class="col-md-4 control-label" for="select">客户类型</div>
  171.                                     <div class="col-md-4">
  172.                                         <asp:DropDownList ID="CustomersType" runat="server" AutoPostBack="True" CssClass="form-control">
  173.                                             <asp:ListItem Value="0">所有</asp:ListItem>
  174.                                             <asp:ListItem Value="1">预付用户</asp:ListItem>
  175.                                             <asp:ListItem Value="2">推荐用户</asp:ListItem>
  176.                                             <asp:ListItem Value="3">普通用户</asp:ListItem>
  177.                                             <asp:ListItem Value="4">定额合约后付费商户</asp:ListItem>
  178.                                             <asp:ListItem Value="5">非定额后付费合约商户</asp:ListItem>
  179.                                         </asp:DropDownList>
  180.                                     </div>
  181.                                     <div class="col-md-4">
  182.                                     </div>
  183.                                 </div>
  184.                             </div>
  185.                         </div>
  186.                         <div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12">
  187.                             <div class="form-horizontal">
  188.                                 <div class="form-group">
  189.                                     <div class="col-md-3 control-label" for="select" >开票</div>
  190.                                     <div class="col-md-3" >
  191.                                         <asp:DropDownList ID="ddl_Invoice" runat="server" AutoPostBack="True" CssClass="form-control">
  192.                                             <asp:ListItem Value="-1">所有</asp:ListItem>
  193.                                             <asp:ListItem Value="1">已开发票</asp:ListItem>
  194.                                             <asp:ListItem Value="0">未开发票</asp:ListItem>
  195.                                         </asp:DropDownList>
  196.                                     </div>
  197.                                 <div class="col-md-3 control-label" for="select">标记</div>
  198.                                     <div class="col-md-3">
  199.                                     <asp:DropDownList ID="ddlRemark"  runat="server"
  200.                                                                   CssClass="form-control" >
  201.                                                  <asp:ListItem Value="0">所有</asp:ListItem>
  202.                                                                     <asp:ListItem Value="1">空号</asp:ListItem>
  203.                                                                     <asp:ListItem Value="2">通话中</asp:ListItem>
  204.                                                   <asp:ListItem Value="3">拒接</asp:ListItem>
  205.                                                   <asp:ListItem Value="4">无人接听</asp:ListItem>
  206.                                                   <asp:ListItem Value="5">停机</asp:ListItem>
  207.                                                   <asp:ListItem Value="6">非本人</asp:ListItem>
  208.                                                   <asp:ListItem Value="7">不须要</asp:ListItem>
  209.                                                   <asp:ListItem Value="8">酒店</asp:ListItem>
  210.                                                   <asp:ListItem Value="9">E代驾</asp:ListItem>
  211.                                                   <asp:ListItem Value="10">反复数据</asp:ListItem>
  212.                                                   <asp:ListItem Value="11">其它</asp:ListItem>
  213.                                           </asp:DropDownList>
  214.                                         </div>
  215.                                 </div>
  216.                             </div>
  217.                         </div>
  218.                         <div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12">
  219.                             <div class="form-horizontal">
  220.                                 <div class="form-group">
  221.                                     <div class="col-md-4 control-label">关键字</div>
  222.                                     <div class="col-md-4">
  223.                                         <input type="text" class="form-control" runat="server" id="keyword" name="keyword" />
  224.                                     </div>
  225.                                     <div class="col-md-4">
  226.                                         <asp:Button ID="btnSearch" runat="server" Text=" 筛 选 "  CssClass="btn btn-success  col-md-12 " OnClick="btnSearch_Click"/>
  227.                                     </div>
  228.                                 </div>
  229.                             </div>
  230.                         </div>
  231.                     </div>
  232.                     <!--查询 button-->
  233.                 </div>
  234.             </div>
  235.         </div>
  236.         <!--/col-->
  237.     </div>
  238.     <!--/条件查找-->

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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hpbmFwbGFu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">


代码：

  1. <div class="row">
  2.                                                             <div class="form-group col-sm-4">
  3.                                                                 <div>司机姓名</div>
  4.                                                                 <asp:TextBox ID="txt_DriverName" runat="server" class="form-control "></asp:TextBox>
  5.                                                             </div>
  6.                                                             <div class="form-group col-sm-4">
  7.                                                                 <div>司机工号</div>
  8.                                                                 <asp:TextBox ID="txt_Ucode" runat="server" class="form-control "></asp:TextBox>
  9.                                                             </div>
  10.                                                             <div class="form-group col-sm-2">
  11.                                                                 <div>归属地</div>
  12.                                                                 <asp:DropDownList ID="ddlshengAdd" runat="server" CssClass="form-control  " OnSelectedIndexChanged="ddlshengAdd_SelectedIndexChanged" AutoPostBack="true">
  13.                                                                      <asp:ListItem Value="0">全省</asp:ListItem>
  14.                                                                 </asp:DropDownList>
  15.                                                             </div>
  16.                                                             <div class="form-group col-sm-2">
  17.                                                                 <asp:ScriptManager ID="ScriptManager1" runat="server">
  18.                                                                 </asp:ScriptManager>
  19.                                                                 <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
  20.                                                                     <ContentTemplate>
  21.                                                                         <label></label>
  22.                                                                         <asp:DropDownList ID="ddlshiAdd" DataTextField="name" DataValueField="id" runat="server" CssClass="form-control  "></asp:DropDownList>
  23.                                                                     </ContentTemplate>
  24.                                                                     <Triggers>
  25.                                                                         <asp:AsyncPostBackTrigger ControlID="ddlshengAdd" EventName="SelectedIndexChanged" />
  26.                                                                     </Triggers>
  27.                                                                 </asp:UpdatePanel>
  28.                                                             </div>
  29.                                                         </div>

【Bootstrap3.0建站笔记一】表单元素排版的更多相关文章

  1. 【Bootstrap3.0建站笔记三】AspNetPager分页，每一列都可排序

    1.AspNetPager分页,实现每一列都可排序:           (1).须要将默认排序字段放在HTML页面中.           (2).排序字段放置为td节点的属性. 如图: 实现的效果 ...

  2. 【Bootstrap3.0建站笔记二】button可下拉弹出层

    1.button可下拉弹出层: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hpbmFwbGFu/font/5a6L5L2T/fontsize/400 ...

  3. Bootstrap3.0学习第六轮(表单)

    Bootstrap3.0学习第六轮(表单) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.h ...

  4. 玩转Django2.0---Django笔记建站基础七(表单与模型)

    第七章 表单与模型 表单是搜集用户数据信息的各种表单元素的集合,作用是实现网页上的数据交互,用户在网站输入信息,然后提交到网站服务器端进行处理(如数据录入和用户登录.注册等). 用户表单是web开发的 ...

  5. 主攻ASP.NET MVC4.0之重生:Jquery Mobile 表单元素

    相关代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  6. AngularJS 1.2.x 学习笔记（表单校验篇）

    https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...

  7. Symfony2学习笔记之表单

    对于一个Web开发者来说,处理HTML表单是一个最为普通又具挑战的任务.Symfony2集成了一个Form组件,让处理表单变的容易起来.在这一节里,我们将从基础开始创建一个复杂的表单,学习表单类库中最 ...

  8. And Design：拓荒笔记——Form表单

    And Design:拓荒笔记——Form表单 Form.create(options) Form.create()可以对包含Form表单的组件进行改造升级,会返回一个新的react组件. 经 For ...

  9. HTML5 学习笔记（二）——HTML5新增属性与表单元素

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

随机推荐

  1. hdu 3641 Treasure Hunting 强大的二分

    /** 大意:给定一组ai,bi . m = a1^b1 *a2^b2 * a3^ b3 * a4^b4*...*ai^bi 求最小的x!%m =0 思路: 将ai 质因子分解,若是x!%m=0 那么 ...

  2. referer htttp headers 统计信息 防盗链

    HTTP headers是HTTP请求和相应的核心模块,它承载了关于客户端浏览器.请求页面.服务器等相关信息.Referer是HTTP头中的一个属性,告诉服务器我是从哪个页面链接过来的,所携带的信息用 ...

  3. [WPF疑难]避免窗口最大化时遮盖任务栏

    原文 [WPF疑难]避免窗口最大化时遮盖任务栏 [WPF疑难]避免窗口最大化时遮盖任务栏 周银辉 WPF窗口最大化时有个很不好的现象是:如果窗口的WindowStyle被直接或间接地设置为None后( ...

  4. 转:STL容器里存放对象还是指针

    一．问题的引出: 容器可以存放对象,可以存放指针,这里要谈的是两者的使用问题.就是什么时候存放对象更好,什么时候存放指针更好? 二．问题的分析过程: 1. 首先说下stl容器的工作方式   对于内建类 ...

  5. JAVA GUI学习 - 窗体背景图片设置方法：重写paintComponent(Graphics g)方法

    public class BackgroundImage extends JFrame { public BackgroundImage() { this.setTitle("窗体背景图片设 ...

  6. poj 1979 Red and Black(dfs)

    题目链接:http://poj.org/problem?id=1979 思路分析:使用DFS解决,与迷宫问题相似:迷宫由于搜索方向只往左或右一个方向,往上或下一个方向,不会出现重复搜索: 在该问题中往 ...

  7. splice()函数的使用方法

    splice()函数的使用方法,这是一个拗口的函数.用起来有点麻烦.图3所看到的是splice函数的功能.将一个列表插入到还有一个列表其中.list容器类定义了splice()函数的3个版本号: sp ...

  8. mac .bash_profile环境变量汇总

    export CATALINA_HOME=/Applications/MyApplications/apache-tomcat-7.0.54 export PATH=$PATH:$CATALINA_H ...

  9. ArcGIS Engine 改变线IPolyline的方向

    有时候需要改变一下线的方向来组成要要的图形,可以按一下方法来变换一下. 如果看官有好的方法的话,请不吝贴上为谢! private IPolyline ChangeDirection(IPolyline ...

  10. C++静态成员函数和静态成员变量的探索

    静态数据成员属于类,非属于类对象,所以,定义位置就有了限制. 静态数据成员要实际地分配空间,故不能在类的声明中定义(只能声明数据成员).类声明只声明一个类的“尺寸和规格”,并不进行实际的内存分配,所以 ...