代码拉取完成,页面将自动刷新
同步操作将从 东方大酒店/EastWebManager 强制同步,此操作会覆盖自 Fork 项目以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
BSUI 是一套由基本组件构成,包含基本交互逻辑,通过固化、沉淀、梳理以往项目前端经验,而编写的用于 B/S 软件的前端 UI 框架,主要用于 B/S 软件项目,用以减少前端重复工作量,提高开发效率。
市面上有很多大而全的 UI 框架,热门的有:Bootstrap、Amaze UI、Element、EasyUI、jQuery UI 等。这些 UI 框架都很强大,也各自有显著的优点,能解决前端 UI 方面的许多问题,但对于实际的 B/S 项目来讲,这些框架都或多或少无法完全普适项目需求,或者很难与现有项目的技术栈相融合:
- 这些 UI 框架大都无法较为全面顾及到 B/S 软件复杂的业务场景;
- 这些 UI 框架较多地顾及了用户普适性和浏览器兼容性,而大部分 B/S 项目不用过多考虑这些;
- Bootstrap 的 UI 侵入性太强,容易与其他 CSS 代码起冲突;
- Amaze UI 是移动优先的框架,而 B/S 项目大多是 PC 端的;
- Element 基于 Vue 这个 MVVM 框架,而很多 B/S 项目都是采用传统技术栈(基于 DOM),所以目前并不适合;
- 传统的 EasyUI 很强大,但颜值明显跟不上时代,显得落伍;
- jQuery UI 太重了……
BSUI 不是单纯为了做 UI 组件而做 UI 组件,而是从 B/S 项目的业务场景出发,根据需求反向推导出所需的 UI 组件,再考虑 UI 组件与后台的数据对接,最后进行 UI 组件的设计与编写。例如 Switch(开关)这个 UI 组件的推导过程:
1. B/S 项目中经常会用到一些“开关量”的设置项,例如:启用/禁用某个功能;
2. 以往怎么做?以往都是用两个单选框来做,但这样可视化效果较差,也不直观;
3. 期望怎么做?最直观的表达方式就是做一个“开关”来表示两种对立的状态;
4. 这个“开关”如何与后台对接?还是得用表单控件,这样对接成本最小;
5. 用哪个表单控件合适?可以用 checkbox,勾选表示“开”状态,不勾选表示“关”状态,则对应可传给后台 true 与 false 两种状态量;
6. UI 上如何实现?可以通过 label 响应 checkbox 勾选,用 checked 伪类,搭配伪元素来模拟开关交变……
7. 有哪些边界情况?有被禁用状态和初始化赋值被禁用,这两种情况要考虑 UI 上的变化……
为避免样式冲突,BSUI 采用了一套命名空间,规则如下:
ns
为namespace
的缩写形式。
命名前缀 | 类型 | 对应的 Sass 变量 | 描述 |
---|---|---|---|
l- |
布局 (layouts) | $ns-lyt |
大的布局区块。例如头部、主栏、侧栏、栅格等。 |
o- |
对象 (objects) | $ns-obj |
一般是不可再分的较小个体,通常被复用于各个组件、模块中。 |
c- |
组件 (components) | $ns-comp |
通常是一个语义化的、能实现某个较复杂功能,且可以重复使用的组合整体。例如弹出框、滑块等。 |
is- |
状态类 (state classes) | $ns-is |
作为对象、组件等的语义化状态类样式的钩子。 |
has- |
状态类 (state classes) | $ns-has |
同上,区别是 is 表示“是什么”;has 表示“有什么”。 |
u- |
实用类 (utility classes) | $ns-util |
包含一些使用率较高的常用样式。如清除浮动等。 |
你可以在登录后,发表评论
项目点评 ( 0 )