基础

规范思路

1.模块化每一块布局，头底部化标准化后，中间进行栅格布局。 2.大布局分为：居中式（中间1080px显示）、全屏左右式（自由定义左右比例） 3.统一的html结构（dom树）； 4.css在基础ui上规范后进行扩展,模块内可以使用快捷css进行辅助； 5.js模块分为： 全局公用模块（每个应用都会用到的模块，如：头部导航）存放在dist/comjs、 基础模块（ui基础的交互，交互加强，如：按钮事件，下拉菜单事件，上传等）存放在js/common_cadr、 特殊模块（单一应用里特有的js交互）存放在js/special_cadrX_X

HTML页面基础

本规范使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。 
<!DOCTYPE html>
<html lang="zh-CN">
  ...
</html>
以及规定了一些mate标签，用于限制一些浏览器行为， 
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
整体html规范 1.整体页面给body添加了.qkybody样式，里面由.navbar头部，.container（居中式）或者.container-fluid（全屏式）中部，.footer底部组成; 
<bodyclass="qkybody">
<div class="navbar navbar-inverse navbar-fixed-top"></div>
<div class="container">
  ...
</div>
<div class="footer inverse">全通教育集团（广东）股份有限公司  版权所有  ©2007-2015</div>
</body>
2.一切布局在.container（居中式）或者.container-fluid（全屏式）里布局； 3.居中式有分为普通四个档位
1080px.container，
1200px.container-md，
1366px.container-l，
1440px.container-xl
当选了一个非百分比档位后，用小于这个分辨率的屏幕打开后，自动变成全屏模式
也有百分比档位（90%.container-p90，80%.container-p80，60%.container-p60）
在开发项目的时候请选择一个适合你项目的档位进行开发，一但选择了一个档位后，你整个项目就只能用这个档位了，不允许一个项目里用上两个或者两个以上的档位

CSS样式基础说明

1.给body加上了backgroud-color：#eaeaea;的背景色； 2.给所有元素加上了默认14px的字体和微软雅黑； 3.给所有元素加上了box-sizing:border-box,内边距和边框算在宽度里，就是width的值会自动包含padding，border； 4.为所有链接设置了基本颜色color: #00BBBD;，并且当链接处于 :hover 状态时才添加下划线,不需要的时候可以自行在指定a元素中去掉；

颜色基础

以下颜色标准可以通过快捷css样式增加，在自由模块里允许在模块css里直接写css。
链接颜色
#00BBBD 链接颜色
#008283 链接Hover颜色（链接颜色+黑色【30%透明度】）
整体颜色 可以自己定义一个应用的主色调，然后制造出一个或者两个辅助色，这些颜色是同一个色系就行了,本规范默认了这个#2BAF2B为主色调
#2BAF2B 主色调 使用快捷样式mian_background
#72D572 辅助色1 使用快捷样式assist_background
#A3E9A4 辅助色2 使用快捷样式minor_background
改变主色调的方式是，用替换方式，把所有用了主色调的css全部替换成你想用的新主色调，其他辅助色也一样，也可以把css抽出来，创建个主题css，进行覆盖qkybasex.x.css
字体颜色
#333333 一级文字 使用快捷样式h1_background
#737373 二级文字 使用快捷样式h2_background
#999999 三级文字/提示文字 使用快捷样式h3_background
#F0485F 报错文字 使用快捷样式error_background
布局框架颜色
#F5F5F5 当前内容选中背景色 & 表格Title背景色 使用快捷样式ba_f5
#F4F4F4 页面背景色 使用快捷样式ba_f4
#DFDFDF 卡片内部内容分隔线色 使用快捷样式br_df
#D8D8D8 卡片描边色 使用快捷样式br_d8
#D4D4D4 按钮描边色 & 表单控件描边色使用快捷样式br_d4

字体基础

字体
微软雅黑 中文简体首选字体
Helvetica 英文首选字体
Microsoft JhengHei 中文繁体首选字体
尺寸
以下字号标准可以通过快捷css样式增加，在自由模块里允许在模块css里直接写css。最小为13px，用于辅助性提示。
演示文字 微软雅黑 24px 使用快捷样式fz_24
演示文字 微软雅黑 22px 使用快捷样式fz_22
演示文字 微软雅黑 20px 使用快捷样式fz_20
演示文字 微软雅黑 16px 使用快捷样式fz_16
演示文字 微软雅黑 14px 使用快捷样式fz_14
演示文字 微软雅黑 13px 使用快捷样式fz_13

2.布局排版

2.1.头底部规范

