BootStrap中的表单大全

表单

  基础表单

  对于表单中的input、textarea、select,一般我都会加上类”form-control”,它设置元素的默认宽度为100%(并不是绝对,比如下述的内联表单)。并且每个元素(包括label和待输入元素)都会加上”form-group”。它的样式只有一个。margin-bottom:15px。   

<form action="">
<div class="form-group">
<label for="">用户名:</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label for="">密码:</label>
<input type="password" class="form-control"/>
</div>
</form>

  内联表单

  通过给最外层元素(form-group的父元素)加上”form-inline”。表示所有表单元素都在一行显示(充足的宽度的情况下)。并且”.form-inline .form-group”展示为内联块元素(inline-block)。并且”.form-inline .form-control”的宽度是auto。这样可以保证在一行展示。

<form action="" class="form-inline">
<div class="form-group">
<label for="">用户名:</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label for="">密码:</label>
<input type="password" class="form-control"/>
</div>
</form>

  水平表单

  不同于普通表单和内联表单。如果要将label和input表单元素显示在一行,则需要使用”form-horizontal”。该类联合”form-group”使用,就相当于网格系统中的”row”。所以它的子类有”col-md-*”,而label的 “control-label”—-“.form-horizontal .control-label”,有文本右对齐的效果。如果不加这个,label和input的会显得不对齐。

<form action="" class="form-horizontal">
<div class="form-group">
<label for="" class="control-label col-md-1">用户名:</label>
<div class="col-md-3">
<input type="text" class="form-control"/>
</div>
</div>
<div class="form-group form-group-sm">
<label for="" class="control-label col-md-1">密码:</label>
<div class="col-md-3">
<input type="password" class="form-control input-sm"/>
</div>
</div>
</form>

  表单大小

  控制input大小的是”input-sm”,”input-lg”,它们使input输入框比正常看起来更小或者更大。与此对应的是label中文本的大小。需要在父级”form-group”同时加上”form-group-sm”,”form-group-lg”。如上面一个demo的密码输入框。

输入框

  在HTML5中,输入框(input)标签中的type支持了更多的类型。有text、password、datatime、datatime-local、date、month、time、week、number、email、url、search、tel和color。标签<input>上只有赋值了特定的type才能显示正确的样式。有些元素只有在手机上才能显示其效果。

下拉框select

  与输入框类似。只是将input改成了select,同时加上了”form-control”类。

<form action="" class="form-horizontal">
<div class="form-group">
<label for="" class="control-label col-md-2 col-md-pull-1">请选择:</label>
<div class="col-md-3 col-md-pull-1">
<select name="" id="" class="form-control">
<option value="">HTML</option>
<option value="">CSS</option>
<option value="">Javascript</option>
<option value="">JAVA</option>
<option value="">PHP</option>
<option value="">Nodejs</option>
</select>
</div>
</div>
</form>

  col-md-pull-*是左偏移。

文本域

  和上面类似。  

<form action="" class="form-horizontal">
<div class="form-group">
<label for="" class="control-label col-md-2 col-md-pull-1">textarea:</label>
<div class="col-md-3 col-md-pull-1">
<textarea name="" id="" rows="3" class="form-control">
hello
</textarea>
</div>
</div>
</form>

多选框和单选框

  为了使radio和checkbox元素显示在一行,并且和label对齐。bootstrap提供了两种选择。其一:

<div class="form-group">
<label for="" class="radio">
<input type="radio" name="sex"/>男      
<input type="radio" name="sex"/>女      
<input type="radio" name="sex"/>保密      
</label>
<label for="" class="checkbox">
<input type="checkbox"/>HTML      
<input type="checkbox"/>CSS      
<input type="checkbox"/>JavaScript      
</label>
</div>

  label本身是inline-block的。但是.radio,.checkbox本身却是block的。  

  所以用一个label包裹多个单选框或复选框,这样会显得很不专业(haha)。还有,很多的 也是很不美观的。So,第二种写法来了。

<div class="form-group">
<label for="" class="radio-inline">
<input type="radio" name="sex"/>男
</label>
<label for="" class="radio-inline">
<input type="radio" name="sex"/>女
</label>
<label for="" class="radio-inline">
<input type="radio" name="sex"/>保密
</label>
<br />
<label for="" class="checkbox-inline">
<input type="checkbox" />HTML
</label>
<label for="" class="checkbox-inline">
<input type="checkbox" />CSS
</label>
<label for="" class="checkbox-inline">
<input type="checkbox" />JavaScript
</label>
</div>

表单验证

  has-success:成功,绿色。

  has-warning:警告,黄色。

  has-error:错误,红色。

  在”form-group”上加上对应的样式即可。为了更好的验证,我们还可以继续加上”has-feedback”。然后在input(”form-control”)后面元素同级加上”form-control-feedback”。语义清晰明了。代码如下:

