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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Bootstrap3.0建站教程(一)之bootstrap表单元素排版，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9429字，纯文字阅读大概需要14分钟。

内容图文

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

内容总结

以上是互联网集市为您收集整理的Bootstrap3.0建站教程(一)之bootstrap表单元素排版全部内容，希望文章能够帮你解决Bootstrap3.0建站教程(一)之bootstrap表单元素排版所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/352030.html

来源：【匿名】

【上一篇】Bootstrap开发实战之第一次接触Bootstrap 【下一篇】Bootstrap+PHP表单验证实例

更多 ►

【Bootstrap3.0建站教程(一)之bootstrap表单元素排版】教程文章相关的互联网学习教程文章

bootstrap-水平表单【代码】【图】

1.运行效果如图所示650) this.width=650;" src="/upload/getfiles/default/2022/11/8/20221108010410834.jpg" title="QQ截图20170519105112.png" />2.实现代码如下<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>水平表单</title>  <link rel="stylesheet" href="https://cdn.bootcss...

bootstrap3 表单样式小结【代码】

表单表单组<div class="form-group"> </div>表单组内部放置label和输入组输入组<div class="input-group"> </div>输入组内部放置input等控件和其他标签,控件会变短控件控件需要增加控件类<textarea class="form-control" rows="3"></textarea>控件尺寸由下面类设定,默认尺寸不同设置input-lg input-sm水平排列表单尺寸.form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸静态控件样...

吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：文本框（Textarea）【代码】【图】

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Bootstrap 实例 - 文本框</title><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body><form role="form"><div cla...

Bootstrap_表单_表单控件【代码】【图】

一、输入框input　　单行输入框，常见的文本输入框，也就是input的type属性值为text。　　在Bootstrap中使用input时也必须添加type类型，如果没有指定type类型，将无法得到正确的样式，因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型，比如说text类型，对应的是input[type=“text”])的形式来定义样式的。　　为了让控件在各种表单风格中样式不出错，需要添加类名“.form-control”。<form role="form"><div cla...

bootstrap表单class使用记录

由于总是忘记表单的类的作用，故边用边记录下来，持续更新form-control添加在<input>中，为表单控件增加样式 control-label添加在<label>中，文本右对齐 form-group控制整个表单中的元素获取最佳间距，表单本身也会跟其他元素隔开一定间距 form-inline通常添加在<form>中，表示内联表单，也可以添加在其他块元素中。所有表单元素都在一行显示（充足的宽度的情况下），并且”.form-inline .form-group”展示为内联块元素（inline-bl...

bootstrap表单按回车会自动刷新页面的问题【代码】【图】

