Web组件
导航，选项卡，页脚，子菜单，分页等
边框
头部告示黄色区域引人注目
演示
这是一段警告
×
<div class="qui-spring">
<div class="qui-wrapper">
这是一段警告
<del>×</del>
</div>
</div>
边框
歌词来自《Whatever Will Be, Will Be》
演示
When I was just a little girl,
I asked my mother,
"What will I be?
Will I be pretty?
Will I be rich?"
<p class="qui-bdr qui-bdr-red qui-txt-red qui-pd-small">When I was just a little girl,</p>
<p class="qui-bdr qui-bdr-yellow qui-txt-yellow qui-pd-small">I asked my mother, </p>
<p class="qui-bdr qui-bdr-blue qui-txt-blue qui-pd-small">"What will I be?</p>
<p class="qui-bdr qui-bdr-green qui-txt-green qui-pd-small">Will I be pretty?</p>
<p class="qui-bdr qui-pd-small">Will I be rich?"</p>
头部导航
无色 添加class="qui-naver unstyled"调用
代码片段
<div class="qui-naver">
<div class="qui-wrapper">
<div class="logo">
</div>
<div class="module">
<ul>
<li>
<strong><a href="#" class="selected">菜单1</a></strong>
</li>
<li>
<strong><a href="###">菜单2</a></strong>
<div class="droper">
<a href="#">子菜单1</a>
<a href="#" target="_blank">子菜单2</a>
<a href="#" target="_blank">子菜单3</a>
<a href="#" target="_blank">子菜单4</a>
<a href="#" target="_blank">子菜单5</a>
</div>
</li>
</ul>
</div>
<div class="sub">
<a href="#">例子</a>
<a href="#">关于</a>
</div>
</div>
</div>
选项卡
带js的选项卡效果
演示
代码片段
<div class="qui-taber">
<div class="head">
<a href="#" lang="t1" class="selected">典故</a>
<a href="#" lang="t2">关于</a>
<a href="#" lang="t3">其他</a>
<a href="#" lang="t4">其他</a>
</div>
<div class="body" id="t1">
xxxxxxxx
</div>
<div class="body" id="t2" style="display:none;">
sssssssss
</div>
<div class="body" id="t3" style="display:none;">
sssssss
</div>
<div class="body" id="t4" style="display:none;">
ssss
</div>
</div>
侧边栏
侧边栏菜单，常用于子菜单的展示
<ul class="qui-sidebar">
<li class="selected"> <a href="#">栏目</a></li> <li><a href="#">菜单</a></li> <li><a href="#">菜单</a></li>
</ul>
面包屑
<div class="qui-current"> <a href="#">首页</a>> <a href="#">概述</a>> <span>组件</span> </div>
无样式
引用class="qui-current unstyled"
分页
通用而简洁的分页样式
<div class="qui-pager"> <a href="#">首页</a> <a href="#">上一页</a> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">...</a> <a href="#">99</a> <a href="#">下一页</a> <a href="#">尾页</a> </div>
无样式分页
引用样式class="qui-pager unstyled"
tag标签
| 默认 | <span class="label">默认</span> |
| 成功 | <span class="label success">成功</span> |
| 默认 | <span class="label warning">警告</span> |
| 默认 | <span class="label error">错误</span> |
提示信息
不同的提示信息是不同的颜色，容易理解
<div class="qui-alert">
<strong>提示信息！</strong>这是一段普通的提示信息描述 </div>
默认提示风格
提示信息！这是一段普通的提示信息描述
正确提示风格
恭喜你！经过你的不懈努力，你升级啦！
错误提示风格
权限不足！您没有权限访问本页，请问管理员索要权限。
进度条
<div class="qui-progress">
<div class="bar" style="width:50%;"> </div> </div>
默认提示风格
格子状
动态滚动
成功
警告
危险
消息墙
突出展示一些信息
<div class="qui-well">
... </div>
消息墙，可以突出展示一些信息
刊头
突出展示一些信息
<div class="qui-masthead">
<h1>quckly快速切图框架</h1>
<div class="qui-lead">跨屏响应式css框架</div>
<div class="social">基于vue.js双向数据绑定的web组件</div> </div>
quckly快速切图框架
跨屏响应式css框架
弹窗
通过rel="qui-dialog"来调用
代码片段
<div class="qui-dialog" style="display:block;">
<div class="qui-dialog-head">
编辑学校
<del>×</del>
</div>
<div class="qui-dialog-body">
...
</div>
<div class="qui-dialog-foot">
<input name="" type="qui-btn" value="确定" class="qui-btn blue">
<input name="" type="qui-btn" value="取消" class="qui-btn">
</div>
</div>
效果演示
编辑学校 ×
名称：
省份： 地区：
地址：
级别：
类型： 高中 初中 小学
事件调用
<a href="#qui-dialog" class="qui-btn" rel="qui-dialog">点击我弹出对话框窗口</a>
编辑学校 ×
这里是内容
qui-tooltip
气泡提醒组件 通过rel="qui-tooltip"来调用
代码片段
<a rel="qui-tooltip" title="quckly快速切图框架是一个开源中文(X)HTML/CSS 框架">quckly快速切图框架</a>
演示
quckly快速切图框架是一个开源中文 (X)HTML/CSS 框架 ,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,能够用于网站的快速设计,通过重设和重建浏览器标准，可以让每个网站防 止枯燥的跨浏览器兼容性测试。
qui-popover
气泡提醒组件 通过rel="qui-popover"来调用
<a rel="qui-popover" title="quckly快速切图框架是一个开源中文(X)HTML/CSS 框架">quckly快速切图框架</a>
演示
quckly快速切图框架是一个开源中文 (X)HTML/CSS 框架 ,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,能够用于网站的快速设计,通过重设和重建浏览器标准，可以让每个网站防 止枯燥的跨浏览器兼容性测试。
幻灯片
代码片段
<div class="qui-slider">
<div class="qui-slider-list">
<ul>
<li style="display:none;"> <!--内容-->
</li>
<li> <!--内容-->
</li>
</ul>
</div>
<!--左右按钮-->
<div class="qui-slider-prev">‹</div>
<div class="qui-slider-next">›</div>
</div>