说明：此文根据代码的实际更新进度进行更新

JFinal UI简介

JFinal UI是为JFinal社区定制的一套新UI，在JFinal原版UI的逻辑和设计上，采用最新版Bootstrap作为CSS基础脚手架搭建起来的。这套UI默认使用JFinal官网定制的一种体验样式，CSS和Html模板中也内置了多种风格可选，比如Header区域可以切换黑白色，可以悬浮顶部，也可以固定，全局可以是跟简书一样的无区块扁平风格 也可以是分区块风格。
灵活多变，多种选择。

主要框架技术

Bootstrap4.3.1 CSS脚手架
JQuery3.x JavaScript基础类库
Font-aswesome 字体
canvas-nest.js 网页特效

目前JFinal UI已经完成了以下模板页面：

主要是前端网站的主页、各频道的的列表页、俱乐部、文档中心、个人中心（自己的）、用户空间（他人的）、登录、注册、文章详情页、文章内容发布页面等

页面索引表如下图：

页面索引

项目代码结构

所有静态引用资源都放在了assets资源包里 css、javascript、图片资源、字体资源等，方便部署后对assets整个资源进行CDN加速

项目代码结构

首页样式

JFinal 极速开发官方社区.png

布局解析

默认风格是按照区块划分比较明显的风格。

主要布局分为上中下结构：

整体布局划分

中间部分又分开左右结构

其中为main放主要内容，side属于侧边栏，可以放其他相关内容和广告信息
side不一定在左边的，常见的网站side部分在右侧，但是个人中心设计到了左侧

个人中心布局如下图

side在左侧的个人中心 我的私信 我的分享 看别人的主页

从代码上看布局

整体布局代码示例

Body 中间部分代码拆分展开

中间部分左右布局

上中下结构中 中间左右结构的样式可以变化

1、side部分宽度变化，默认宽度是300px 可以在css中自行修改宽度

side侧边栏 默认300px

改成400px后 左右比例变化 看着也不错

400px的宽度

目前代码里 定义了页面主要区域的宽度是最小1280px 所以看着还是挺宽挺大气的。

1280px
container最小也1280px

去掉这个限制宽度 就恢复 bootstrap container默认宽度。

但是需要注意 加限制最小宽度是为了去掉响应式处理，pc社区类站点 不做响应式，后面打算做专门的手机版 当然响应式的也在处理中

默认宽度

JFinal UI 中的CSS class的定义 都是jf-开头的 定义见名知意

例如：jf-header jf-footer jf-panel jf-page-main jf-page-side

灵活多变风格

一、多变的Header

1、header浮动状态

默认是随着页面滚动的，在body上增加一个class就变成浮动版本

jf-header-fixed

浮动代码class

这样 主题内容滚动 header一直浮动在顶部

header浮动效果

2、header颜色的变化

默认内置了两种风格 一种黑 一种白

黑色版

黑色默认Header

白色版

白色header版

在header上使用jf-style-white即可启动白色版

白色版启动class

其它颜色 可以按照自己喜好定义class了

3、header分有图标和无图标版本

默认无图标

有图标版本是这样的 图标是由Font-awsesome提供的

有图标版本

二、登录后的header样式变化

登录后 头像上的操作 白色版 代码

三、两种全局风格

一种分割、一种扁平 默认分割

1、直接看扁平风格 类似简书

扁平

jf-flat 通过多种样式组合出多种效果

想要浮动Header-白色Header-扁平内容区域也是没有问题的 按照你的心情搭配

jf-flat

四、登录 注册

1、普通版

普通版

2、酷炫版 其实更适合做后台管理系统的登录页面 当然很酷的社区也是没问题的

01
02
03

其中第三个是纯色背景 偏暗色调 可以修改其他颜色

图片大背景1 纯色背景 图片大背景2

这里的登录界面用到了cavas-nest类库，用来给单调的静态突变背景，增加些许的动态特效。

特效线条 看实际运行好看 特效代码

五、区块的使用jf-panel

区块代码

这一个个区块 都是使用jf-panel做的

我们来看一个jf-panel的结构代码 有header 有body

jf-panel的结构

这样就能写出一个区块分割区域，一个区块都是块元素 各自占一个大行 这里右侧side部分又多个panel 如果想增加一个区块 只需要复制一份jf-panel就可以了

多个区块竖着排列

同样左侧主题区域也是这么用 用一个jf-panel就能做很多事情，可以是一个页面内容的一部分，也可以是整个部分。
例如登录页就是独立一个jf-panel 部分左右结构了。

一个jf-panel占满整个区域

jf-panel的header部分可以不要，直接写内容区域即可

六、doc文档类、俱乐部介绍类界面布局说明

JFinal官网的文档，之前也被吐槽过很多次了，界面跳转后没有保持左侧滚动位置，导致阅读体验不是很好
新版UI设计是左右分离，左侧始终悬浮不会随着页面滚动的。
然后在使用Pjax加载右侧每一章节的区域内容，就能完美了。

滚动条也做了美化处理。

文档类

下方用JavaScript监听了窗口的变化后处理左侧悬浮导航的具体变化细节在jfinal-com.js中

js处理用户体验

七、列表页面布局

上面讲了jf-panel的使用和首页的样式风格，都是jf-panel搭建出来的。
那么这里列表界面布局 跟首页是一样的 只不过需要把小的jf-panel的内容填充的多一些
去掉没用的其他panel后 加上分页组件。

项目列表

这个项目列表界面，内容比首页项目区域的内容要多，但是元素的风格一模一样。
下面再加上一个分页组件就行了。

分页组件

分页组件用的是Bootstrap内置的风格上稍微处理了一下配色。

捐助列表用的是table做了内容显示

捐助

八、内容发布页面

在项目、反馈、分享页面的side部分顶部，有专门一个链接按钮进入对应的发布界面。

发布
发布表单

实际动态项目中，根据需要，引入合适的富文本编辑器就可以了。

九、补充 标准列表布局

提供了一套标准列表样式
例如首页的分享列表 多种样式 反馈列表 都是用了这种标准列表jf-common-list
每一行数据都是一个jf-common-item

标准列表布局

具体一个item中的布局随意编写，这套Ui默认提供了Bootstrap 行布局 分左右两部分

布局例子

上图这样左右分为头像和内容信息 右侧又分为上下罗列的元素 一行一大个 每行有自己的东西

item布局

几个地方使用的大致布局是一致的 细节上根据不同区块的需要 单独定义自己的样式。

一致的布局

九、如您也需要获取这套Ui资源 练手 做自己的博客站 垂直社区站 目前低于5折（原价199）出售。

付费二维码

购买后 加我微信告知 发源码包

小木的微信

更多JFinal课程、资源、信息、项目 请扫码关注JFinal学院

JFinal学院公众号

说明：此文根据代码的实际更新进度进行更新