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 相关文章推荐
5 cool javascript apps
Mar 24 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
Jul 22 Javascript
toggle()隐藏问题的解决方法
Feb 17 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
利用node.js如何创建子进程详解
Dec 09 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
vue.extend与vue.component的区别和联系
Sep 19 Javascript
js 动态校验开始结束时间的实现代码
May 25 Javascript
js判断鼠标移入移出方向的方法
Jun 24 Javascript
详细介绍Next.js脚手架完整搭建封装
Apr 26 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命令行用法
2015/02/04 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
jQuery 表格插件整理
2010/04/27 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
js实时获取并显示当前时间的方法
2015/07/31 Javascript
浅析jQuery操作select控件的取值和设值
2016/12/07 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
Vue的百度地图插件尝试使用
2017/09/06 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
2018/08/06 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
详解package.json版本号规则
2019/08/01 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
python executemany的使用及注意事项
2017/03/13 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
python小程序基于Jupyter实现天气查询的方法
2020/03/27 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
英国在线药房:Express Chemist
2019/03/28 全球购物
小加工厂管理制度
2014/01/21 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
婚礼主持词开场白
2014/03/13 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
酒桌上的祝酒词
2015/08/12 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
教你怎么用Python操作MySql数据库
2021/05/31 Python