头部 头部和底部为固定标准，其css和html为封装形式，头部只要调用如下： 
<div class="navbar navbar-inverse navbar-fixed-top"></div>
头部有两种颜色选择，深色调.navbar-inverse浅色调.navbar-default ，头部内容配置看起步的头部配置。 底部 底部为根据页面的高度自动摆放在底部，不用任何js来支持，纯css支持。底部为： 
<div class="footer inverse">全通教育集团（广东）股份有限公司  版权所有  ©2007-2015</div>
其中的文字描述可修改对应项目的版权所有

2.2.栅格系统

本规范的栅格系统完全来源于Bootstrap，其提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
简介 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
  • 1.“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
  • 2.通过“行（row）”在水平方向创建一组“列（column）”。
  • 3.你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
  • 4.类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
  • 5.通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
  • 6.负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
  • 7.栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
  • 8.如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
  • 9.栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。
通过研究后面的实例，可以将这些原理应用到你的代码中。 媒体查询 在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。 
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
我们偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内。 
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
栅格参数 通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)
栅格系统行为 总是水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度 None （自动） 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列（column）数 12
最大列（column）宽 自动 ~62px ~81px ~97px
槽（gutter）宽 30px （每列左右均有 15px）
可嵌套 是
偏移（Offsets） 是
列排序 是
实例：从堆叠到水平排列 使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>
实例：流式布局容器 将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。 
<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>
实例：移动设备和桌面屏幕

是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即 .col-xs-* 和 .col-md-*。请看下面的实例，研究一下这些是如何工作的。

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>
实例：手机、平板、桌面

在上面案例的基础上，通过使用针对平板设备的 .col-sm-* 类，我们来创建更加动态和强大的布局吧。

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
实例：多余的列（column）将另起一行排列

如果在一个 .row 内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列。

.col-xs-9
.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-xs-6
Subsequent columns continue along the new line.
<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>
响应式列重置

即便有上面给出的四组栅格class，你也不免会碰到一些问题，例如，在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用 .clearfix。

.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

除了列在分界点清除响应， 您可能需要 重置偏移, 后推或前拉某个列。

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>
列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
嵌套列

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6 
<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>
列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

2.3.卡片式排版

2.3.1.说明

在整体用上了栅格式布局后，在每个布局里进行模块布局了，模块布局的主体视觉为卡片式，由于模块会有很多特殊性，所以卡片式只规范了一个外壳样式，本规范默认的外壳样式为，
卡片填充背景色#FFFFFF,卡片描边色#D8D8D8,卡片内容分隔线色#DFDFDF
卡片模块外壳样式为.qkycadr

2.3.2.演示

模块1呈现区域
模块2呈现区域
模块3呈现区域

2.3.3.代码

2.4.文字排版

页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>
中心内容

通过添加 .lead 类可以让段落突出显示。

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">...</p>
内联文本元素 标记文本

若要突出其在另一上下文中的相关性而运行文本，请使用<mark> 标签.

You can use the mark tag to highlight text.

You can use the mark tag to <mark>highlight</mark> text.
被删除的文

对于被删除的文本使用 <del> 标签。

This line of text is meant to be treated as deleted text.

<del>This line of text is meant to be treated as deleted text.</del>
无用文本

对于没用的文本使用 <s> 标签。

This line of text is meant to be treated as no longer accurate.

<s>This line of text is meant to be treated as no longer accurate.</s>
插入文本

额外插入的文本使用 <ins> 标签。

This line of text is meant to be treated as an addition to the document.

<ins>This line of text is meant to be treated as an addition to the document.</ins>
带下划线的文本

为文本添加下划线，使用 <u> 标签。

This line of text will render as underlined

<u>This line of text will render as underlined</u>

利用 HTML 自带的表示强调意味的标签来为文本增添少量样式。

小号文本

对于不需要强调的inline或block类型的文本，使用 <small> 标签包裹，其内的文本将被设置为父容器字体大小的 85%。标题元素中嵌套的 <small> 元素被设置不同的 font-size 。

你还可以为行内元素赋予 .small 类以代替任何 <small> 元素。

This line of text is meant to be treated as fine print.

<small>This line of text is meant to be treated as fine print.</small>
着重

通过增加 font-weight 值强调一段文本。

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>
斜体

用斜体强调一段文本。

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>
对齐

通过文本对齐类，可以简单方便的将文字重新对齐。

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
改变大小写

通过这几个类可以改变文本的大小写。

Lowercased text.

Uppercased text.

Capitalized text.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
缩略语

当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的 <abbr> 元素的增强样式。缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）, 但需要包含 title 属性。

基本缩略语

An abbreviation of the word attribute is attr.

<abbr title="attribute">attr</abbr>
首字母缩略语

为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。

HTML is the best thing since sliced bread.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
地址

