### 概述 Overview

V3风格是ZCMS2.4以后版本新增的功能特性，用于制作开发响应式的、多屏适配的模板及互动功能.

##### 特性和改进:

- 基于Bootstrap 3.3.x和jQuery 1.10.x构建
- 使用了font-awesone 4.4图标和animate.css动画
- 提供了在移动设备上能够使用的音频、视频播放器
- 重写了所有互动功能的Javascript
- 提供了众多工具类用于对页面布局进行调整
- 模板和互动功能常用的控件实现了多屏适配
- 互动功能模板全部进行多屏适配

### 启用 Enabling

#### 操作方法

在ZCMS 2.4以后的版本上新建站点，即默认开启了了此站点的V3风格，系统会自动进行如下操作：

1. 复制在线字体文件到站点的fonts目录
2. 复制bootstrap样式表及v3样式表到站点的css目录
3. 复制bootstrap js文件及v3 js文件到站点的js目录
4. 复制mp3/mp4播放器到站点的image目录
5. 复制v3默认模板到站点的template目录
6. 将各个内容类型的默认模板设为template目录下的文件

如果站点是在ZCMS 2.4以前的版本中建立的，则在升级到2.4以后开启V3风格，需要进行如下操作：

1. 备份整个站点目录，然后删除站点下的css/js/template三个目录
2. 新建一个临时站点
3. 打开临时站点所在目录，将所有文件复制到要开启V3风格的站点
4. 登录ZCMS后台，到`“站点管理-扩展配置管理-静态化管理”`中勾选`“V3风格”`
5. 重新设置站点和栏目的模板

#### 文件说明

启用V3后，站点下应有如下文件夹或文件：

- css

- animate.css
- bootstrap.min.css
- font-awesome.min.css
- font-opensans.css
- responsiveslides.css
- v3-framework.css
- v3-common.css
- v3-site.css

- fonts
- js

- apper
- datetimepicker
- file-input
- ie
- scroll
- slimscroll
- bootstrap.min.js
- hamer.min.js
- player.min.js
- zcms_common.js
- zcms_require.css
- zcms_frontend.css
- zcms_frontend.css
- responsiveslides.js
- v3_framework.js
- v3_common.js
- v3_site.js

- template

- audio_detail.template.html
- audio_list.template.html
- detail.template.html
- detail_bottom.template.html
- file_detail.template.html
- file_list.template.html
- footer.template.html
- header.template.html
- image_list.template.html
- image_detail.template.html
- include.template.html
- index.template.html
- list.template.html
- right.template.html
- sitemap.template.html
- special_list.template.html
- video_detail.template.html
- video_list.template.html

### 注意事项 Attentions

- 约定wwwroot下的template/include.template.html存放通用css和js文件引用，一般情况下不需要修改。
- 约定wwwroot下的template/footer.template.html的最后几行引用js文件。
- 约定所有详细页都包含wwwroot下的template/detail_bootom.template.html，该文件提供了通用的上一页下一页、相关内容、二维码、评论、分享功能。
- 在单独的JS文件中可以使用和JAVA中类似的Lang.get("ID")的方式来获取国际化字符串。
- 参考文档中已经有的内容例如Bootstrap的基本用法本文档不再重复。

### 参考文档 References

#### Bootstrap

使用Bootstrap 3.3.5作为CSS基础框架，点击查看文档: 全局CSS样式、组件、JavaScript插件。

#### LESS

v3-framework.css文件由LESS源文件生成，位于UI/framework/v3/less. 定义了很多变量和Mixins.

#### 图标Icons

使用了 FontAwesome字体图标, 共用585个图标，点击查看图标清单

#### Animate.css

使用了 Animate.css动画, 点击查看动画效果清单

### 字体 Fonts

提供了三种在线字体，分别为opensans、glyphicons和font-awesome，后两种为图标字体，具体见下面的图标一节。
浏览器对于中文字体将默认使用宋体，对于其他字符将默认使用opensans。可以使用 `.yahei` 来为文本指定微软雅黑字体。

This is using opensans web font.

            This is using opensans web font.

这是微软雅黑字体

            这是微软雅黑字体

可以使用 `.font12, .font14, font16, font18` 来指定12像素，14像素，16像素，18像素的字体大小

12像素大小 14像素大小 16像素大小 18像素大小

            12像素大小
            14像素大小
            16像素大小
            18像素大小

### 文本 Text

#### 文本颜色 Text Color

提供了8种有名称的颜色，分别为 `primary, success, warning, danger, info, black, dark, light` 。可以修改v3.variables.less中的变量以改变这些颜色的值( `@brand-primary, @brand-success, @brand-warning, @brand-danger, @brand-info, @brand-black, @brand-dark, @brand-light` ). 可以使用混合 `.color-variant` 以及 `.font-variant` 构建颜色样式, 具体请查阅v3.colors.less.

