源码解读Bootstrap表单

基础表单

对于基础表单，Bootstrap并未对其做太多的定制性效果设计，仅仅对表单内的fieldset、legend、label标签进行了定制。主要将这些元素的margin、padding和border等进行了细化设置。
这些元素如果使用了类名“form-control”，将会实现一些设计上的定制效果。

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

水平表单

在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：
1. 在<form>元素是使用类名“form-horizontal”。
2. 配合Bootstrap框架的网格系统。

在<form>元素上使用类名“form-horizontal”主要有以下几个作用：
1. 设置表单控件padding和margin值。
2. 改变“form-group”的表现形式，类似于网格系统的“row”

如果要将表单的控件都在一行内显示，在<form>元素中添加类名“form-inline”即可。

表单控件

单行输入框

input的type属性值为text

下拉选择框

单行的下拉选择框直接用select标签，
多行的滚动选择框要加上multiple属性，如：<select multiple class="form-control">

文本域

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

复选框和单选框

Bootstrap框架中checkbox和radio有点特殊，Bootstrap针对他们做了一些特殊化处理，checkbox和radio与label标签配合使用会出现一些小问题（如对齐问题）得以解决。例如：

<form role="form">
  <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>

我们可以发现，
1. 不管是checkbox还是radio都使用label包起来
2. checkbox连同label标签放置在一个名为“.checkbox”的容器内
3. radio连同label标签放置在一个名为“.radio”的容器内
在Bootstrap框架中，主要借助“.checkbox”和“.radio”样式，来处理复选框、单选按钮与标签的对齐方式。
源码：

.radio,
.checkbox {
display: block;
min-height: 20px;
padding-left: 20px;
margin-top: 10px;
margin-bottom: 10px;
}
.radio label,
.checkbox label {
display: inline;
font-weight: normal;
cursor: pointer;
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
float: left;
margin-left: -20px;
}
.radio + .radio,
.checkbox + .checkbox {
margin-top: -5px;
}

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

如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”;
如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”。
例如：

<form role="form">
  <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>

实现源码：

.radio-inline,
.checkbox-inline {
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px;
}

表单控件大小

可以通过设置控件的height，line-height，padding和font-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名，用来控制表单控件的高度。这两个类名是：
1. input-sm:让控件比正常大小更小
2. input-lg:让控件比正常大小更大
这两个类适用于表单中的input，textarea和select控件。
实现源码如下：

.input-sm {
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
select.input-sm {
height: 30px;
line-height: 30px;
}
textarea.input-sm,
select[multiple].input-sm {
height: auto;
}
.input-lg {
height: 46px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
select.input-lg {
height: 46px;
line-height: 46px;
}
textarea.input-lg,
select[multiple].input-lg {
height: auto;
}

表单控件状态

焦点状态

焦点状态的实现源码如下：

.form-control:focus {
border-color: #66afe9;
outline: 0;
 -webkit-box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

可以看出，要让控件在焦点状态下有上面样式效果，给控件添加类名“form-control”即可。
另外，file、radio和checkbox控件在焦点状态下的效果也与普通的input控件不太一样，实现源码如下：

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}

禁用状态

Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的，在相应的表单控件上添加属性“disabled”。
实现源码如下：

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: #eee;
opacity: 1;
}

如果fieldset设置了disabled属性，整个域都将处于被禁用状态。不过如果legend中有输入框的话，这个输入框是无法被禁用的。

验证状态

在Bootstrap框架中提供这几种验证效果。
1. .has-warning:警告状态（黄色）
2. .has-error：错误状态（红色）
3. .has-success：成功状态（绿色）
使用的时候只需要在form-group容器上对应添加状态类名。
例如：

<div class="form-group has-error">
  <label class="control-label" for="inputError1">错误状态</label>
  <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
</div>

如果让表单在对应的状态下显示 对应的icon 出来，比如成功是一个对号√，错误是一个叉号×，那就要在对应的状态下添加类名“has-feedback”，此类名要与“has-error”、“has-warning”和“has-success”在一起，并且表单中要添加一个span元素。例如：

<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>

表单提示信息

使用一个”help-block”样式，将提示信息以块状显示，并且显示在控件底部。例如：

<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>

实现源码如下：

.help-block {
display: block;
margin-top: 5px;
margin-bottom: 10px;
color: #737373;
}

这个信息是显示在下面一行，如果想要显示在同一行内，可以使用类名“help-inline”，不过这个只有Bootstrap V2.x版本中有，Bootstrap V3.x版本中没有了，实现代码如下：

.help-inline{
 display:inline-block;
 padding-left:5px;
 color: #737373;
}

如果你不想为bootstrap.css增加自己的代码，但是又有这样的需求，那么只能借助于Bootstrap的网格系统。例如：

<div class="form-group">
  <label class="control-label" for="inputSuccess1">成功状态</label>
  <div class="row">
    <div class="col-xs-6">
      <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
    </div>
    <span class="col-xs-6 help-block">你输入的信息是正确的</span>
  </div>
</div>

按钮

基本按钮

使用类名“btn”，例如：<button class="btn" type="button">基本按钮</button>
实现源码：

.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
 -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}

