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 相关文章推荐
灵活应用js调试技巧解决样式问题的步骤分享
Mar 15 Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
vue脚手架中配置Sass的方法
Jan 04 Javascript
Angular使用动态加载组件方法实现Dialog的示例
May 11 Javascript
移动端吸顶fixbar的解决方案详解
Jul 17 Javascript
node crawler如何添加promise支持
Feb 01 Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 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获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
js模拟实现Array的sort方法
2007/12/11 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
从零开始最小实现react服务器渲染详解
2018/01/26 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
JS实现图片旋转动画效果封装与使用示例
2018/07/09 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
Python实现竖排打印传单手机号码易撕条
2015/03/16 Python
Python实现批量下载图片的方法
2015/07/08 Python
Python中的id()函数指的什么
2017/10/17 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
SOKOLOV官网:俄罗斯珠宝首饰品牌
2021/01/02 全球购物
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
业务员岗位职责
2013/11/16 职场文书
销售实习自我鉴定
2013/12/07 职场文书
业务员的岗位职责
2014/03/15 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
解决Python字典查找报Keyerror的问题
2021/05/26 Python
深入理解redis中multi与pipeline
2021/06/02 Redis
python机器学习Github已达8.9Kstars模型解释器LIME
2021/11/23 Python
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android