HTML5技术

如何编写轻量级 CSS 框架 - nzbin(3)

字号+ 作者:H5之家 来源:H5之家 2017-08-07 12:00 我要评论( )

盒组件是我整个框架中比较满意的一个模块。之所以要做这个组件主要是觉得 Bootstrap 的 list 组件和 panel 组件可以整合到一起。当然,这样的做法有利有弊。盒组件在后台管理系统的布局中表现的尤为突出。其命名也

盒组件是我整个框架中比较满意的一个模块。之所以要做这个组件主要是觉得 Bootstrap 的 list 组件和 panel 组件可以整合到一起。当然,这样的做法有利有弊。盒组件在后台管理系统的布局中表现的尤为突出。其命名也是多种多样,比如 panel、widget、portlet、ibox、card等,每个后台管理系统框架都会对这个组件进行深度开发,可见其在布局上的重要性。给一个组件起一个合适的类名也很关键,想了很久,最后用了 box 的类名,当然一般情况下尽量不要用 box,因为这个类名比较宽泛。下面的 CodePen 模拟了 Bootstrap 的 list 及 panel 组件。

See the Pen snack-boxes by Zongbin (@nzbin) on CodePen.

主题

给框架添加主题是一件有趣的事情。Snack 的默认主题是白色,因为喜欢黑色,最后添加了暗夜主题,编写主题只需改变组件的颜色。演示文档的页面用了暗夜主题,点击上方的红色按钮可以切换主题。

结论

如果大家问我那个框架更好,我会毫不犹豫的选择 Bootstrap。在工作中可以根据需求的难易进行框架选择,如果业务比较重,最好根据 Bootstrap 进行二次开发;反之,可以选择一些轻量级框架,最好还是根据自己的需求造轮子,如果大家愿意选择或是借鉴我的框架,那会是我的荣幸。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 二十一、如何导入svg图片 - gunelark

    二十一、如何导入svg图片 - gunelark

    2017-08-06 10:00

  • 开始编写寄几的 CSS 基础库 - Daryl

    开始编写寄几的 CSS 基础库 - Daryl

    2017-07-25 12:01

  • 前端如何将H5页面打包成本地app? - zhoulin-circle

    前端如何将H5页面打包成本地app? - zhoulin-circle

    2017-07-05 08:01

  • 轻量级高性能ORM框架:Dapper高级玩法 - 云中客

    轻量级高性能ORM框架:Dapper高级玩法 - 云中客

    2017-07-02 13:02

网友点评
p