让联系信息以最接近日常使用的格式呈现。在每行结尾添加 <br> 可以保留需要的样式。

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Full Name
first.last@example.com 
<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>
引用

在你的文档中引用其他来源的内容。

默认样式的引用

将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。对于直接引用，我们建议用 <p> 标签。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
多种引用样式

对于标准样式的 <blockquote>，可以通过几个简单的变体就能改变风格和内容。

命名来源

添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

另一种展示风格

通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote class="blockquote-reverse">
  ...
</blockquote>
列表 无序列表

排列顺序无关紧要的一列元素。

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul>
  <li>...</li>
</ul>
有序列表

顺序至关重要的一组元素。

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
  <li>...</li>
</ol>
无样式列表

移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class="list-unstyled">
  <li>...</li>
</ul>
内联列表

通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list-inline">
  <li>...</li>
</ul>
描述

带有描述的短语列表。

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

水平排列的描述

.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

3.按钮

3.1.按钮种类和使用种类

3.1.1.使用种类说明

可作为按钮使用的标签或元素为

为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。

Link 
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

针对组件的注意事项

虽然按钮类可以应用到 <a> 和 <button> 元素上，但是，导航和导航条组件只支持 <button> 元素。

链接被作为按钮使用时的注意事项

如果 <a> 元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role="button" 属性。

跨浏览器展现

我们总结的最佳实践是：强烈建议尽可能使用 <button> 元素来获得在各个浏览器上获得相匹配的绘制效果。

另外，我们还发现了 Firefox <30 版本的浏览器上出现的一个 bug，其表现是：阻止我们为基于 <input> 元素所创建的按钮设置 line-height 属性，这就导致在 Firefox 浏览器上不能完全和其他按钮保持一致的高度。

3.1.2.种类说明

按钮按照表现形式可分为：
  • 带背景按钮 可以通用到大部分模块
  • 和纯中心内容体按钮 用于一些列表性强和表格上的操作按钮上
同时在这两种种类里也可以在前后文本里添加图标，或者单图标!

3.1.3.种类演示

后加图标带背景按钮 后加图标纯中心体按钮

3.1.4.代码

3.2.按钮样式

3.2.1.说明

按钮的样式按照按钮要表达什么状态来分颜色进行样式多样性，一般的模块用基础的按钮都默认用主色调颜色的按钮。

3.2.2.演示

3.2.3.代码

3.3.按钮大小

3.3.1.说明

需要让按钮具有不同尺寸吗？使用.btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

3.3.2.演示

3.3.3.代码

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

<button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">（块级元素）Block level button</button>

3.4.按钮状态

激活状态

当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。对于 <button> 元素，是通过 :active 状态实现的。对于 <a> 元素，是通过 .active 类实现的。然而，你还可以将 .active 应用到 <button> 上（包含 aria-pressed="true" 属性)），并通过编程的方式使其处于激活状态。

bottom元素

由于 :active 是伪状态，因此无需额外添加，但是在需要让其表现出同样外观的时候可以添加 .active 类。

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>
链接（<a>）元素

可以为基于 <a> 元素创建的按钮添加 .active 类。

Primary link Link 

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
禁用状态

通过为按钮的背景设置 opacity 属性就可以呈现出无法点击的效果。

bottom元素

为 <button> 元素添加 disabled 属性，使其表现出禁用状态。

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

跨浏览器兼容性

如果为 <button> 元素添加 disabled 属性，Internet Explorer 9 及更低版本的浏览器将会把按钮中的文本绘制为灰色，并带有恶心的阴影，目前我们还没有解决办法。

链接（<a>）元素

为基于 <a> 元素创建的按钮添加 .disabled 类。

Primary link Link 

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

我们把 .disabled 作为工具类使用，就像 .active 类一样，因此不需要增加前缀。

4.表单

4.1.基本实例

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

上传

4.2.内联表单

为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

可能需要手动设置宽度

在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单，我们将这些元素的宽度设置为 width: auto;，因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些额外的定制化组件。

一定要添加 label 标签

如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为 label 设置 .sr-only 类将其隐藏。还有一些辅助技术提供label标签的替代方案，比如 aria-label、aria-labelledby 或 title 属性。如果这些都不存在，屏幕阅读器可能会采取使用 placeholder 属性，如果存在的话，使用占位符来替代其他的标记，但要注意，这种方法是不妥当的。

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>
$
.00
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

4.3.水平排列的表单

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

被支持的控件:表单布局实例中展示了其所支持的标准表单控件。

4.4.输入框

4.4.1基础输入框

包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

必须添加类型声明

只有正确设置了 type 属性的输入控件才能被赋予正确的样式。

