【Bootstrap3.0建站笔记一】表单元素排版
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>
<!--查询 button-->
</div>
</div>
</div>
<!--/col-->
</div>
<!--/条件查找-->
2、文字和输入框上下排列：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hpbmFwbGFu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
代码：
<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建站笔记一】表单元素排版的更多相关文章
- 【Bootstrap3.0建站笔记三】AspNetPager分页，每一列都可排序
1.AspNetPager分页,实现每一列都可排序: (1).须要将默认排序字段放在HTML页面中. (2).排序字段放置为td节点的属性. 如图: 实现的效果 ...
- 【Bootstrap3.0建站笔记二】button可下拉弹出层
1.button可下拉弹出层: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hpbmFwbGFu/font/5a6L5L2T/fontsize/400 ...
- Bootstrap3.0学习第六轮(表单)
Bootstrap3.0学习第六轮(表单) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.h ...
- 玩转Django2.0---Django笔记建站基础七(表单与模型)
第七章 表单与模型 表单是搜集用户数据信息的各种表单元素的集合,作用是实现网页上的数据交互,用户在网站输入信息,然后提交到网站服务器端进行处理(如数据录入和用户登录.注册等). 用户表单是web开发的 ...
- 主攻ASP.NET MVC4.0之重生:Jquery Mobile 表单元素
相关代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...
- AngularJS 1.2.x 学习笔记（表单校验篇）
https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...
- Symfony2学习笔记之表单
对于一个Web开发者来说,处理HTML表单是一个最为普通又具挑战的任务.Symfony2集成了一个Form组件,让处理表单变的容易起来.在这一节里,我们将从基础开始创建一个复杂的表单,学习表单类库中最 ...
- And Design：拓荒笔记——Form表单
And Design:拓荒笔记——Form表单 Form.create(options) Form.create()可以对包含Form表单的组件进行改造升级,会返回一个新的react组件. 经 For ...
- HTML5 学习笔记（二）——HTML5新增属性与表单元素
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
随机推荐
- linux kernel中timer的使用
linux kernel中timer的使用 http://blog.csdn.net/njuitjf/article/details/16888821 在kernel中如果想周期性的干些什么事情,或者 ...
- C函数调用与栈--代码真相
前面详细的说了,C函数调用的过程中,栈的变化情况的原理部分,这里在看一下汇编代码的真正的实现. 有关前面的那一片博客,主要记住的就是函数调用时栈的变化,4+3+2的步骤: (1)设置栈帧边界 (2)开 ...
- JBPM6工作台使用Mysql数据库
前面已经安装好jbpm了.现在进行数据库的替换.很简单: 1,修改 build.properties 原: # default is H2 H2.version=1.3.168 db.name=h2 ...
- JavaScript基础知识----document对象
对象属性document.title //设置文档标题等价于HTML的<title>标签document.bgColor //设 ...
- PDO获取数据的方法fetch()、fetchAll()、setFetchMode()、bindColumn()
PDO的数据获取方法与其他数据库扩展都非常类似,只要成功执行SELECT查询,都会有结果集对象产生.不管是使用PDO对象中的query()方法,还是使用prepare()和execute()等方法结合 ...
- UVA 103 Stacking Boxes (dp + DAG上的最长路径 + 记忆化搜索)
Stacking Boxes Background Some concepts in Mathematics and Computer Science are simple in one or t ...
- nodejs笔记2——请求路由
对于不同的URL请求,服务器应该有不同的反应.我们要为路由提供请求的URL和其他需要的GET及POST参数,随后路由需要根据这些数据来执行相应的代码.我们需要的所有数据都会包含在request对象中, ...
- source code of MES Data
<HTML> <HEAD> <TITLE>TELOGS</TITLE> </HEAD> <BODY> <?php /* c ...
- JavaScript 高级程序设计（第3版）笔记——chapter4：变量、作用域和内存问题
Chapter4 变量.作用域和内存问题 l 理解基本类型和引用类型的值 l 理解执行环境 l 理解垃圾收集 4.1基本类型和引用类型的值 l ECMAScript变量包含两种不同数据类型的值 ...
- iOS开发中两个不错的宏定义
/** Synthsize a weak or strong reference. Example: @weakify(self) [self doSomething^{ @strongify(sel ...