PtLib预定义CSS样式模板 开箱即用的CSS样式模板
PageTips是一个css现代化的样式模板，本页面的所有样式布局基于纯粹的css（栅格宽度指示器用到了js，但并未涉及布局与样式控制）
本页面展示了PageTips的基础性元素，另外还有一些复杂的页面布局，可以查看如下示例：
pt-panel-body中这些内容直接存在与一个panel中
没有二层的包裹。
非常不建议这样使用。
栅格系统
均分
pt-col
pt-col
pt-col
pt-col
pt-col
pt-col
pt-col
pt-col
pt-col
pt-col
pt-col
栅格与均分
pt-c-12
pt-col
pt-col
栅格换行
pt-c-4
pt-c-4
pt-c-4
pt-c-4
pt-c-4
pt-c-4
pt-c-4
pt-c-4
pt-c-6
pt-c-6
pt-c-6
pt-c-6
pt-c-6
pt-c-6
栅格偏移
pt-c-4
pt-co-2 pt-c-4
pt-co-2 pt-c-4
pt-c-4
pt-c-4
pt-c-4
pt-c-4
pt-c-4
pt-c-6
pt-co-6 pt-c-6
pt-c-6
pt-c-6
pt-c-6
pt-c-6
常规
加重样式
当前宽度：
可见性
隐藏
以下的div的class值为
pt-c-3 pt-xs-c-12 pt-sm-c-8 pt-md-c-6
pt-c-3:表示默认的占3/24宽度
pt-xs-c-12:表示在xs尺寸占3/24宽度
pt-sm-c-8:表示sm尺寸占3/24宽度
pt-md-c-6:表示md尺寸占3/24宽度
复合布局
Main1
Sec1
Sec2
- gray-0
- gray-1
- gray-2
- gray-3
- gray-4
- gray-5
- gray-6
- gray-7
- gray-8
- gray-9
- red-0
- red-1
- red-2
- red-3
- red-4
- red-5
- red-6
- red-7
- red-8
- red-9
- yellow-0
- yellow-1
- yellow-2
- yellow-3
- yellow-4
- yellow-5
- yellow-6
- yellow-7
- yellow-8
- yellow-9
- green-0
- green-1
- green-2
- green-3
- green-4
- green-5
- green-6
- green-7
- green-8
- green-9
- blue-0
- blue-1
- blue-2
- blue-3
- blue-4
- blue-5
- blue-6
- blue-7
- blue-8
- blue-9
- purple-0
- purple-1
- purple-2
- purple-3
- purple-4
- purple-5
- purple-6
- purple-7
- purple-8
- purple-9
- pink-0
- pink-1
- pink-2
- pink-3
- pink-4
- pink-5
- pink-6
- pink-7
- pink-8
- pink-9
本块展示了标签与说明样式,后面的数字123与白色方框内的汉字是对标签的说明
文字尺寸对比
小标签
文字尺寸对比卡片1
卡片2
列表1 Full模式
- PageTips是方便快捷的CSS预定义库
- PageTips是现代化风格css库
- PageTips提供网站开发中常用的布局模型
- PageTips是开源的
- https://github.com/lemge/pagetips
列表2 普通模式
- PageTips是方便快捷的CSS预定义库
- PageTips是现代化风格css库
- PageTips提供网站开发中常用的布局模型
- PageTips是开源的
- https://github.com/lemge/pagetips