<input type="text" class="form-control" placeholder="Text input">

4.4.2.1外找的日历输入框

日历插件，现阶段使用的是laydata插件，然后进行自主样式覆盖。需要引用插件laydata.js

4.4.3.上传输入框

本规范重构了原生的上传输入框type='file',隐藏了原生上传控件，使用虚拟的按钮加输入框进行重构，可以只要按钮上传！交互需要调用file.js模块

上传

4.4.2自主编写的日历输入框

日历插件，现在有了一个新的自主编写的日历插件，功能还在迭代更新，但一些基础的功能还是比较容易实现的

自主编写的日历插件 qky_calendar演示
以上的双日期的，因为要考虑时分秒的判定，所以业务逻辑会比较复杂，于是暂时还没开发出开始日期限制结束日期的选择。
但年月日的判定接口已经留下，等待后续更新开发
目前只支持年月日的控制，不能支持到时分秒过去都不操作
日历插件 qky_calendar使用说明
html上应用需要在qkycalendar_box上添加这个日历是要显示什么的区别class，比如，默认会加上default,千万别直接用qkycalendar_box做boxid绑定 1.目前需要依赖jquery,bootstrap(只需要css),quickcss) 2.需要调用插件"qky_calendar"，整个插件体放在js/plug-in/qky_calendar(2.0版本) 3.seajs目前邦好根层调用的路径，其他路径调用请重新绑定链接 4.在引用了插件后，进行函数调用库名.qkycalendar({opt})，opt参数如下表格，boxid是首选要绑定的，其他的按需使用，调用例子qkycal.qkycalendar({boxid:".qkycalendar_box.default"}); 5.日历插件参数表
基础配置
参数名默认值作用
ajaxsrc按照从哪调用进行引用//日历主体html异步地址
csssrc按照从哪调用进行引用//css调用地址//为之后的主题更换留接口
position"po_leftup,ml15"//在哪里展出
默认右下（css直接锁定了）展出，
值："po_leftup（左上）,po_leftdown（左下）,po_rightup（右上）"
可以另加内外边距的快速css，比如"po_leftup,ml15",  用，号分割;
boxid".qkycalendar_box"//日历盒子id或者class
drawid".qkycalendar"//日历渲染id或者class
cilckid".qkycalendar_btn"//日历点击id或者class
hoverid".qkycalendar_btn_hover"//日历滑动id或者class(跟点击id只能二选一，要不点击要不悬停)
基础配置日期时间，不覆盖默认当前今天今时
参数名默认值作用
year默认调用当前年//年
moon默认调用当前月//月
day默认调用当前日//日
hours默认调用当前时//时
minutes默认调用当前分//分
seconds默认调用当前秒//秒
过去日子选择限制（目前只支持日期年月日，不支持单年月或者单时分秒以及年月日时分秒）
参数名默认值作用
oldday_set///限制josn
oldday_set.issetfalse//是否设置限制
oldday_set.setdate"today"//setdate为设置什么日期或者时刻为新旧日期转折，
默认为today就是今天会自动转化为今天日期，
只支持格式为yyyy-mm-dd
机制判断
参数名默认值作用
isinputfalse//是否从输入框里的时间来做初始值
isdistshowdatefalse//是否一开始就在输入框里显示初始化日期
isshowymtrue//是否显示年月,不能出现年月不显示而显示日数，就是isshowym为false的时候isshowday一定得false（自动会换）
isshowdaytrue//是否显示日数选择 只有在isshowym为true时才能有作用
isshowtimefalse//是否显示时分秒////不能在不显示天数的情况下，同时显示年月选择和时间选择
函数回调
参数名默认值作用
clickday默认给回调到给输入框传日历插件里选到的日期数据//日数点击时执行
choosetimes默认给回调到给输入框传日历插件里选到的日期数据//时分秒转换时执行

4.5文本域

支持多行文本的表单控件。可根据需要改变 rows 属性。

<textarea class="form-control" rows="3"></textarea>

4.6.多选和单选框

多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。本规范用的单选复选为自主开发的ui基础控件，需要调用指定的js模块才有交互效果

调用的js模块是：radio_checkbox

4.6.1.默认外观（堆叠在一起）


4.6.2.内联单选和多选框

通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。

4.6.3.不带label文本的Checkbox 和 radio

如果需要 <label> 内没有文字，输入框（input）正是你所期望的。 目前只适用于非内联的 checkbox 和 radio。 请记住，仍然需要为使用辅助技术的用户提供某种形式的 label（例如，使用 aria-label）。

4.7.原生下拉列表（select）

注意，很多原生选择菜单 - 即在 Safari 和 Chrome 中 - 的圆角是无法通过修改 border-radius 属性来改变的。

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