使用 `.text-` 前缀加这些名称则可以用文本指定具体的颜色， 使用 `.t-dker, .t-dk, .t-lt, .t-lter` 四个类来加深或者减浅这8种颜色，如下表所示:

.text-light

.t-dker
.t-dk
.t-light
.t-lt
.t-lter

.text-dark

.t-dker
.t-dk
.t-dark
.t-lt
.t-lter

.text-black

.t-dker
.t-dk
.t-black
.t-lt
.t-lter

.text-primary

.t-dker
.t-dk
.t-primary
.t-lt
.t-lter

.text-success

.t-dker
.t-dk
.t-success
.t-lt
.t-lter

.text-info

.t-dker
.t-dk
.t-info
.t-lt
.t-lter

.text-warning

.t-dker
.t-dk
.t-warning
.t-lt
.t-lter

.text-danger

.t-dker
.t-dk
.t-danger
.t-lt
.t-lter

#### 文本样式 Text Style

可以使用 `.lh16, .lh18, .lh20` 来分别指定1.6倍、1.8倍、2.0倍行间距：

渭城朝雨浥青尘，
客舍青青柳色新。
劝君更尽一杯酒，
西出阳光无关人。

木末芙蓉花，
山中发红萼。
涧户寂无人，
纷纷开且落。

独上高楼，
望尽天涯路。
欲寄彩笺兼尺素。
山长水阔知何处。

             渭城朝雨浥青尘，
     客舍青青柳色新。
     劝君更尽一杯酒，
     西出阳光无关人。

             木末芙蓉花，
    山中发红萼。
    涧户寂无人，
    纷纷开且落。

             独上高楼，
    望尽天涯路。
    欲寄彩笺兼尺素。
    山长水阔知何处。

可以使用 `.font-thin, .font-normal, .font-bold, .text-ul, .text-lt` 来变细、正常、加粗字，以及给字体加下划线和横贯线：

这里变细了， 现在正常了， 又变粗了， 加了下划线， 伤害了我还一笑而过。

            这里变细了，
            现在正常了，
            又变粗了，
            加了下划线，
            伤害了我还一笑而过。

### 图标 Icons

可以通过为空无素指定一个CSS类的方式来使用两种字体图标，因为图标是以字体方式实现的，所以可以通过指定字体大小的方式来改变图标大小，如下所示：

font-awesome微信图标：
font-awesomeQQ图标：
glyphicons云图标：
glyphicons五角星图标：

            font-awesome微信图标：

            font-awesomeQQ图标：

            glyphicons云图标：

            glyphicons五角星图标：

点击查看glyphicons 图标清单。

点击查看font-awesome 图标清单。

### 背景 Background

#### 背景颜色Background Color

和文本一样，背景也有8种命名颜色，通过 `.bg-` 加颜色名称的方式指定，并可以通过 `.dker, .dk, .lt, .lter` 来加深或减浅背景颜色,如下所示：

.bg-light

##### .dker

##### .dk

##### .bg-light

##### .lt

##### .lter

.bg-dark

##### .dker

##### .dk

##### .bg-dark

##### .lt

##### .lter

.bg-black

##### .dker

##### .dk

##### .bg-black

##### .lt

##### .lter

.bg-primary

##### .dker

##### .dk

##### .bg-primary

##### .lt

##### .lter

.bg-success

##### .dker

##### .dk

##### .bg-success

##### .lt

##### .lter

.bg-info

##### .dker

##### .dk

##### .bg-info

##### .lt

##### .lter

.bg-warning

##### .dker

##### .dk

##### .bg-warning

##### .lt

##### .lter

.bg-danger

##### .dker

##### .dk

##### .bg-danger

##### .lt

##### .lter

#### 背景渐变Background Gradient

可以使用 `.bg-gradient` 来为元素设置渐变背景:

### 边框 Border

#### 边框位置 Border Position

可以使用 `.b-a, .b-t, .b-r, .b-b, .b-l` 来指定边框位置

.b-a 四周
.b-t 顶部
.b-r 右侧
.b-b 底部
.b-l 左侧

#### 边框厚度 Border Thickness

边框厚度默认为1像素，可以使用 `.b-2x, .b-3x, .b-4x` 来指定2像素、3像素、4像素的边框厚度：

默认
.b-2x
.b-3x
.b-4x

#### 圆角 Radius

可以使用 `.r, .r-t, .r-r, .r-b, .r-l` 来指定各个位置的2像素圆角：

默认
.r-t
.r-r
.r-b
.r-l

#### 边框颜色 Border Color

和文本一样，边框也有8种命名颜色，通过 `.b-` 加颜色名称的方式指定，并可以通过 `.b-dker, .b-dk, .b-lt, .b-lter` 来加深或减浅背景颜色,如下所示：

.b-light

.b-dker
.b-dk
.b-light
.b-lt
.b-lter

.b-dark

.b-dker
.b-dk
.b-dark
.b-lt
.b-lter

.b-black

.b-dker
.b-dk
.b-black
.b-lt
.b-lter