默认按钮

使用“.btn-default”。例如：<button class="btn btn-default" type="button">默认按钮</button>
实现源码：

.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}

多标签支持

除了使用<button>标签元素来制作按钮，还可以在别的标签上添加类名“btn”来制作按钮。例如：

<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<span class="btn btn-default">span标签按钮</span>
<div class="btn btn-default">div标签按钮</div>
<label class="btn btn-default">label标签按钮</label>
<a href="##" class="btn btn-default">a标签按钮</a>

不过为了避免浏览器兼容性问题，建议还是使用button或a标签来制作按钮。

定制风格

有如下几种风格的按钮可用：
.btn-primary 主要按钮
.btn-success 成功按钮
.btn-success 信息按钮
.btn-warning 警告按钮
.btn-danger 危险按钮
.btn-link 链接按钮

按钮大小

.btn-lg 大型按钮
.btn-sm 小型按钮
.btn-xs 超小型按钮

块状按钮

使用类名“btn-block”可以让按钮充满整个容器，并且这个按钮不会有任何的padding和margin值。
实现源码：

.btn-block {
display: block;
width: 100%;
padding-right: 0;
padding-left: 0;
}
.btn-block + .btn-block {
margin-top: 5px;
}
input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
width: 100%;
}

图像

<img>标签上添加对应的类名可以实现不同的风格：
.img-responsive：响应式图片，主要针对于响应式设计
.img-rounded：圆角图片
.img-circle：圆形图片
.img-thumbnail：缩略图片
实现源码：

