概述 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

section

.vbox

header
footer
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

示例
        
         
        
       
使用图标