.b-primary

.b-dker
.b-dk
.b-primary
.b-lt
.b-lter

.b-success

.b-dker
.b-dk
.b-success
.b-lt
.b-lter

.b-info

.b-dker
.b-dk
.b-info
.b-lt
.b-lter

.b-warning

.b-dker
.b-dk
.b-warning
.b-lt
.b-lter

.b-danger

.b-dker
.b-dk
.b-danger
.b-lt
.b-lter

### 边距 Margin & Padding

可以使用 `.m-` 开头的类指定外边距，使用 `.p-` 开头的类指定内边距，具体见下表：

外边距(Margin)工具类：

.m | margin: 15px
.m-xs | margin: 5px
.m-sm | margin: 10px
.m-md | margin: 20px
.m-lg | margin: 30px
.m-n | margin: 0px
.m-l | margin-left: 15px
.m-l-xs | margin-left: 5px
.m-l-sm | margin-left: 10px
.m-l-md | margin-left: 20px
.m-l-lg | margin-left: 30px
.m-l-xl | margin-left: 40px
.m-l-none | margin-left: 0px
.m-l-n | margin-left: -15px
.m-l-n-xxs | margin-left: -1px
.m-l-n-xs | margin-left: -5px
.m-l-n-sm | margin-left: -10px
.m-l-n-md | margin-left: -20px
.m-l-n-lg | margin-left: -30px
.m-l-n-xl | margin-left: -40px

内边距(Padding)工具类：

.p | padding: 15px
.p-xs | padding: 5px
.p-sm | padding: 10px
.p-md | padding: 20px
.p-lg | padding: 30px
.p-n | padding: 0px
.p-l | padding-left: 15px
.p-l-xs | padding-left: 5px
.p-l-sm | padding-left: 10px
.p-l-md | padding-left: 20px
.p-l-lg | padding-left: 30px
.p-l-xl | padding-left: 40px
.p-l-none | padding-left: 0px
.p-l-n | padding-left: -15px
.p-l-n-xxs | padding-left: -1px
.p-l-n-xs | padding-left: -5px
.p-l-n-sm | padding-left: -10px
.p-l-n-md | padding-left: -20px
.p-l-n-lg | padding-left: -30px
.p-l-n-xl | padding-left: -40px

### 布局 Layout

使用 .vbox(jertical box) 和 .hbox(horizontal box) 布局. 也可以自己定义更复杂的布局类.

##### hbox

hbox 是一个水平的 wrapper，可以在里面放置列. hbox可以容纳 `<aside>` 和 `<section>` .

可以使用 `.aside, .aside-sm, .aside-md, .aside-lg` 设置 aside wrapper的宽度. 当然也可以使用Bootstrap栅格系统中的 `.col-6, .col-7` ...

.stretch 类将使hbox获得100%高度. `<section class="hbox stretch"></section>`

##### vbox

vbox 是一个垂直 wrapper ，可以在里面放置行.

.w-f 将使 vbox 获得一个footer

.flex vbox let you put a flex height of the header/footer.

            <section class="vbox flex">

             </section>

##### Example

.hbox

aside
section
aside

.vbox

header
section

#### 浮动导航Off screen nav

支持手机上三种导航风格, "下拉", "左侧悬浮", "右侧悬浮"

##### 下拉

使用 `data-toggle="class:show" data-target=".nav-primary"` 触发下拉导航.

##### 左侧悬浮

使用 `data-toggle="class:nav-off-screen" data-target="#nav"` 触左侧悬浮导航

使用 `data-toggle="class:nav-off-screen" data-target="#nav"` to toggle back in the body

##### 右侧悬浮

使用 `data-toggle="class:nav-off-screen push-right" data-target="body"`

### 工具类CSS Utilities

按钮大小
.btn-s-xs | width:90px
.btn-s-sm | width:100px
.btn-s-md | width:120px
.btn-s-lg | width:150px
.btn-s-xl | width:200px
其他
.padder | padding-left:15px; padding-right:15px
.padder-v | padding-top:15px; padding-bottom:15px
.wrapper | padding:15px
.text-uc | text uppercase

### 组件 Components

#### 切换Class

通过点击某个元素切换另一个元素的class的简易方式.

##### Usage

添加 `data-toggle="class:className"` 和 `data-target="#target"` 到链接或按钮上以切换class.

##### 示例

#### Shift

Shift 可以让 dom 在移动设备上拥有不同的位置, 以避免使用重复元素.

用法

添加 `data-toggle="shift:insertBefore"` 和 `data-target="#target"` 到想要Shift的元素上.

在移动设备上将我放到“用法”字样之前

              在移动设备上将我放到“用法”字样之前

也支持 `data-toggle="shift:appendTo"` , `data-toggle="shift:prependTo"` , `data-toggle="shift:insertAfter"`

#### 按钮状态

点击按钮改变它 `.text` `.text-active`

##### 示例

##### 使用图标