Bootstrap源码解读表单（2）

更新时间：2016年12月22日 17:00:34 作者：艺术就是爆炸

这篇文章主要源码解读了Bootstrap表单，介绍了Bootstrap各式各样的表单,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

源码解读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/)。使用方法和上面介绍的一样，不过要记得将字体下载到本地。

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

您可能感兴趣的文章:

JavaScript面试题大全(推荐)
在javascript开发中，js面试题是必问的一项，今天小编抽时间给大家整理些js常见的面试题，对js面试题相关知识感兴趣的朋友一起看看吧
2016-09-09
JavaScript高级程序设计阅读笔记（二十一） JavaScript中的XML
虽然XML和DOM已经变成Web开发的重要组成部分，但目前仅IE跟Mozilla支持客户端的XML处理
2012-09-09
js判断两个日期是否相等的方法
大家一定遇到过这样的情况，有两个日期对象，然后需要判断他们是否相等，下面来说下判断的方法
2013-09-09
JS字符串去除连续或全部重复字符的实例
这篇文章主要介绍了JS字符串去除连续或全部重复字符的实例,需要的朋友可以参考下
2018-03-03
JS+Canvas实现接球小游戏的示例代码
本文主要为大家详细介绍了如何利用JS+Canvas实现接球小游戏，文中的示例代码讲解详细，对我们学习有一定的帮助，感兴趣的小伙伴可以了解一下
2022-06-06
在JavaScript中对字符串进行索引、拆分和操作的示例代码
字符串是一个包含一个或多个字符的序列,可以由字母、数字或符号组成,在本教程中,我们将学习字符串原始值和String对象之间的区别,字符串的索引方式,如何访问字符串中的字符,以及字符串常用的属性和方法,需要的朋友可以参考下
2024-06-06
js 鼠标事件的抓取
鼠标事件的抓取实现代码，需要的朋友可以参考下。
2010-04-04
浅谈webpack-dev-server的配置和使用
本篇文章主要介绍了浅谈webpack-dev-server的配置和使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
js运算精度丢失的2个解决方法
近期在做项目的时候,遇到了一些JS浮点数精度的问题,这个问题其实说大不大,说小不小,下面这篇文章主要给大家介绍了关于js运算精度丢失的2个解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-06-06
xml转json的js代码
xml转json的js代码，需要的朋友可以参考下
2012-08-08

Bootstrap源码解读表单（2）

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具