对于标记了 multiple 属性的 <select> 控件来说，默认显示多选项。

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

除了html原生下拉列表，我们还制作了一个下拉菜单可选值的控件,一个纯下拉，一个可以进行输入框下拉，需要调用的js模块来实现基础交互，模块是：dropdown_havevalue

纯下拉选择菜单

4.9.静态控件

如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可。

email@example.com

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

email@example.com

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">email@example.com</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

4.10.焦点状态

我们将某些表单控件的默认 outline 样式移除，然后对 :focus 状态赋予 box-shadow 属性。

演示:focus 状态

在本文档中，我们为上面实例中的输入框赋予了自定义的样式，用于演示 .form-control 元素的 :focus 状态。

4.11.禁用状态

为输入框设置 disabled 属性可以禁止其与用户有任何交互（焦点、输入等）。被禁用的输入框颜色更浅，并且还添加了 not-allowed 鼠标状态。

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

4.11.1.被禁用的 fieldset

为<fieldset> 设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件。

<a> 标签的链接功能不受影响

默认情况下，浏览器会将 <fieldset disabled> 内所有的原生的表单控件（<input>、<select> 和 <button> 元素）设置为禁用状态，防止键盘和鼠标与他们交互。然而，如果表单中还包含 <a ... class="btn btn-*"> 元素，这些元素将只被赋予 pointer-events: none 属性。正如在关于 禁用状态的按钮 章节中（尤其是关于锚点元素的子章节中）所描述的那样，该 CSS 属性尚不规范，并且在 Opera 18 及更低版本的浏览器或 Internet Explorer 11 总没有得到全面支持，并且不会阻止键盘用户能够获取焦点或激活这些链接。所以为了安全起见，建议使用自定义 JavaScript 来禁用这些链接。

跨浏览器兼容性

虽然 Bootstrap 会将这些样式应用到所有浏览器上，Internet Explorer 11 及以下浏览器中的 <fieldset> 元素并不完全支持 disabled 属性。因此建议在这些浏览器上通过 JavaScript 代码来禁用 <fieldset>。

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

4.12.只读状态

为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态。

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

5.UI组件

导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。

在标签页上使用导航需要依赖 JavaScript 标签页插件

由于标签页需要控制内容区的展示，因此，你必须使用 标签页组件的 JavaScript 插件。另外还要添加 role 和 ARIA 属性 – 详细信息请参考该插件的 实例。

确保导航组件的可访问性

如果你在使用导航组件实现导航条功能，务必在 <ul> 的最外侧的逻辑父元素上添加 role="navigation" 属性，或者用一个 <nav> 元素包裹整个导航组件。不要将 role 属性添加到 <ul> 上，因为这样可以被辅助设备（残疾人用的）上被识别为一个真正的列表。

5.1.1.标签页

注意 .nav-tabs 类依赖 .nav 基类。

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

5.1.2.胶囊式标签页

HTML 标记相同，但使用 .nav-pills 类：

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

胶囊是标签页也是可以垂直方向堆叠排列的。只需添加 .nav-stacked 类。

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

5.1.3.两端对齐的标签页

在大于 768px 的屏幕上，通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。

两端对齐的导航条导航链接已经被弃用了。

Safari 和响应式两端对齐导航

从 v9.1.2 版本开始，Safari 有一个bug：对于两端对齐的导航，水平改变浏览器大小将引起绘制错误。此bug可以在两端对齐的导航实例中得到重现。


<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

5.1.4.禁用的链接

对任何导航组件（标签页、胶囊式标签页），都可以添加 .disabled 类，从而实现链接为灰色且没有鼠标悬停效果。

链接功能不受到影响

这个类只改变 <a> 的外观，不改变功能。可以自己写 JavaScript 禁用这里的链接。

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

5.1.5.添加下拉菜单

用一点点额外 HTML 代码并加入下拉菜单插件的 JavaScript 插件即可。

5.1.5.1带下拉菜单的标签页

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

5.1.5.2.带下拉菜单的胶囊式标签页

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和最实用的功能集。

不支持同时打开多个模态框

千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要自己写额外的代码来实现。

模态框的 HTML 代码放置的位置

务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现和/或功能。

5.2.1.静态实例

以下模态框包含了模态框的头、体和一组放置于底部的按钮。

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

5.2.2.动态实例

点击下面的按钮即可通过 JavaScript 启动一个模态框。此模态框将从上到下、逐渐浮现到页面前。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

增强模态框的可访问性

务必为 .modal 添加 role="dialog" 和 aria-labelledby="..." 属性，用于指向模态框的标题栏；为 .modal-dialog 添加 aria-hidden="true" 属性。

