代码拉取完成,页面将自动刷新
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>栅格系统 - quickly切图框架</title>
<meta name="keywords" content="quickly快速切图css框架,中文css框架,css框架,开源css框架,css框架下载"/>
<meta name="description" content="quickly切图框架是一款基于html5技术的网站跨屏自适应框架,基于jquery和vue数据双向绑定。"/>
<meta content="width=device-width,initial-scale=1" name="viewport">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="assets/css/quickly.css">
<link rel="stylesheet" href="assets/css/prettify.css" >
</head>
<body>
<div class="qui-container" id="app" v-cloak>
<div class="qui-naver-wrap">
<div class="qui-naver">
<div class="qui-wrapper">
<div class="brand">
<a href="./index.html"><i class="iconfont icon-xiangying
"></i> quickly</a>
<span>{{kpData.kpLogotxt}}</span>
</div>
<div class="qui-gh">
<a href="#"></a> </div>
<div class="module">
<ul>
<li v-bind:class="{ selected: item.link == currPage }" v-for="(item,i) in kpData.kpNavs">
<a :href="item.link" :target="item.target">{{item.title}}
<span v-if="item.subMenu" class="iconfont icon-jiantou
"></span></a>
<ul v-show="item.subMenu">
<li v-for="(itm,n) in item.subMenu">
<a :href="itm.link" :target="itm.target">{{itm.title}}</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="sub">
<ul>
<li v-for="(item,i) in kpData.kpNavsRt">
<a :href="item.link" :target="item.target">
<i :class="'iconfont ' + item.icon "></i>{{item.title}}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="qui-heading qui-heading-sm">
<div class="qui-heading-inner">
<div class="qui-wrapper">
<h1 class="qui-heading-title">栅格系统</h1>
<h3 class="qui-heading-lead">基于12列栅格化格子系统 </h3>
</div>
</div>
</div>
<div class="qui-wrapper">
<div class="qui-row">
<div class="qui-col9 ">
<div class="part" id="grid">
<h4>栅格系统响应两种核心分辨率PC和手机,PC采用1170宽度(确保MAC下默认分辨率1280下正常显示的宽度)</h4>
<!--演示-->
<pre class="prettyprint linenums">/* 电脑大屏--lg*/<br> .qui-wrapper{<br> width: 1170px;<br> }
/* 电脑小屏--md */<br>@media screen and (max-width:1200px){
.qui-wrapper{
width: 970px;
}
}
/* 平板--sm */
@media screen and (max-width:992px){
.qui-wrapper{
width: 750px;
}
}
/* 手机 xs*/
@media screen and (max-width:768px){
.qui-wrapper{
width: 100%;
}
}</pre>
<p> </p>
<h2>12栅格系统</h2>
<p>默认12列的单元格栅格系统</p>
<h4>栅格系统的基本写法</h4>
<p>先写一行<code>class="qui-row"</code>,行的里面写列(即格子系统)<code>class="qui-col*"</code> 1~12的罗马数字被作为了栅格系统的12列格子的命名。</p>
<pre class="prettyprint linenums"><div class=".qui-row"><br> <div class="qui-col5 ">
<!--内容-->
</div><br> <div class="qui-col8 ">
<!--内容-->
</div><br></div></pre>
<h2>演示</h2>
<div class="qui-row">
<div class="qui-col5 ">
<p class="bordered"> </p>
</div>
<div class="qui-col7 ">
<p class="bordered"> </p>
</div>
</div>
</div>
<div class="part" id="grid10">
<!--演示-->
<h2>10列栅格系统</h2>
<p>增加一个qui-row10<code>class="qui-row qui-row10"</code></p>
<pre class="prettyprint linenums"><div class="qui-row qui-row10"><br> <div class="qui-col5 ">
<!--内容-->
</div><br> <div class="qui-col5 ">
<!--内容-->
</div><br></div></pre>
<h2>演示</h2>
<p>利用10列删格系统平分5等份</p>
<div class="qui-row qui-row10">
<div class="qui-col2 ">
<p class="bordered"> </p>
</div>
<div class="qui-col2 ">
<p class="bordered"> </p>
</div>
<div class="qui-col2 ">
<p class="bordered"> </p>
</div>
<div class="qui-col2 ">
<p class="bordered"> </p>
</div>
<div class="qui-col2 ">
<p class="bordered"> </p>
</div>
</div>
</div>
<div class="part" id="fill">
<!--演示-->
<h2>填补空缺</h2>
<p>可以通过 <code>.fill*</code>的写法让 qui-col12列栅格系统列发生偏移,例如 <code>.qui-fill1</code>将会让列往右偏移1个格子的宽度。</p>
<pre class="prettyprint linenums"><div class=".qui-row"><br> <div class="qui-col4 qui-fill1">
<!--内容-->
</div><br> <div class="qui-col4 ">
<!--内容-->
</div><br></div></pre>
<h2>演示</h2>
<div class="qui-row">
<div class="qui-col1 qui-fill1">
<p class="bordered">qui-fill1</p>
</div>
<div class="clear"> </div>
<div class="qui-col5 qui-fill1-5">
<p class="bordered">qui-fill1-5 额外增加了1.5个各自的位移</p>
</div>
<div class="clear"> </div>
<div class="qui-col1 qui-fill2">
<p class="bordered">qui-fill2</p>
</div>
<div class="clear"> </div>
<div class="qui-col1 qui-fill3">
<p class="bordered">qui-fill3</p>
</div>
<div class="clear"> </div>
<div class="qui-col1 qui-fill4">
<p class="bordered">qui-fill4</p>
</div>
<div class="clear"> </div>
<div class="qui-col1 qui-fill5">
<p class="bordered">qui-fill5</p>
</div>
<div class="clear"> </div>
<div class="qui-col1 qui-fill6">
<p class="bordered">qui-fill6</p>
</div>
<div class="clear"> </div>
<div class="qui-col1 qui-fill7">
<p class="bordered">qui-fill7</p>
</div>
<div class="clear"> </div>
<div class="qui-col1 qui-fill8">
<p class="bordered">qui-fill8</p>
</div>
</div>
</div>
<div class="part" id="multiple">
<h2>多重嵌套</h2>
<p>实现栅格系统的多重嵌套 嵌套依然先写一行<code>class="qui-row"</code></p>
<pre class="prettyprint linenums"><div class=".qui-row"><br> <div class="qui-col6 "><br> <div class=".qui-row"><br> <div class="qui-col6"><br> <!--内容--> <br> </div><br> <div class="qui-col6"><br> <!--内容--> <br> </div><br> </div><br> </div><br> <div class="qui-col6 "><br> <!--内容--> <br> </div><br></div>
</pre>
<h2>演示</h2>
<div class="qui-row">
<div class="qui-col6 ">
<div class="qui-row">
<div class="qui-col6">
<p class="bordered"> </p>
</div>
<div class="qui-col6">
<p class="bordered"> </p>
</div>
</div>
</div>
<div class="qui-col6 ">
<p class="bordered"> </p>
</div>
</div>
<h2>完整的栅格系统演示</h2>
<div class="qui-row">
<div class="qui-col12 ">
<p class="bordered"> </p>
</div>
<div class="clear"></div>
<div class="qui-col1">
<p class="bordered"> </p>
</div>
<div class="qui-col11">
<p class="bordered"> </p>
</div>
<div class="clear"></div>
<div class="qui-col2">
<p class="bordered"> </p>
</div>
<div class="qui-col10">
<p class="bordered"> </p>
</div>
<div class="clear"></div>
<div class="qui-col3">
<p class="bordered"> </p>
</div>
<div class="qui-col9">
<p class="bordered"> </p>
</div>
<div class="clear"></div>
<div class="qui-col4">
<p class="bordered"> </p>
</div>
<div class="qui-col8">
<p class="bordered"> </p>
</div>
<div class="clear"></div>
<div class="qui-col5">
<p class="bordered"> </p>
</div>
<div class="qui-col7">
<p class="bordered"> </p>
</div>
<div class="clear"></div>
<div class="qui-col6">
<p class="bordered"> </p>
</div>
<div class="qui-col6">
<p class="bordered"> </p>
</div>
<div class="clear"></div>
<div class="qui-col7">
<p class="bordered"> </p>
</div>
<div class="qui-col5">
<p class="bordered"> </p>
</div>
<div class="clear"></div>
<div class="qui-col8">
<p class="bordered"> </p>
</div>
<div class="qui-col4">
<p class="bordered"> </p>
</div>
<div class="clear"></div>
<div class="qui-col1">
<p class="bordered"> </p>
</div>
<div class="qui-col1">
<p class="bordered"> </p>
</div>
<div class="qui-col1">
<p class="bordered"> </p>
</div>
<div class="qui-col1">
<p class="bordered"> </p>
</div>
<div class="qui-col1">
<p class="bordered"> </p>
</div>
<div class="qui-col1">
<p class="bordered"> </p>
</div>
<div class="qui-col1">
<p class="bordered"> </p>
</div>
<div class="qui-col1">
<p class="bordered"> </p>
</div>
<div class="qui-col1">
<p class="bordered"> </p>
</div>
<div class="qui-col1">
<p class="bordered"> </p>
</div>
<div class="qui-col1">
<p class="bordered"> </p>
</div>
<div class="qui-col1">
<p class="bordered"> </p>
</div>
</div>
<!--演示-->
</div>
<h2 id="important">重要说明</h2>
<p>所有的移动端的样式定义均以<code>qui-sm-*</code>格式,无一例外。 </p>
<div class="part" id="grid">
<h2>移动端栅格</h2>
<p>为了满足移动端布局更加灵活,新增了移动版栅格系统,此演示仅为抛石引玉,在实际应用中还有很多问题需要解决,我们期待与使用者一同探讨解决! <code>.qui-col5 qui-sm-*</code></p>
<!--移动端删格-->
<pre class="prettyprint linenums"><div class="qui-row ">
<div class="qui-col1 qui-sm-col1"><br> ...<br> </div><br> <div class="qui-col11 qui-sm-col11"><br> ...<br> </div>
</div></pre>
<div class="qui-row ">
<div class="qui-col12 ">
<p class="bordered"> </p>
</div>
<div class="clear"></div>
<div class="qui-col1 qui-sm-col1">
<p class="bordered"> </p>
</div>
<div class="qui-col11 qui-sm-col11">
<p class="bordered"> </p>
</div>
<div class="clear"></div>
<div class="qui-col2 qui-sm-col2">
<p class="bordered"> </p>
</div>
<div class="qui-col10 qui-sm-col10">
<p class="bordered"> </p>
</div>
<div class="clear"></div>
<div class="qui-col3">
<p class="bordered"> </p>
</div>
<div class="qui-col9">
<p class="bordered"> </p>
</div>
<div class="clear"></div>
<div class="qui-col4">
<p class="bordered"> </p>
</div>
<div class="qui-col8">
<p class="bordered"> </p>
</div>
<div class="clear"></div>
<div class="qui-col5">
<p class="bordered"> </p>
</div>
<div class="qui-col7">
<p class="bordered"> </p>
</div>
<div class="clear"></div>
<div class="qui-col6">
<p class="bordered"> </p>
</div>
<div class="qui-col6">
<p class="bordered"> </p>
</div>
<div class="clear"></div>
<div class="qui-col7">
<p class="bordered"> </p>
</div>
<div class="qui-col5">
<p class="bordered"> </p>
</div>
<div class="clear"></div>
<div class="qui-col8">
<p class="bordered"> </p>
</div>
<div class="qui-col4">
<p class="bordered"> </p>
</div>
</div>
<!--百分比栅格-->
</div>
<h2 id="font">字体定义</h2>
<p>定义了常用移动端字体大小 qui-sm-fs12 , qui-sm-fs14,qui-sm-fs16 ... qui-sm-fs30</p>
<h2 id="padding">间距</h2>
<p>定义了常用移动间距 qui-sm-pd10 ,qui-sm-pd20,qui-sm-pd-0-20 (上下为0,左右20)等等</p>
</div>
<div class="qui-col3">
<div class="qui-sidebar">
<ul>
<li class="selected"><a href="#grid">栅格系统</a></li>
<li><a href="#fill">填补空缺</a></li>
<li><a href="#multiple">多重嵌套</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="qui-footer" align="center">
<div class="qui-wrapper ">
{{kpData.kpCopyRight}}</div>
</div>
</div>
<script src="assets/js/vue.js"></script>
<script src="assets/js/jquery-1.7.1.min.js"></script>
<script src="assets/js/prettify.js"></script>
<script src="assets/js/quickly.js"></script>
<script src="assets/js/kpdata.js"></script>
<script>
new Vue({
el:'#app',
data: {
kpData:kpData,
currPage:'grid.html'
},methods:{
},
mounted(){
},
created:function(){
},
})
</script>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。