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

2024-12-12 13:47:25

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表单元素排版的相关知识，希望对大家有所帮助！

Bootstrap每天必学之基础排版

本次主要来了解的是排版,这个大部分在HTML的基本标签中也是存在的,所以相对比较简单,为了保证系列的完整性,也顺带复习下,还是记录一下.主要内容如下: 1.标题 2.页面主体 3.强调 4.缩略语 5.地址 6.引用 7.列表一.标题 Html中的所有标题标签,从<h1>到<h6>均可使用.另外还提供了.h1到.h6的class,为的是给inline属性的文本赋予标题的样式. <div class="container"> <h1 class
学习使用Bootstrap页面排版样式

Bootstrap之页面排版样式 Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML.CSS.JavaScript 的开源框架.该框架代码简洁.视觉优美,可用于快速.简单地构建基于 PC 及移动端设备的 Web 页面需求. 1. Bootstrap 特点 Bootstrap 非常流行,得益于它非常实用的功能和特点.主要核心功能特点如下: (1). 跨设备.跨浏览器,可以兼容所有现代浏览器,包括比较诟病的 IE7.8. (3). 提供的全面的组件
Bootstrap3学习笔记(二)之排版

在上篇文章给大家介绍了BootStrap3学习笔记(一)之网格系统对于标题,Bootstrap已经修改了h1--h6的样式,如果需要副标题,还可以在其中使用small标记 <h1>h1. Bootstrap heading <small>Secondary text</small></h1> <h2>h2. Bootstrap heading <small>Secondary text</small></h2>
全面解析Bootstrap排版使用方法（标题）

Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样,具体定义的规则可以如下表所示:  <h1>Bootstrap标题一</h1> <h2>Bootstrap标题二</h2> <h3>Bootstrap标题三</h3> <h4>Bootst
第五篇Bootstrap 排版

使用bootstrap的排版特性可以创建标题,段落,列表及其它内联元素. 标题:bootstrap中定义了从h1-h6的六种标题样式. 内联子标题: 如果需要向任意一个标题添加一个子标题,只需要加上<small></small>例如: <h1>我是标题1 h1. <small>我是副标题1 h1</small></h1> <h2>我是标题2 h2. <small>我是副标题2 h2</small>&
需灵活掌握的Bootstrap预定义排版类你精通吗?

有了Bootstrap前端框架预处理好的排版类,我们从此不必再为每个排版的标签元素写大量的CSS代码了,可以使用 Bootstrap 的排版特性,您可以创建标题.段落.列表及其他内联元素预定义好的样式,排版出很规范的网页. 那我们接下来一起学习下,bootstrap前端框架到底为我们预定义了那些排版的类呢? 第一:Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈,这些字体都是目前所有网页最经常用的字体了.从此
第一次接触神奇的Bootstrap基础排版

Bootstrap是Twitter推出的一个简单灵活的,基于HTML5和CSS3的用于搭建WEB前端页面的html.css.javascript工具集.拥有友好的学习曲线,卓越的兼容性,响应式设计,12列格网,样式向导文档,自定义JQuery插件,完整的类库,基于Less等特点.Bootstrap让Web开发更迅速.更简单. 1.Bootstrap下载官网:http://getbootstrap.com/:新手入门:http://getbootstrap.com/getting-started
第二章之Bootstrap 页面排版样式

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 学习要点: 1.页面排版本节课我们主要学习一下 Bootstrap 全局 CSS 样式中的排版样式,包括了标题.页面主体.对齐.列表等常规内容. 一．页面排版 Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用. 1.页面主体 Bootstrap 将全局 font-size 设置为 14px,li
全面解析Bootstrap排版使用方法（文字样式）

一.段落段落是排版中另一个重要元素之一.在Bootstrap中为文本设置了一个全局的文本样式(这里所说的文本是指正文文本): 1.全局文本字号为14px(font-size). 2.行高为1.42857143(line-height),大约是20px(大家看到一串的小数或许会有疑惑,其实他是通过LESS编译器计算出来的,当然Sass也有这样的功能). 3.颜色为深灰色(#333): 二.文字样式在实际项目中,对于一些重要的文本,希望突出强调的部分都会做另外的样式处理.Bootstrap同样对
Bootstrap入门书籍之（一）排版

推荐阅读:Bootstrap入门书籍之(零)Bootstrap简介 Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落.列表及其他内联元素. 1. 标题在Bootstrap中使用标题的方式和常规html一样:从 <h1> 到 <h6> 分别从大到小安排标题元素,只不过在Bootstrap中重新设置了其默认样式,从源码中可以看到有如下共

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

相关推荐

随机推荐