另外，你还应该通过 aria-describedby 属性为模态框 .modal 添加描述性信息。

5.2.3.可选尺寸

模态框提供了两个可选尺寸，通过为 .modal-dialog 增加一个样式调整类实现。

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

5.2.4.禁止动画效果

如果你不需要模态框弹出时的动画效果（淡入淡出效果），删掉 .fade 类即可。

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

5.2.5.用法

通过 data 属性或 JavaScript 调用模态框插件，可以根据需要动态展示隐藏的内容。模态框弹出时还会为 <body> 元素添加 .modal-open 类，从而覆盖页面默认的滚动行为，并且还会自动生成一个 .modal-backdrop 元素用于提供一个可点击的区域，点击此区域就即可关闭模态框。

5.2.5.1.通过 data 属性

不需写 JavaScript 代码也可激活模态框。通过在一个起控制器作用的元素（例如：按钮）上添加 data-toggle="modal" 属性，或者 data-target="#foo" 属性，再或者 href="#foo" 属性，用于指向被控制的模态框。

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

5.2.5.2.通过 JavaScript 调用

只需一行 JavaScript 代码，即可通过元素的 id myModal 调用模态框：

$('#myModal').modal(options)

5.2.5.3.参数

可以将选项通过 data 属性或 JavaScript 代码传递。对于 data 属性，需要将参数名称放到 data- 之后，例如 data-backdrop=""。

名称 类型 默认值 描述
backdrop boolean 或 字符串 'static' true Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
keyboard boolean true 键盘上的 esc 键被按下时关闭模态框。
show boolean true 模态框初始化之后就立即显示出来。
remote path false

This option is deprecated since v3.3.0 and has been removed in v4. We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself.

如果提供的是 URL，将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容（只加载一次）并插入 .modal-content 内。如果使用的是 data 属性 API，还可以利用 href 属性指定内容来源地址。下面是一个实例：

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

5.2.5.4.方法

.modal(options)

将页面中的某块内容作为模态框激活。接受可选参数 object。

$('#myModal').modal({
  keyboard: false
})
.modal('toggle')

手动打开或关闭模态框。在模态框显示或隐藏之前返回到主调函数中（也就是，在触发 shown.bs.modal 或 hidden.bs.modal 事件之前）。

$('#myModal').modal('toggle')
.modal('show')

手动打开模态框。在模态框显示之前返回到主调函数中 （也就是，在触发 shown.bs.modal 事件之前）。

$('#myModal').modal('show')
.modal('hide')

手动隐藏模态框。在模态框隐藏之前返回到主调函数中 （也就是，在触发 hidden.bs.modal 事件之前）。

$('#myModal').modal('hide')
.modal('handleUpdate')

Readjusts the modal's positioning to counter a scrollbar in case one should appear, which would make the modal jump to the left.

Only needed when the height of the modal changes while it is open.

$('#myModal').modal('handleUpdate')

5.2.5.5.事件

Bootstrap 的模态框类提供了一些事件用于监听并执行你自己的代码。

All modal events are fired at the modal itself (i.e. at the <div class="modal">).

事件类型 描述
show.bs.modal show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。
shown.bs.modal 此事件在模态框已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。
hide.bs.modal hide 方法调用之后立即触发该事件。
hidden.bs.modal 此事件在模态框被隐藏（并且同时在 CSS 过渡效果完成）之后被触发。
loaded.bs.modal 从远端的数据源加载完数据之后触发该事件。 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

5.3.分页

5.3.1.说明

分页模块暂时只有一个简单的样式规范，无任何交互，和模块链接！

5.3.2.演示

1-10 of 48 项目

5.3.3.代码

5.4.进度条

通过这些简单、灵活的进度条，为当前工作流程或动作提供实时反馈。

跨浏览器兼容性

进度条组件使用了 CSS3 的 transition 和 animation 属性来完成一些特效。这些特性在 Internet Explorer 9 或以下版本中、Firefox 的老版本中没有被支持。Opera 12 不支持 animation 属性。

5.4.1.基本实例

默认样式的进度条

60% Complete 
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

5.4.2.带有提示标签的进度条

将设置了 .sr-only 类的 <span> 标签从进度条组件中移除 类，从而让当前进度显示出来。

60% 
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

在展示很低的百分比时，如果需要让文本提示能够清晰可见，可以为进度条设置 min-width 属性。

0%
2% 
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

5.4.3.根据情境变化效果

进度条组件使用与按钮和警告框相同的类，根据不同情境展现相应的效果。

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger) 
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

5.4.4.条纹效果

通过渐变可以为进度条创建条纹效果，IE9 及更低版本不支持。

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger) 
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