<form action="" class="form-horizontal">
<div class="form-group has-error has-feedback">
<label for="" class="control-label col-md-2 col-md-pull-1">用户名:</label>
<div class="col-md-3 col-md-pull-1">
<input type="text" class="form-control" />
<span class="form-control-feedback glyphicon glyphicon-remove"></span>
</div>
</div>
<div class="form-group has-warning has-feedback">
<label for="" class="control-label col-md-2 col-md-pull-1">密码:</label>
<div class="col-md-3 col-md-pull-1">
<input type="text" class="form-control" />
<span class="form-control-feedback glyphicon glyphicon-warning-sign"></span>
</div>
</div>
<div class="form-group has-success has-feedback">
<label for="" class="control-label col-md-2 col-md-pull-1">邮箱:</label>
<div class="col-md-3 col-md-pull-1">
<input type="text" class="form-control" />
<span class="form-control-feedback glyphicon glyphicon-ok"></span>
<span>格式正确</span>
</div>
</div>
</form>

按钮

  多按钮与按钮风格

  bootstrap中的按钮风格多样。button、a、input、span、div等都可以成为按钮,只要它具有”btn btn-样式”。但是为了更好的兼容性和可读性最好不要这样用,尽量使用button标签。

<button class="btn btn-default">按钮</button>
<button class="btn btn-primary">按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn btn-link">按钮</button>
<button class="btn btn-success btn-xs">按钮</button>
<button class="btn btn-warning btn-sm">按钮</button>
<button class="btn btn-error btn-lg">按钮</button>
<!--btn-block使按钮独占一行-->
<button class="btn btn-default btn-block">按钮</button>
<button class="btn btn-primary btn-block">按钮</button>
<button class="btn btn-info btn-block">按钮</button>
<button class="btn btn-link btn-block">按钮</button>
<button class="btn btn-success btn-xs btn-block active">按钮</button>
<button class="btn btn-warning btn-sm btn-block focus">按钮</button>
<button class="btn btn-error btn-lg btn-block">按钮</button>

  按钮大小

  如上述,使用”btn-xs”,”btn-sm”,”btn-lg”可以设置按钮大小。

  按钮状态

  如上述,有效的有”active”,”focus”。

图片

  img-responsive:响应式图片,主要针对响应式设计。
  img-rounded:圆角。
  img-circle:圆形。
  img-thumbnail:缩略图,表现为外层加了一个边框。

图标

   bootstart内置了很多小图标。使用方式如下。其实在上面的”form-control-feedback”中已经使用了。其中”glyphicon”是必须的。
   <span class="glyphicon glyphicon-search"></span>

输入框组

  输入框组是一个”input-group”。我们需要加一些后缀(比如邮箱后缀)和前缀(金钱符号¥、$等)则需要使用到”input-group-addon”或者”input-group-btn”。语义简单清晰。如下:  

<!--邮箱-->
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-addon">@gmail.com</span>
</div>
<!--货币-->
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
<!--单选-->
<div class="input-group">
<span class="input-group-addon">
<input type="radio"/>
</span>
<input type="text" class="form-control"/>
</div>
<!--多选-->
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox"/>
</span>
<input type="text" class="form-control" />
</div>
<!--淘宝输入框组-->
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
请选择<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">宝贝</a></li>
<li><a href="javascript:void(0)">店铺</a></li>
</ul>
</div>
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-primary">搜索</button>
</span>
</div>

小结

  “form-horizontal”,”form-inline”都是表单组最外层的标签。

  一个表单组以”form-group”作为父元素。类似的还有”input-group”,以及以后可能会将的”button-group”。它们都可以设置大小。

”form-group-lg”,”input-lg”,”input-group-lg”,”btn-lg”等。

  验证样式有”has-error”,”has-success”,”has-warning”。同元素可以加上”has-feedback”。以便让验证更完整。

  按钮有很多样式,大小可以设置。

  图片常用的四个样式。

  bootstarp内置了很多图标。

  输入框组以”input-group”开头,子元素有”input-group-addon”,”input-group-btn”等等。

以上所述是小编给大家介绍的BootStrap中的表单大全,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • JS组件Form表单验证神器BootstrapValidator

    本文为大家分享了JS组件Form表单验证神器BootstrapValidator,供大家参考,具体内容如下 1.初级用法 来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3.从描述中我们就可以知道它至少需要jQuery.bootstrap的支持.我们首先引入需要的js组件: <script src="~/Scripts/jquery-1.10.2.js"></script> <sc

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

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

  • BootStrap智能表单实战系列(十一)级联下拉的支持

    什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. Bootstrap 包的内容 基本结构:Bootstrap 提供了一个带有网格系统.链接样式.背景的基本结构.这将在 Bootst

  • 妙用Bootstrap的 popover插件实现校验表单提示功能

    最近的项目,用Bootstrap比较多.浏览Bootstrap文档,发现 popover 插件特别适合做表单校验出错的提示. 因为使的非常频繁,最近把它封住下,做成 jQuery的插件. 通过 本插件,在 html标签中 定义好 data-vaild="校验正则" data-errmsg="错误信息即可".为什么 要把 校验规则 写到 html 标签中呢?因为 我还用它做了 后台 的校验规则(后台没用Node,现在用的ASP,忙完专门再发文写下原理). <in

  • 基于Bootstrap实现Material Design风格表单插件 附源码下载

    Jquery Material Form Plugin是一款基于Bootstrap的Material Design风格的jQuery表单插件.该表单通过自定义样式和jQuery来将Bootstrap的表单修改为扁平风格的表单,并带有浮动标签特效. 在线预览         源码下载 使用方法 使用该Material Design风格表单需要在页面中引入jquery,bootstrap相关文件和materialFormStyles.css.materialForm.js文件. <link rel=

  • Bootstrap实现登录校验表单(带验证码)

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

  • Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)

    本文给大家介绍如何判断表单验证的实例代码,在没给大家介绍正文之前,先给大家介绍下插件. 插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用提示 中文化: 下载插件后,将\js\bootstrapValidator\language\zh_CN.js 引入文件,即实现中文化 提交前验证表单: 更丰富一点的表单验证例子:http://www.jq22.com/yanshi522,直接上代码: <!DOCTYPE h

  • 详解Bootstrap创建表单的三种格式(一)

    在本章中,我们将学习如何使用 Bootstrap 创建表单.Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单.  Bootstrap表单类型分为三种格式:垂直或基本表单.内联表单.水平表单. 垂直或基本表单(display:block;) 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式.下面列出了创建基本表单的步骤: 向父 <form> 元素添加 role="form". 把标签和控件放在一个带有 cla

  • BootStrap中的表单大全

    表单 基础表单 对于表单中的input.textarea.select,一般我都会加上类"form-control",它设置元素的默认宽度为100%(并不是绝对,比如下述的内联表单).并且每个元素(包括label和待输入元素)都会加上"form-group".它的样式只有一个.margin-bottom:15px. <form action=""> <div class="form-group"> &l

  • 详细分析使用AngularJS编程中提交表单的方式

    在AngularJS出现之前,很多开发者就面对了表单提交这一问题.由于提交表单的方式繁杂而不同,很容易令人疯掉--然而现在看来,依然会让人疯掉. 今天,我们会看一下过去使用PHP方式提交的表单,现在如何将其转换为使用Angular提交.使用Angular来处理表单,对我而言,是一个"啊哈"时刻(译者:表示了解或发现某事物的喜悦).即使它甚至都没有涉及多少Angular表层的东西,但是它却帮助用户看到表单提交之后的潜力,并且理解两种数据绑定方式. 我们会使用jQuery平台来进行这个处理

  • 详解AngularJS中的表单验证(推荐)

    AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则式,很方便的完成验证,理论上所有的验证都可以用正则式完成 //javascript $scope.mobileRegx = "^1(3[0-9]|4[57]|5[0-35-9]|7[01678]|8[0-9])\\d{8}$"; $scope.emailRegx = "^[a-z]([a-z0-9]*[-_]?

  • Extjs中常用表单介绍与应用

    目标: 知道表单面板如何创建 了解表单面板中xtype的类型的应用 知道表单面板如何验证,绑定,取值 综合应用表单面板(玩转它) 内容: 首先我们要理解的是FormPanel也是继承panel组件的.所以它有着panel的属性 要创建一个表单面板其实很简单 var MyformPanel=new Ext.form.formpanel(); 表单面板和面板一样只是作为一个容器出现的,需要我们使用items加入各控件元素来丰富我们的表单面板, defaults:{},此属性提取了items中各组件项

  • mvc中form表单提交的三种方式(推荐)

    第一种方式:submit 按钮 提交 <form action="MyDemand" method="post"> <span>关键字:</span> <input name="keywords" type="text" value="@keywords" /> <input type="submit" value="搜索&

  • JS中input表单隐藏域及其使用方法

    一.表单隐藏域 隐藏域是用来收集或发送信息的不可见元素,对于网页的访问者来说,隐藏域是看不见的.当表单被提交时,隐藏域就会将信息用你设置时定义的名称和值发送到服务器上. 代码格式: <input type="hidden" name="..." value="..."> 属性解释: type="hidden"定义隐藏域: name属性定义隐藏域的名称,要保证数据的准确采集,必须定义一个独一无二的名称: value属

  • JS中from 表单序列化提交的代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: // ----ajax begin $.ajax({ type: "POST", url: "../compRule/updateRuleById?tids="+compTableName_val+"&isReportName="+$('#isReport_update').val()+"&heji_add="+$('#heji_update').val()

  • Yii框架中jquery表单验证插件用法示例

    本文实例讲述了Yii框架中jquery表单验证插件用法.分享给大家供大家参考,具体如下: 运行效果图如下: 视图层: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • EasyUI中在表单提交之前进行验证

    使用EasyUi我们可以在客户端表单提交之前进行验证,过程如下:只需在onSubmit的时候使用return $("#form1").form('validate')方法即可,EasyUi中form模块中的from('validate')方法会自行对我们指定的表单中required=true等需要验证的的元素进行验证,但有不通过的元素时返回一个false; $("#form1").form({ url: 'login.ashx', onSubmit: functio

随机推荐