全面解析Bootstrap表单样式的使用


Posted in Javascript onSeptember 09, 2016

本文主要给大家介绍了bootstrap表单样式的使用知识,非常不错,一起看看吧!

表单

<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">邮箱:</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 记住密码
</label>
</div>
<button type="submit" class="btn btn-default">进入邮箱</button>
</form>

效果图:

全面解析Bootstrap表单样式的使用

class: form-control

1、宽度变成了100%,2、设置了一个浅灰色(#ccc)的边框,3、具有4px的圆角,4、设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化,5、设置了placeholder的颜色为#999

2、水平表单:

Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右)

<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> 记住密码
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">进入邮箱</button>
</div>
</div>
</form>

效果图:

全面解析Bootstrap表单样式的使用 

在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件:

1、在元素是使用类名“form-horizontal”。

2、配合Bootstrap框架的网格系统。

在元素上使用类名“form-horizontal”主要有以下几个作用:

- 设置表单控件padding和margin值。
- 改变“form-group”的表现形式,类似于网格系统的“row”。

3、水平表单:

在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在元素中添加类名“form-inline”即可。
内联表单实现原理非常简单,欲将表单控件在一行显示,就需要将表单控件设置成内联块元素(display:inline-block)。

<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">邮箱</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">密码</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 记住密码
</label>
</div>
<button type="submit" class="btn btn-default">进入邮箱</button>
</form>

效果图:

全面解析Bootstrap表单样式的使用

4、输入框input

单行输入框,常见的文本输入框,也就是input的type属性值为text。在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式.

<form role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入用户名"/> 
</div>
</form>

效果图:

全面解析Bootstrap表单样式的使用

5、下拉选择框select

Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple。Bootstrap框架会为这些元素提供统一的样式风格。

<form role="form">
<div class="form-group">
<select class="form-control"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option>5</option> 
</select>
</div>
<div class="form-group">
<select multiple class="form-control"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option>5</option> 
</select>
</div>
</form>

效果图:

全面解析Bootstrap表单样式的使用

6、文本域textarea

文本域和原始使用方法一样,设置rows可定义其高度,设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。

<form role="form">
<div class="form-group">
<textarea class="form-control" rows="3"></textarea>
</div>
</form>

效果图:

全面解析Bootstrap表单样式的使用

7.复选框checkbox和单选择按钮radio

Bootstrap框架中checkbox和radio有点特殊,Bootstrap针对他们做了一些特殊化处理,主要是checkbox和radio与label标签配合使用会出现一些小问题(最头痛的是对齐问题)。使用Bootstrap框架,开发人员无需考虑太多,只需要按照下面的方法使用即可。

<form role="form">
<h3>案例1</h3>
<div class="checkbox">
<label>
<input type="checkbox" value="">
记住密码
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
喜欢
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
不喜欢
</label>
</div>
</form>

效果图:

全面解析Bootstrap表单样式的使用

8.复选框和单选按钮水平排列

有时候,为了布局的需要,将复选框和单选按钮需要水平排列。Bootstrap框架也做了这方面的考虑:

1、如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline”

2、如果radio需要水平排列,只需要在label标签上添加类名“radio-inline”

<form role="form">
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" value="option1">游戏
</label>
<label class="checkbox-inline">
<input type="checkbox" value="option2">摄影
</label>
<label class="checkbox-inline">
<input type="checkbox" value="option3">旅游
</label>
</div>
<div class="form-group">
<label class="radio-inline">
<input type="radio" value="option1" name="sex">男性
</label>
<label class="radio-inline">
<input type="radio" value="option2" name="sex">女性
</label>
<label class="radio-inline">
<input type="radio" value="option3" name="sex">中性
</label>
</div>
</form>

效果图:

全面解析Bootstrap表单样式的使用

9.按钮

在Bootstrap框架中的按钮都是采用来实现

<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Button</th>
<th>class=""</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><button class="btn" href="#">Default</button></td>
<td><code>btn</code></td>
<td>Standard gray button with gradient</td>
</tr>
<tr>
<td><button class="btn btn-primary" href="#">Primary</button></td>
<td><code>btn btn-primary</code></td>
<td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
</tr>
<tr>
<td><button class="btn btn-info" href="#">Info</button></td>
<td><code>btn btn-info</code></td>
<td>Used as an alternative to the default styles</td>
</tr>
<tr>
<td><button class="btn btn-success" href="#">Success</button></td>
<td><code>btn btn-success</code></td>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<td><button class="btn btn-warning" href="#">Warning</button></td>
<td><code>btn btn-warning</code></td>
<td>Indicates caution should be taken with this action</td>
</tr>
<tr>
<td><button class="btn btn-danger" href="#">Danger</button></td>
<td><code>btn btn-danger</code></td>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
<tr>
<td><button class="btn btn-inverse" href="#">Inverse</button></td>
<td><code>btn btn-inverse</code></td>
<td>Alternate dark gray button, not tied to a semantic action or use</td>
</tr>
</tbody>
</table>

效果图:

全面解析Bootstrap表单样式的使用

10.表单控件大小

前面看到的表单控件都正常的大小。可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名,用来控制表单控件的高度。这两个类名是:

1、input-sm:让控件比正常大小更小

2、input-lg:让控件比正常大小更大

这两个类适用于表单中的input,textarea和select控件.

<form role="form">
<div class="form-group">
<label class="control-label">控件变大</label>
<input class="form-control input-lg" type="text" placeholder="添加.input-lg,控件变大">
</div>
<div class="form-group">
<label class="control-label">正常大小</label>
<input class="form-control" type="text" placeholder="正常大小">
</div> 
<div class="form-group">
<label class="control-label">控件变小</label>
<input class="form-control input-sm" type="text" placeholder="添加.input-sm,控件变小">
</div> 
</form>

