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 相关文章推荐
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
纯js写的分页表格数据为json串
Feb 18 Javascript
详解AngularJS中的作用域
Jun 17 Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
详解Angular 4.x NgTemplateOutlet
May 24 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
Jul 28 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
Jul 31 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
PM2自动部署代码步骤流程总结
Dec 10 Javascript
vue实现扫码功能
Jan 17 Javascript
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
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
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
PHP内核探索:变量概述
2014/01/30 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
用jscript启动sqlserver
2007/06/21 Javascript
javascript的键盘控制事件说明
2008/04/15 Javascript
jQuery 获取URL参数的插件
2010/03/04 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
jQuery实现仿百度帖吧头部固定导航效果
2015/08/07 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
jquery ajaxfileupload异步上传插件使用详解
2017/02/08 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
jQuery.parseJSON()函数详解
2019/02/28 jQuery
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
使用go和python递归删除.ds store文件的方法
2014/01/22 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
python计算列表内各元素的个数实例
2018/06/29 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
CLR与IL分别是什么含义
2016/08/23 面试题
开朗女孩的自我评价
2014/02/10 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
商务信函英语问候语
2015/11/10 职场文书
详解JS ES6编码规范
2021/05/07 Javascript
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android