img {
vertical-align: middle;
}
.img-responsive,
.thumbnail>img,
.thumbnail a >img,
.carousel-inner > .item >img,
.carousel-inner > .item > a >img {
display: block;
max-width: 100%;
height: auto;
}
.img-rounded {
border-radius: 6px;
}
.img-thumbnail {
display: inline-block;
max-width: 100%;
height: auto;
padding: 4px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
 -webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.img-circle {
border-radius: 50%;
}

图标

Bootstrap框架中的图标都是字体图标，其实现原理就是通过@font-face属性加载了字体。在Bootstrap框架中有一个fonts的目录，这个目录中提供的字体文件就是用于制作icon的字体文件。
用法如下：<span class="glyphicon glyphicon-search"></span>
所有icon都是以”glyphicon-”前缀的类名开始，然后后缀表示图标的名称。
所有名称可以到这里查看：http://getbootstrap.com/components/#glyphicons
除了使用glyphicon.com提供的图标之外，还可以使用第三方为Bootstrap框架设计的图标字体，如Font Awesome(http://www.bootcss.com/p/font-awesome/)。使用方法和上面介绍的一样，不过要记得将字体下载到本地。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# Bootstrap  # 表单  # 基于Bootstrap+jQuery.validate实现Form表单验证  # JS组件Form表单验证神器BootstrapValidator  # 全面解析Bootstrap表单使用方法（表单按钮）  # Bootstrap实现登录校验表单(带验证码)  # 全面解析Bootstrap表单使用方法（表单样式）  # 详解Bootstrap创建表单的三种格式（一）  # 实用又漂亮的BootstrapValidator表单验证插件  # 基于bootstrap插件实现autocomplete自动完成表单  # Bootstrap每天必学之表单  # 基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路  # 要在  # 中有  # 只需  # 是一个  # 状态下  # 还可以  # 输入框  # 复选框  # 提示信息  # 这两个  # 几种  # 中要  # 进行了  # 单选  # 自己的  # 都是  # 圆角  # 容器内  # 几个 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 微信小程序制作网站有哪些,微信小程序需要做网站吗？  php结合redis实现高并发下的抢购、秒杀功能的实例  JavaScript数据类型有哪些_如何准确判断一个变量的类型  phpredis提高消息队列的实时性方法(推荐)  如何快速搭建高效WAP手机网站？  如何快速查询网址的建站时间与历史轨迹？  音响网站制作视频教程,隆霸音响官方网站？  Gemini手机端怎么发图片_Gemini手机端发图方法【步骤】  Laravel如何连接多个数据库_Laravel多数据库连接配置与切换教程  轻松掌握MySQL函数中的last_insert_id()  香港服务器部署网站为何提示未备案？  如何构建满足综合性能需求的优质建站方案？  在线ppt制作网站有哪些软件,如何把网页的内容做成ppt？  成都网站制作公司哪家好,四川省职工服务网是做什么用？  googleplay官方入口在哪里_Google Play官方商店快速入口指南  Laravel如何清理系统缓存命令_Laravel清除路由配置及视图缓存的方法【总结】  网站广告牌制作方法,街上的广告牌，横幅，用PS还是其他软件做的？  详解MySQL数据库的安装与密码配置  Laravel如何实现全文搜索_Laravel Scout集成Algolia或Meilisearch教程  Microsoft Edge如何解决网页加载问题 Edge浏览器加载问题修复  简单实现jsp分页  悟空识字怎么关闭自动续费_悟空识字取消会员自动扣费步骤  如何用VPS主机快速搭建个人网站？  Laravel如何实现RSS订阅源功能_Laravel动态生成网站XML格式订阅内容【教程】  如何快速搭建个人网站并优化SEO？  用yum安装MySQLdb模块的步骤方法  Laravel如何处理表单验证？（Requests代码示例）  js实现获取鼠标当前的位置  android nfc常用标签读取总结  如何自定义建站之星模板颜色并下载新样式？  网站制作大概要多少钱一个,做一个平台网站大概多少钱？  网站制作公司哪里好做,成都网站制作公司哪家做得比较好，更正规？  如何快速查询网站的真实建站时间？  HTML5段落标签p和br怎么选_文本排版常用标签对比【解答】  HTML 中动态设置元素 name 属性的正确语法详解  如何挑选高效建站主机与优质域名？  如何在阿里云ECS服务器部署织梦CMS网站？  如何在Windows服务器上快速搭建网站？  三星、SK海力士获美批准：可向中国出口芯片制造设备  b2c电商网站制作流程,b2c水平综合的电商平台？  西安市网站制作公司,哪个相亲网站比较好?西安比较好的相亲网站？  中山网站制作网页,中山新生登记系统登记流程？  为什么php本地部署后css不生效_静态资源加载失败修复技巧【技巧】  深圳防火门网站制作公司,深圳中天明防火门怎么编码？  高端网站建设与定制开发一站式解决方案 中企动力  如何在Windows虚拟主机上快速搭建网站？  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？  edge浏览器无法安装扩展 edge浏览器插件安装失败【解决方法】  Laravel API路由如何设计_Laravel构建RESTful API的路由最佳实践  打造顶配客厅影院，这份100寸电视推荐名单请查收