想给form表单增加回车自动提交的功能$(‘#password‘).keydown(function(event){if (event.keyCode == 13) $(‘#login‘).click();});然而，并没有达到预期的效果，而是自动刷新了表单，并将表单参数放在了url后面,如图发现是是form标签的问题，将其改为div问题解决，但原因未知原文：http://www.cnblogs.com/blog-cq/p/5812644.html

Bootstrap页面布局11 - BS表单【代码】【图】

<input type=‘text‘ value=‘‘ placeholder=‘输入您的用户名‘ class=‘input-mini‘ />　　①几个类控制文本框长度　　input-mini:最小　　　　如图：　　input-small:次小　　　　如图：　　input-medium:中等　　　　如图：　　input-max:最长　　　　如图：　　spanN:N代表数字，最大12，N表示1个网格的宽度　　　　例如：span4表示对应的input框占用4个网格的宽度　　②属性：placeholder="输入您的用户名",当用户开始输入...

去掉bootstrap表单空间获得焦点时四周的闪光阴影【代码】

方法: 自定义css style, 覆盖bootstrap的设置:.form-control:focus, .has-success .form-control:focus, .has-warning .form-control:focus, .has-error .form-control:focus {-webkit-box-shadow: none;box-shadow: none; } 原文：http://www.cnblogs.com/zrcx/p/6863939.html

Bootstrap表单之按钮专题【代码】

按钮：Bootstrap框架的按钮也是一个独立部分，我们同样在不同的版本之中能找到对应的代码：LESS版本：查看源文件buttons.less Sass版本：查看源文件_buttons.scss 已编译版本：查看源文件bootstrap.css文件第1992行～第2353行各种按钮代码如下：<body><button class="btn" type="button">基础按钮.btn</button><button class="btn btn-default" type="button">默认按钮.btn-default</button><button class="btn btn...

BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码【图】

在某些情况下，反馈图标未正确显示。默认情况下，Bootstrap定义反馈图标位置如下： .has-feedback .form-control-feedback {top: 25px;right: 0; } .form-horizontal .has-feedback .form-control-feedback {top: 0;right: 15px; }通过自定义值top和right属性，您可以将反馈图标调整为应有的位置。按钮组.btn-group .form-control-feedback {top: 0;right: -30px; }<div class="form-group"><label class="col-xs-3 control-label...

基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解【图】

表单校验是页面开发中非常常见的一类需求，相信每个前端开发人员都有这方面的经验。网上有很多成熟的表单校验框架，虽然按照它们默认的设计，用起来没有多大的问题，但是在实际工作中，表单校验有可能有比较复杂的个性化的需求，使得我们用这些插件的默认机制并不能完成这些功能，所以要根据自己的需要去改造它们（毕竟自己还不到那个写一个完美的校验框架的层次）。我用过formValidation这个校验框架，虽然它跟bootstrap配合地很好...

bootstrap 表单验证使用方法【图】

前言：做Web开发的我们，表单验证是再常见不过的需求了。友好的错误提示能增加用户体验。博主搜索bootstrap表单验证，搜到的结果大部分都是文中的主题：bootstrapvalidator。今天就来看看它如何使用吧。一、源码及API地址介绍它之前，还是给出它的源码以及API的地址吧。 bootstrapvalidator源码：https://github.com/nghuuphuoc/bootstrapvalidator boostrapvalidator api：http://bv.doc.javake.cn/api/ 二、代码以及效果展示 1...

Bootstrap实现登录校验表单(带验证码)【图】

这个登陆窗口是双登陆窗口的，对IE8及早期版本不支持，可以根据自己的开发语言更换，我这个是asp的，其中的引用文件可以在网络上自行下载，如找不到可以留下邮箱~！关键代码如下所示： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>scm登陆界面</title> <style type="text/css"> body { background-color: #999; } </style> <link rel="stylesheet" href="../boo...

Bootstrap CSS布局之表单

1. 表单表单是html网页交互很重要的部分，同时也是BootSTrap框架中的核心内容，表单提供了丰富的样式(基础、内联、横向) 表单的元素 input textarea select checkbox radio(checkbox和radio是input的特殊类型) 其他标签 form fieldset legend 1.1.基础表单 <!--基础表单： 1.向父 <form> 元素添加 role="form"。 2.把标签label和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。因为form-group提供...

PHP实现登录注册之BootStrap表单功能【图】

前言前面几篇简单介绍了一下前端与PHP的一些知识点，前端中表单提交是一个非常重要的模块，在本篇中我会介绍一些关于表单的知识，如果前面内容你掌握的不好并且没有大量的练习，我感觉你最好先把标签都记下来。项目简介登录与注册是我们在web开发中最常见的模块，也是我们日常生活中经常接触的功能。用户通过前端表单页面填写内容，通过POST方式提交到后台，然后经过PHP代码处理提交内容后，针对登录或者注册的逻辑继续操作。登...

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

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【Bootstrap3.0建站教程(一)之bootstrap表单元素排版】教程文章相关的互联网学习教程文章

元素 - 相关标签

BOOTSTRAP - 技术教程分类

BOOTSTRAP - 最新教程

BOOTSTRAP - 最热教程