Watch 1 Star 11 Fork 0

qietuwang / quicklyHTMLMIT

Join us
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
快速前端切图响应式css框架 spread retract

http://qietu.com/quickly/v1.4

Clone or download
grid.html 13.81 KB
Copy Edit Web IDE Raw Blame History
qietuwang authored 2019-12-27 11:54 . no commit message
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566
<!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>&nbsp;</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">&lt;div class=&quot.qui-row&quot;&gt;<br> &lt;div class=&quot;qui-col5 &quot;&gt;
&lt;!--内容--&gt;
&lt;/div&gt;<br> &lt;div class=&quot;qui-col8 &quot;&gt;
&lt;!--内容--&gt;
&lt;/div&gt;<br>&lt;/div&gt;</pre>
<h2>演示</h2>
<div class="qui-row">
<div class="qui-col5 ">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col7 ">
<p class="bordered">&nbsp;</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">&lt;div class=&quotqui-row qui-row10&quot;&gt;<br> &lt;div class=&quot;qui-col5 &quot;&gt;
&lt;!--内容--&gt;
&lt;/div&gt;<br> &lt;div class=&quot;qui-col5 &quot;&gt;
&lt;!--内容--&gt;
&lt;/div&gt;<br>&lt;/div&gt;</pre>
<h2>演示</h2>
<p>利用10列删格系统平分5等份</p>
<div class="qui-row qui-row10">
<div class="qui-col2 ">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col2 ">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col2 ">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col2 ">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col2 ">
<p class="bordered">&nbsp;</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">&lt;div class=&quot.qui-row&quot;&gt;<br> &lt;div class=&quot;qui-col4 qui-fill1&quot;&gt;
&lt;!--内容--&gt;
&lt;/div&gt;<br> &lt;div class=&quot;qui-col4 &quot;&gt;
&lt;!--内容--&gt;
&lt;/div&gt;<br>&lt;/div&gt;</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">&lt;div class=&quot.qui-row&quot;&gt;<br> &lt;div class=&quot;qui-col6 &quot;&gt;<br> &lt;div class=&quot.qui-row&quot;&gt;<br> &lt;div class=&quot;qui-col6&quot;&gt;<br> &lt;!--内容--&gt; <br> &lt;/div&gt;<br> &lt;div class=&quot;qui-col6&quot;&gt;<br> &lt;!--内容--&gt; <br> &lt;/div&gt;<br> &lt;/div&gt;<br> &lt;/div&gt;<br> &lt;div class=&quot;qui-col6 &quot;&gt;<br> &lt;!--内容--&gt; <br> &lt;/div&gt;<br>&lt;/div&gt;
</pre>
<h2>演示</h2>
<div class="qui-row">
<div class="qui-col6 ">
<div class="qui-row">
<div class="qui-col6">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col6">
<p class="bordered">&nbsp;</p>
</div>
</div>
</div>
<div class="qui-col6 ">
<p class="bordered">&nbsp;</p>
</div>
</div>
<h2>完整的栅格系统演示</h2>
<div class="qui-row">
<div class="qui-col12 ">
<p class="bordered">&nbsp; </p>
</div>
<div class="clear"></div>
<div class="qui-col1">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col11">
<p class="bordered">&nbsp;</p>
</div>
<div class="clear"></div>
<div class="qui-col2">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col10">
<p class="bordered">&nbsp;</p>
</div>
<div class="clear"></div>
<div class="qui-col3">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col9">
<p class="bordered">&nbsp;</p>
</div>
<div class="clear"></div>
<div class="qui-col4">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col8">
<p class="bordered">&nbsp;</p>
</div>
<div class="clear"></div>
<div class="qui-col5">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col7">
<p class="bordered">&nbsp;</p>
</div>
<div class="clear"></div>
<div class="qui-col6">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col6">
<p class="bordered">&nbsp;</p>
</div>
<div class="clear"></div>
<div class="qui-col7">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col5">
<p class="bordered">&nbsp;</p>
</div>
<div class="clear"></div>
<div class="qui-col8">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col4">
<p class="bordered">&nbsp;</p>
</div>
<div class="clear"></div>
<div class="qui-col1">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col1">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col1">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col1">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col1">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col1">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col1">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col1">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col1">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col1">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col1">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col1">
<p class="bordered">&nbsp;</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">&lt;div class=&quot;qui-row &quot;&gt;
&lt;div class=&quot;qui-col1 qui-sm-col1&quot;&gt;<br> ...<br> &lt;/div&gt;<br> &lt;div class=&quot;qui-col11 qui-sm-col11&quot;&gt;<br> ...<br> &lt;/div&gt;
&lt;/div&gt;</pre>
<div class="qui-row ">
<div class="qui-col12 ">
<p class="bordered">&nbsp; </p>
</div>
<div class="clear"></div>
<div class="qui-col1 qui-sm-col1">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col11 qui-sm-col11">
<p class="bordered">&nbsp;</p>
</div>
<div class="clear"></div>
<div class="qui-col2 qui-sm-col2">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col10 qui-sm-col10">
<p class="bordered">&nbsp;</p>
</div>
<div class="clear"></div>
<div class="qui-col3">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col9">
<p class="bordered">&nbsp;</p>
</div>
<div class="clear"></div>
<div class="qui-col4">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col8">
<p class="bordered">&nbsp;</p>
</div>
<div class="clear"></div>
<div class="qui-col5">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col7">
<p class="bordered">&nbsp;</p>
</div>
<div class="clear"></div>
<div class="qui-col6">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col6">
<p class="bordered">&nbsp;</p>
</div>
<div class="clear"></div>
<div class="qui-col7">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col5">
<p class="bordered">&nbsp;</p>
</div>
<div class="clear"></div>
<div class="qui-col8">
<p class="bordered">&nbsp;</p>
</div>
<div class="qui-col4">
<p class="bordered">&nbsp;</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>

Comment ( 0 )

Sign in for post a comment

HTML
1
https://gitee.com/qietuwang/quickly.git
git@gitee.com:qietuwang/quickly.git
qietuwang
quickly
quickly
master

Help Search