INN STUDIO 萤栈工作室

使用 Poi CSS 框架

其他, 技术文章 - 3

Poi CSS 框架是 INN STUDIO 的原创框架,集合了主流框架的优点以及精简了不常用的组件,并进一步优化搭配主题使用。

Grid 栅格系统

Poi CSS 的 grid  栅格系统,参考了主流栅格规格和名称的基础上添加了自定义百分比功能。

  • .poi-row:栅格父类,包裹 .poi-g_* ,如下列例子。
  • .poi-g_xl-1-12:在超大屏幕下划分十二分之一宽度(桌面、21:10 等超宽屏)。
  • .poi-g_lg-1-2:在大屏幕下划分二分一宽度(桌面)。
  • .poi-g_1-4:在所有屏幕下划分四分一宽度(手机、平板、桌面)。
  • .poi-g_md-5-7:在中等屏幕下划分七分之五宽度(平板)。
  • .poi-g_sm-1-1:在小屏幕下划分百分百宽度(平板小)。

使用例子:

<div class="poi-row">
  <div class="poi-g_lg-1-3 poi-g_sm-1-2 poi-g_1-1">...</div>
<div>

上述例子中 poi-g_1-1 默认可省略。

Btn 按钮

Btn Group 按钮组

Input 表单控件

Alert 提示文本

Dialog 弹出层

Nav 导航菜单

版权所有 © INN STUDIO 2011~2018 / v12.0.0 / 法律顾问: 广东易春秋律师事务所