Paper Kit 2

Paper Kit 2简要指南


官方文档:http://demos.creative-tim.com/paper-kit-2/documentation/tutorial-components.html#datetimepicker-row
Paper kit是一个为Bootstrap建造的美丽资源。我们重新设计了所有组件,并采用了淡色方案和类似纸张的转换。我们为这款新的Bootstrap皮肤以及定制的可能性而感到自豪。 使用它非常简单,它可以让你刷新你经典的外观应用程序。为了达到预期的效果,您还需要集成JS插件,这需要花费更多的精力。最终的结果将是值得的。

(以上内容来源于google翻译,因为我发现没有任何国内的博客教程写关于Paper Kit 2.)

为了帮助以后自己复习以及给一些不是很喜欢看官方文档的小伙伴一些指南(以及导师要求),写下这篇博客。

(我觉得我写的很啰里啰嗦了,但好像还是无法帮助完全零基础的人看懂,这篇博客是假定你们已经会使用bootstrap的基础上写的)

好了我们开始了。

使用Paper有两种方式,一种是去github上把整个项目都clone下来

github:
https://github.com/creativetimofficial/paper-kit

另一种方式,不用clone整个paper kit 2项目,只把需要的相应项目clone下来,放到自己项目相应的位置就可以了

github:
https://github.com/creativetimofficial/paper-kit/blob/bootstrap4-development/assets/css/paper-kit.css

https://github.com/creativetimofficial/paper-kit/blob/bootstrap4-development/assets/js/paper-kit.js

https://github.com/creativetimofficial/paper-kit/tree/bootstrap4-development/assets/sass

方便起见,使用第一种方式讲述。

picture

如上图是下载完后没有展开的目录结构

从上往下依次为

assets 资源目录

picture

​ 每个目录文件的具体意义不再赘述,如果感兴趣可以去google或者是百度一下

documentation 文档目录

picture

​ 好像也没什么好讲的

emamples 示例

picture

​ 好像文件名解释的很清楚了也不再赘述

CHANGELOG.md 日志

​ 就是change log辣,别被大写所迷惑了

index.html 主页

​ 就是kit 2 的官方主页

LICENSE.md 可以理解为许可证

nucleo-icons-dome.html icon合辑

​ 其实我觉得 阿里icon 还蛮好用,选择也比较多(重要的是免费

package.json (接口?

README.md 文档

template.html 模板

我们写自己的页面,可以把index.html body里面的内容删掉重写,也可以在template.html里写

那这么说来,paper kit 2 和bootstrap的区别是什么

使用方法都是一样的,通过添加class来使用已经定义过的样式。

因为paper kit 2本身是基于bootstrap的,所以bootstrap有的paper kit 2都有,但paper kit 2 有一些值得欣赏的东西

比如bootstrap的buttons,只有color、size的属性。但是paper kit 2还有style属性。如下图

picture

是不是感觉bootstrap的buttons方便使用了很多

bootstrap和paper kit 2 共同有的组件部分是:

  • Buttons

  • nputs

  • Textarea

  • Menu

  • Dropdown

  • Progress Bars

  • Navigation Menu

  • Pagination

  • Labels

  • Notifications

  • Typography

  • Images

  • Tooltips

  • Popovers

  • Modal

  • Carousel

paper kit 2的新组件有:

  • Checkboxes

  • Radio Buttons

  • Sliders

  • Datetimepicker

我们来学习使用一下新组件












好了没了,

因为我发现我没办法把事情描述的比官方文档更简单,而且官方文档周围的英语也是简单易懂不用翻译

最后祝大家生活愉快有什么问题可以和我讨论

(最后:发现Datetimepicker真的很好用​