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 EasyUI API 中文文档 - TimeSpinner时间微调器
Oct 23 Javascript
jQuery实用基础超详细介绍
Apr 11 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
js操作数组函数实例小结
Dec 10 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
vue页面跳转后返回原页面初始位置方法
Feb 11 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
vue组件创建的三种方式小结
Feb 03 Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 Javascript
js利用iframe实现选项卡效果
Aug 09 Javascript
JavaScript实现简单计时器
Jun 22 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
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
解析yii数据库的增删查改
2013/06/20 PHP
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
PHP AjaxForm提交图片上传并显示图片源码
2016/11/29 PHP
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
详解微信小程序开发之下拉刷新 上拉加载
2016/11/24 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
微信小程序picker组件下拉框选择input输入框的实例
2017/09/20 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
原生javascript自定义input[type=radio]效果示例
2019/08/27 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
python处理PHP数组文本文件实例
2014/09/18 Python
python实现端口转发器的方法
2015/03/13 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
python通过opencv实现图片裁剪原理解析
2020/01/19 Python
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
师范毕业生求职自荐信
2013/09/25 职场文书
社会实践评语
2014/04/28 职场文书
党员服务承诺书
2014/05/28 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
初三化学教学反思
2016/02/22 职场文书