Bootstrap源码解读表单（2）

源码解读Bootstrap表单

基础表单

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

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

水平表单

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

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

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

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

实现源码：

表单控件大小

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

表单控件状态

焦点状态

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

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

禁用状态

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

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

验证状态

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

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

表单提示信息

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

实现源码如下：

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

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

按钮

使用类名“btn”，例如： 实现源码：

默认按钮

使用“.btn-default”。例如：

实现源码：

多标签支持

除了使用

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

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

定制风格

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

按钮大小

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

块状按钮

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

图像

标签上添加对应的类名可以实现不同的风格： .img-responsive：响应式图片，主要针对于响应式设计 .img-rounded：圆角图片 .img-circle：圆形图片 .img-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的字体文件。 用法如下： 所有icon都是以”glyphicon-”前缀的类名开始，然后后缀表示图标的名称。 所有名称可以到这里查看： 除了使用glyphicon.com提供的图标之外，还可以使用第三方为Bootstrap框架设计的图标字体，如Font Awesome()。使用方法和上面介绍的一样，不过要记得将字体下载到本地。

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!