Looper UI

纯CSSweb页面组件库
Pure CSS Interface Kit | V0.1 update at 2017-2-25完整版下载

按钮组
Buttons

<button>默认default</button>
<button class="btn_info">提示info</button>
<button class="btn_warning">警告warning</button>
<button class="btn_error">错误error</button>
<button class="btn_success">成功success</button>
<button class="btn_success disabled">禁用disabled</button>
<button class="btn_outline">默认default</button>
<button class="btn_outline_info">提示info</button>
<button class="btn_outline_warning">警告warning</button>
<button class="btn_outline_error">错误error</button>
<button class="btn_outline_success">成功success</button>
<button class="btn_outline_success disabled">禁用disabled</button>

开关/切换
Switches/Toggles

1.默认 swithch

<input id="switch_default" type="checkbox" class="switch_default">
<label for="switch_default"></label>

2.仿iOS swithch

<input id="switch_iOS" type="checkbox" class="switch_iOS">
<label for="switch_iOS"><i></i></label>

3.仿FlymeOS swithch

<input id="switch_FlymeOS" type="checkbox" class="switch_FlymeOS">
<label for="switch_FlymeOS"></label>

4.仿MIUI swithch

<input id="switch_MIUI" type="checkbox" class="switch_MIUI">
<label for="switch_MIUI"></label>

5.方块Diamond swithch

<input id="switch_Diamond" type="checkbox" class="switch_Diamond">
<label for="switch_Diamond"><i></i></label>

6.椭圆Ellipse swithch

<input id="switch_Ellipse" type="checkbox" class="switch_Ellipse">
<label for="switch_Ellipse"></label>

7.多彩Color swithch

<input id="switch_Color" type="checkbox" class="switch_Color">
<label for="switch_Color"><i></i></label>

8.渐变Gradient swithch

<input id="switch_Gradient" type="checkbox" class="switch_Gradient">
<label for="switch_Gradient"></label>

9.文字Word swithch

<input id="switch_Word" type="checkbox" class="switch_Word">
<label for="switch_Word"><i></i></label>

10.旋转Rotate swithch

<input id="switch_Rotate" type="checkbox" class="switch_Rotate">
<label for="switch_Rotate"><i></i></label>

输入框
Input

1.单选框 Radio

<input id="radio_input" type="radio" class="radio_input" name="a" value="0">
<label for="radio_input"></label>
 <input id="radio_input2" type="radio" class="radio_input" name="a" value="1">
<label for="radio_input2"></label>

2.多选框 Checkbox

<input id="checkbox_input" type="checkbox" class="checkbox_input" name="a" value="0">
<label for="checkbox_input"></label>
 <input id="checkbox_input2" type="checkbox" class="checkbox_input" name="a" value="1">
<label for="checkbox_input2"></label>

3.输入框 text_input

<input  type="text" class="text_input" name="a" placeholder="在这里输入内容Input something here...">

4.输入框_警告 text_input input_warnning

<input  type="text" class="text_input input_warnning" name="a" placeholder="在这里输入内容Input something here...">

5.输入框_错误 text_input input_error

<input  type="text" class="text_input input_error" name="a" placeholder="在这里输入内容Input something here...">

6.输入框_成功 text_input input_success

<input  type="text" class="text_input input_success" name="a" placeholder="在这里输入内容Input something here...">

网格系统
Grid system

参考了bootstrap的网格系统，将屏幕宽度分为12列，flex布局，彼此之间可以嵌套，可以偏移；
与bootstrap不同点：
1.考虑到vue不支持'-'短横线命名类，故采用'_'短下划线命名类；
2.网格之间没有padding，分割区块更加精确；如有需要padding，建议自行添加；
不区分屏幕大小时建议使用类.col_* 和.offset_*；

\ 特小屏<5765px 576px<小屏<768px 768px<中屏<992px 992px<大屏<1200px 1200px<特大屏
类前缀 .col_xs_*
.offset_xs_*		 .col_sm_*
.offset_sm_*		 .col_md_*
.offset_md_*		 .col_lg_*
.offset_lg_*		 .col_xl_*
.offset_xl_*