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 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
用javascript操作xml
Nov 04 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
js实现延迟加载的方法
Jun 24 Javascript
bootstrap-treeview自定义双击事件实现方法
Jan 09 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
Sep 01 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
jQuery创建折叠式菜单
Jun 15 jQuery
js实现超级玛丽小游戏
Mar 18 Javascript
Vue中keep-alive组件的深入理解
Aug 23 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+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
php错误提示failed to open stream: HTTP request failed!的完美解决方法
2011/06/06 PHP
php自定义函数call_user_func和call_user_func_array详解
2011/07/14 PHP
漂亮的jquery提示效果(仿腾讯弹出层)
2013/02/05 Javascript
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
解析jquery获取父窗口的元素
2013/06/26 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
2016/06/24 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
原生JavaScript实现五子棋游戏
2020/11/09 Javascript
Python中使用PIL库实现图片高斯模糊实例
2015/02/08 Python
Python实现网站注册验证码生成类
2017/06/08 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
python中的print()输出
2019/04/12 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
构建高效的python requests长连接池详解
2020/05/02 Python
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
环境工程毕业生自荐信
2013/11/17 职场文书
生物学学生自我评价
2014/01/17 职场文书
教师简历自我评价
2014/02/03 职场文书
商场消防演习方案
2014/02/12 职场文书
党员违纪检讨书
2014/02/18 职场文书
高三毕业典礼主持词
2014/03/27 职场文书
团日活动总结报告
2014/06/25 职场文书
卫生院义诊活动总结
2015/05/07 职场文书
高质量“欢迎词”
2019/04/03 职场文书