Bootstrap源码解读表单(2)


Posted in Javascript onDecember 22, 2016

源码解读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 相关文章推荐
取得一定长度的内容,处理中文
Dec 20 Javascript
Ext对基本类型的扩展 ext,extjs,format
Dec 25 Javascript
Kibo 用于处理键盘事件的Javascript工具库
Oct 28 Javascript
js Map List 遍历使用示例
Jul 10 Javascript
jQuery向后台传入json格式数据的方法
Feb 13 Javascript
浅谈document.write()输出样式
May 07 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
vue-cli3.0 特性解读
Apr 22 Javascript
javascript学习之json入门
Dec 22 #Javascript
Bootstrap源码解读网格系统(3)
Dec 22 #Javascript
js微信支付实现代码
Dec 22 #Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 #Javascript
Html中 IFrame的用法及注意点
Dec 22 #Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 #Javascript
BootStrap3使用错误记录及解决办法
Dec 22 #Javascript
You might like
php pcntl_fork和pcntl_fork 的用法
2009/04/13 PHP
php函数指定默认值方法的小例子
2013/12/04 PHP
php内存缓存实现方法
2015/01/24 PHP
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
JavaScript中扩展Array contains方法实例
2020/08/23 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
微信小程序图表插件wx-charts用法实例详解
2019/05/20 Javascript
js尾调用优化的实现
2019/05/23 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
动态创建类实例代码
2009/10/07 Python
Python文件如何引入?详解引入Python文件步骤
2018/12/10 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
利用Pytorch实现简单的线性回归算法
2020/01/15 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
基于Tensorflow高阶读写教程
2020/02/10 Python
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
会计岗位职责范本
2014/03/07 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书