5.4.5.动画效果

为 .progress-bar-striped 添加 .active 类，使其呈现出由右向左运动的动画效果。IE9 及更低版本的浏览器不支持。

45% Complete
<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

5.4.6.堆叠效果

把多个进度条放入同一个 .progress 中，使它们呈现堆叠的效果。

35% Complete (success)
20% Complete (warning)
10% Complete (danger) 
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

5.5.加载模块

加载模块在这只提供样式，什么时候调用以及调用方式，需要自行写代码！

5.5.1.窄模块时加载块

窄加载模块是用在那些比较窄的布局模块上，就是宽度小于高度的模块，所以下面的演示下的wd_50, ma_lrauto 样式是为了实现窄布局块特意加的样式，正式用的时候不用加上

5.5.2.宽模块时加载块

5.6.轮播块

使用说明

轮播模块，引用第三方插件swiper

在此规范中提供两个版本的swiper，3.4.1功能先进但不支持自由高度，不支持ie8；所以保留2.0版本存放在这，功能稍微陈旧，需要固定高度（就是一定要给限定父类加上高度，不然乱流）！

默认引用2.0版本，如果项目兼容性要求不考虑ie8的时候建议用3.4.1版本！

需要左右铺满屏幕的话，只要把主体放在满屏的父类里就行了！比如.container-fluid

5.6.1.html载体轮播模式

轮播主体1
轮播主体2

在主体里还可以继续添加html dom树

在这里完善你想在这主体呈现的内容

5.6.2.图片轮播模式

在下面的slid_img里依旧可以放置html结构，只要有需要

5.7.步骤块

5.7.1.说明

步骤模块是自主编写的一个模块，需要绑定steps js模块，对应联动的框架也写好出来在下面放置steps_mian 上面a标签的属性toshow 对应steps_mian的属性isid，

5.7.2.演示

默认大小的步骤块（30px）

1步骤1 2步骤2 3步骤3 4步骤4

中码步骤块（40px）

1步骤1 2步骤2 3步骤3 4步骤4

大码步骤块（50px）

1步骤1 2步骤2 3步骤3 4步骤4

加大码步骤块（60px）

1步骤1 2步骤2 3步骤3 4步骤4

5.8.数据视图

5.8.1.说明

数据视图的展示规则是，确定好一个有宽度和高度的div给放数据视图就好，其他不是数据视图的附属块，按照排版规则布局即可！数据视图使用的是echarts插件，需要引用echarts.js。本规范默认了存放此插件位置！ 详细的怎么显示数据视图请查看官方api和配置手册。以下只展示其中一个模块化示例！引用插件后还需一个接口来实现数据视图的绑定和显示数据，规范默认接入口为data_view.js,接入口可随项目的结构变化而变化！

5.8.2.演示

男女比例
农村人口比例
健康比例
学生来源比例
入学比例
就读方式

5.8.3.代码

6.表格

基本实例

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

条纹状表格

通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

跨浏览器兼容性

条纹状表格是依赖 :nth-child CSS 选择器实现的，而这一功能不被 Internet Explorer 8 支持。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

带边框的表格

添加 .table-bordered 类为表格和其中的每个单元格增加边框。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

鼠标悬停

通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

紧缩表格

通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

状态类

通过这些状态类可以为行或单元格设置颜色。

Class 描述
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content 
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

向使用辅助技术的用户传达用意

通过为表格中的一行或一个单元格添加颜色而赋予不同的意义只是提供了一种视觉上的表现，并不能为使用辅助技术 -- 例如屏幕阅读器 -- 浏览网页的用户提供更多信息。因此，请确保通过颜色而赋予的不同意义可以通过内容本身来表达（即在相应行或单元格中的可见的文本内容）；或者通过包含额外的方式 -- 例如应用了 .sr-only 类而隐藏的文本 -- 来表达出来。

响应式表格

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

垂直方向的内容截断

响应式表格使用了 overflow-y: hidden 属性，这样就能将超出表格底部和顶部的内容截断。特别是，也可以截断下拉菜单和其他第三方组件。

Firefox 和 fieldset 元素

Firefox 浏览器对 fieldset 元素设置了一些影响 width 属性的样式，导致响应式表格出现问题。可以使用下面提供的针对 Firefox 的 hack 代码解决，但是以下代码并未集成在 Bootstrap 中：

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

更多信息请参考 this Stack Overflow answer.

# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

7.通用模块

7.1.登录注册

7.1.1.常规登录页

登录模块一般都以整页布局为主，在这里被限制在狭小的宽度里，为了更好的查看演示，点这里变换全屏查看

7.1.2.带产品信息的登录模块