效果图:

全面解析Bootstrap表单样式的使用

11.表单控件状态(禁用状态)

Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的,在相应的表单控件上添加属性“disabled”。具体的看下面的代码

禁用单个表单标签,只需要在标签的属性中加入disabled

<form role="form" class="form-horizontal">
<div class="form-group">
<div class="col-xs-6">
<input class="form-control input-lg" id="disabledInput" type="text" placeholder="表单已被禁用,不可输入" disabled>
</div>
</div> 
</form>

效果图:

全面解析Bootstrap表单样式的使用

在Bootstrap框架中,如果fieldset设置了disabled属性,整个域都将处于被禁用状态。

<form role="form">
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">禁用的输入框</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
</div>
<div class="form-group">
<label for="disabledSelect">禁用的下拉框</label>
<select id="disabledSelect" class="form-control">
<option>不可选择</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 无法选择
</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</fieldset>
</form>

效果图:

全面解析Bootstrap表单样式的使用

据说对于整个禁用的域中,如果legend中有输入框的话,这个输入框是无法被禁用的。

form role="form">
<fieldset disabled>
<legend><input type="text" class="form-control" placeholder="显然我颜色变灰了,但是我没被禁用,不信?单击试一下" /></legend>
<div class="form-group">
<label for="disabledTextInput">禁用的输入框</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
</div>
<div class="form-group">
<label for="disabledSelect">禁用的下拉框</label>
<select id="disabledSelect" class="form-control">
<option>不可选择</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 无法选择
</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</fieldset>
</form>

效果图:

全面解析Bootstrap表单样式的使用

表单验证状态

在制作表单时,不免要做表单验证。同样也需要提供验证状态样式,在Bootstrap框架中同样提供这几种效果。

1、.has-warning:警告状态(黄色)

2、.has-error:错误状态(红色)

3、.has-success:成功状态(绿色)

很多时候,在表单验证的时候,不同的状态会提供不同的 icon,比如成功是一个对号(√),错误是一个叉号(×)等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示 icon 出来,只需要在对应的状态下添加类名“has-feedback”。请注意,此类名要与“has-error”、“has-warning”和“has-success”在一起:

<form role="form">
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">成功状态</label>
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态">
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">警告状态</label>
<input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">错误状态</label>
<input type="text" class="form-control" id="inputError1" placeholder="错误状态">
</div>
</form>
<br>
<br>
<br>
<form role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess1">成功状态</label>
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning1">警告状态</label>
<input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError1">错误状态</label>
<input type="text" class="form-control" id="inputError1" placeholder="错误状态">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</form>

效果图:

全面解析Bootstrap表单样式的使用

全面解析Bootstrap表单样式的使用

表单提示信息

平常在制作表单验证时,要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个”help-block”样式,将提示信息以块状显示,并且显示在控件底部。

<form role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess1">成功状态</label>
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态">
<span class="help-block">你输入的信息是正确的</span>
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning1">警告状态</label>
<input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
<span class="help-block">请输入正确信息</span>
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError1">错误状态</label>
<input type="text" class="form-control" id="inputError1" placeholder="错误状态">
<span class="help-block">你输入的信息是错误的</span>
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</form>

效果图:

全面解析Bootstrap表单样式的使用

以上所述是小编给大家介绍的Bootstrap表单样式的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js jquery做的图片连续滚动代码
Jan 06 Javascript
jQuery Flash/MP3/Video多媒体插件
Jan 18 Javascript
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 Javascript
jquery select下拉框操作的一些说明
Apr 02 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
分享一个插件实现水珠自动下落效果
Jun 01 Javascript
jquery dataview数据视图插件使用方法
Dec 23 Javascript
BootStrap Tooltip插件源码解析
Dec 27 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
浅谈node中的cluster集群
Jun 02 Javascript
vue实现路由切换改变title功能
May 28 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
Aug 12 Javascript
jQuery+ajax读取并解析XML文件的方法
Sep 09 #Javascript
JS与jQuery实现隔行变色的方法
Sep 09 #Javascript
jQuery层次选择器用法示例
Sep 09 #Javascript
jQuery基本过滤选择器用法示例
Sep 09 #Javascript
jQuery可见性过滤选择器用法示例
Sep 09 #Javascript
javascript比较语义化版本号的实现代码
Sep 09 #Javascript
js防阻塞加载的实现方法
Sep 09 #Javascript
You might like
php 魔术函数使用说明
2010/02/21 PHP
ajax+php打造进度条代码[readyState各状态说明]
2010/04/12 PHP
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
php生成Android客户端扫描可登录的二维码
2016/05/13 PHP
强制设为首页代码
2006/06/19 Javascript
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
JS编程小常识很有用
2012/11/26 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
bootstrap table配置参数例子
2017/01/05 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
基于jQuery实现滚动刷新效果
2017/01/09 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
VUE实现密码验证与提示功能
2019/10/18 Javascript
[59:35]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第一场 1月8日
2021/03/11 DOTA
python查找目录下指定扩展名的文件实例
2015/04/01 Python
在Python程序中操作MySQL的基本方法
2015/07/29 Python
python dict.get()和dict['key']的区别详解
2016/06/30 Python
python图书管理系统
2020/04/05 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
python集合删除多种方法详解
2020/02/10 Python
Dower & Hall官网:英国小众轻奢珠宝品牌
2019/01/31 全球购物
2014年团委工作总结
2014/11/13 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
小学教师教学反思
2016/02/24 职场文书
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL