BootStrap中的表单大全


Posted in Javascript onSeptember 07, 2016

表单

基础表单

对于表单中的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中的表单大全,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery 的扩展方法总结
Oct 01 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
js实现密码强度检验
Jan 15 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
Jun 26 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
Sep 05 Javascript
小程序实现发表评论功能
Jul 06 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jQuery实现雪花飘落效果
Aug 02 jQuery
详解vue中在父组件点击按钮触发子组件的事件
Nov 13 Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 #Javascript
JavaScript 函数模式详解及示例
Sep 07 #Javascript
jquery 属性选择器(匹配具有指定属性的元素)
Sep 06 #Javascript
jquery validate表单验证插件
Sep 06 #Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 #Javascript
js 获取元素所有兄弟节点的实现方法
Sep 06 #Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 #Javascript
You might like
PHP编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
js 学习笔记(三)
2009/12/29 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
JavaScript显式数据类型转换详解
2019/03/18 Javascript
小程序自动化测试的示例代码
2020/08/11 Javascript
jQuery实现简单弹幕制作
2020/12/10 jQuery
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
python查询mysql中文乱码问题
2014/11/09 Python
python 列表降维的实例讲解
2018/06/28 Python
python实现公司年会抽奖程序
2019/01/22 Python
详解Python正则表达式re模块
2019/03/19 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
python图形绘制奥运五环实例讲解
2019/09/14 Python
python随机模块random的22种函数(小结)
2020/05/15 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
美国室内和室外装饰花盆购物网站:ePlanters
2019/03/22 全球购物
JSF的标签库有哪些
2012/04/27 面试题
上课说话检讨书大全
2014/01/22 职场文书
计划生育证明格式及范本
2014/10/09 职场文书
父亲节感言
2015/08/03 职场文书
教师病假条范文
2015/08/17 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript
如何使用php生成zip压缩包
2021/04/21 PHP
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers
Nginx反向代理学习实例教程
2021/10/24 Servers
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技