登录模块一般都以整页布局为主，在这里被限制在狭小的宽度里，为了更好的查看演示，点这里变换全屏查看

7.1.3.多入口的登录模块

登录模块一般都以整页布局为主，在这里被限制在狭小的宽度里，为了更好的查看演示，点这里变换全屏查看

7.2.400、500、404出错模块

使用提示

此些模块为整体模块，再以前是说成页面的，但现在是可以放在布局里的某一个模块里的，在需要的模块里添加这些整体模块，在对应的情况下进行显示操作！

7.2.1.400

400

部分文件不存在

7.2.2.404

404

找不到资源，您请求的资源不存在

7.2.3.500

500

系统错误 - 服务器端出错，请稍后再试。如果重复出现此页面，请与网站管理员联系

7.2.4.维护中

系统正在维护...

请耐心等候...

7.3.初始化/默认/无数据模块

使用提示

此些模块为整体模块，再以前是说成页面的，但现在是可以放在布局里的某一个模块里的，在需要的模块里添加这些整体模块，在需要初始化的模块下进行添加，以下的图标文字已经按钮文字都是可以修改的，以模块的功能来进行修改！

7.3.1.无数据模块

此模块暂时没有数据,请进行初始化操作
初始化操作

8.图标字体

8.1图标字体来源和获取

图标都进行了图标字体化，来源于阿里巴巴旗下的iconfont，图标字体库获取步骤:

8.1.1.进入iconfont进行登录；

8.1.2.把账户名告知@zawet（QQ：471032682），进入指定的共享图标库；

8.1.3.进入共享库后在我参与的项目里查看加入的库；

8.1.4.在指定的库里获取在线测试地址或者直接下载字体包；

8.2.了解图标字体并使用

8.2.1.图标字体库以及新增图标说明

暂时按照图标的大小和色彩，粗细，填充分6个库，分别是： qkyicon_color, qkyicon_12, qkyicon_14, qkyicon_20, qkyicon_22, qkyicon_100. 图标的选择按需选择，全部图标已经在css上架设好了，并且支持添加图标，在iconfont.com的自我账号里可以搜索其他图标加入到对应的库。 如何添加图标教程： 1.搜索图标，选好图标加入购物车； 2.在购物车上把图标加到要加的项目里； 图标添加的两个要求： 1、不能在同一个库里添加看上去不是一套的图标；（比如qkyicon_14中的图标都是半粗细的线条图标，所以不能添加填充式或者粗线条的图标） 2、同一个功能使用的图标也不能出现两个；（比如一个库里不能出现两个“x”图标）

8.2.2.图标字体库架设

特别说明，以下是架设图标字体库的方法，但在初始文件里，所有共享库都在iconfont.css里搭建好了，并进行了本地化，这里给出搭建教程是为了让大家方便在添加了图标后进行更新本地化！
测试模式，[方便调整和添加新图标]
1,直接复制对应库的线上测试地址 2,把地址粘贴到css/iconfont.css上，并新建css样式，如下 .qkyicon_14 { font-family:"qkyicon_14" !important; font-size:14px; font-style:normal; -webkit-font-smoothing: antialiased; /*-webkit-text-stroke-width: 0.2px;*/ -moz-osx-font-smoothing: grayscale; } 其中的font-family:"qkyicon_14" 要跟@font-face里的一样，这样就完成了一个字体库的架设。
本地化模式，[上线节省资源]
在iconfont.com的对应公用库上点击下载，下载解压后，把里面的所有文件覆盖iconfont文件夹下对应库的所有文件，再把链接地址链接到本地，就实现了图标本地化了！

8.2.3.图标使用

架设好图标字体库后，在iconfont.com字体库上复制图标的代码 然后通过标签进行图标显示，如： 代码放在中间，引用的哪个库的图标就引用哪个class，这里我引用的是：qkyicon_14库的，所以class引用如：class="qkyicon_14";
此标签就跟一个中文字串一样，可以放在任何地方；

后续

后续规范更新说明

后续问题反馈主要在Q&A 上进行反馈，分标签进行问题反馈，在其他第三方交流平台上反馈也是可以，但不方便统计，我们会通过反馈的问题量进行周期性更新规范！

之后的规范还会继续出源代码版本，使用less或者sass进行css的编写，进行更好的整体控制，请尽情期待！

项目应用示例展示更新说明

后续按照产品应用的迭代更新初始化文件，每一个产品应用实现了前端页面的编码后，可进行应用示例展示，可把整个应用项目发给规范维护人员@qq 471032682进行示例挂上，也可以自行git上github，地址https://github.com/zawet/qkyuibs

全通教育集团（广东）股份有限公司 版权所有 ©2007-2015