401 lines
17 KiB
HTML
Executable File
401 lines
17 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>样式 - Kico Style</title>
|
||
<meta name="theme-color" content="#3498db" />
|
||
<link rel="icon" href="static/icon-32.png" sizes="32x32" />
|
||
<link rel="icon" href="static/icon-192.png" sizes="192x192" />
|
||
<link href="static/kico.css" rel="stylesheet" type="text/css" />
|
||
<link href="static/doc.css?v=22.12.25" rel="stylesheet" type="text/css" />
|
||
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1" />
|
||
</head>
|
||
<body class="has-bar">
|
||
<aside class="sidebar">
|
||
<div class="header">
|
||
<img src="static/kico.svg" title="Kico Style" />
|
||
<span class="title">Style</span>
|
||
</div>
|
||
<nav class="menu">
|
||
<a href="index.html" content="开始">
|
||
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M893.7 505.9H129.3c-13 0-24.8-7.9-29.8-19.9-5-12-2.2-25.9 7-35.2l307-307c26.1-26.1 60.9-40.5 98-40.5s71.9 14.4 98 40.5l307 307c9.2 9.2 12 23.1 7 35.2-5 12.1-16.7 19.9-29.8 19.9zM673.2 919.9h-31.5c-17.8 0-32.3-14.4-32.3-32.3v-77.4c0-23.1-18.8-42.1-41.9-42.4-22.3 0.3-41.1 19.3-41.1 42.4v77.4c0 17.8-14.4 32.3-32.3 32.3H349.8c-70.9 0-128.7-63.7-128.7-141.9V581.9c0-17.8 14.4-32.3 32.3-32.3h516.2c17.8 0 32.3 14.4 32.3 32.3V778c-0.1 78.3-57.8 141.9-128.7 141.9z"></path>
|
||
</svg>
|
||
</a>
|
||
<a href="wrap.html" content="样式">
|
||
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M877.3 154.7C836.9 114.3 783 92 725.5 92c-57.5 0-111.4 22.3-151.8 62.7l-48.1 48.1-251.4 251.3 303.6 303.6 299.4-299.4c40.4-40.4 62.7-94.3 62.7-151.8 0-57.4-22.2-111.4-62.6-151.8zM221.5 506.9L177 551.3c-16.8 16.8-27.9 37.9-32.4 61.2l-53.9 285c-2.3 12.1 1.6 24.6 10.3 33.3 7.1 7.1 16.6 10.9 26.4 10.9 2.3 0 4.6-0.2 6.9-0.6l285-53.9c23.3-4.4 44.5-15.6 61.2-32.4l44.4-44.4-303.4-303.5z"></path>
|
||
</svg>
|
||
</a>
|
||
<a href="components.html" content="组件">
|
||
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M512 510.4m-105.9 0a105.9 105.9 0 1 0 211.8 0 105.9 105.9 0 1 0-211.8 0ZM876 553.6l-8.2-4.8c-20-11.6-22.2-30.7-22.2-38.4 0-7.7 2.2-26.9 22.2-38.4l8.2-4.7c25.3-14.6 43.4-38.1 50.9-66.3 7.6-28.2 3.7-57.6-10.9-82.9l-35.3-61.2c-14.6-25.3-38.1-43.4-66.3-50.9-28.2-7.5-57.6-3.7-82.9 10.9l-8.2 4.7c-20 11.6-37.7 3.9-44.4 0s-22.2-15.3-22.2-38.4v-9.5c0-60.2-49-109.3-109.3-109.3h-70.6c-60.2 0-109.3 49-109.3 109.3v9.5c0 19.6-11.3 30.8-18 35.7-11.6 8.4-30.5 13.6-48.8 2.9l-8.8-5.2c-2.6-1.5-4.8-2.8-7.6-4.1-0.1 0-0.2-0.1-0.2-0.1-51.6-24-112.1-4.9-140.6 44.5L108 318c-14.6 25.3-18.5 54.7-10.9 82.9 7.6 28.2 25.6 51.7 50.9 66.3l8.2 4.8c20 11.6 22.2 30.7 22.2 38.4 0 7.7-2.2 26.9-22.2 38.4l-8.2 4.7c-25.3 14.6-43.4 38.1-50.9 66.3-7.6 28.2-3.7 57.6 10.9 82.9l35.3 61.2c14.6 25.3 38.1 43.4 66.3 50.9 28.2 7.5 57.6 3.7 82.9-10.9l8.2-4.7c20-11.6 37.7-3.9 44.4 0 6.7 3.9 22.2 15.3 22.2 38.4v9.5c0 60.2 49 109.3 109.3 109.3h70.6c60.2 0 109.3-49 109.3-109.3v-9.5c0-23.1 15.5-34.6 22.2-38.4 6.7-3.9 24.3-11.6 44.4 0l8.2 4.8c25.3 14.6 54.7 18.5 82.9 10.9 28.2-7.6 51.7-25.6 66.3-50.9l35.3-61.2c14.6-25.3 18.5-54.7 10.9-82.9-7.4-28.1-25.5-51.7-50.7-66.3zM512 687.8c-97.8 0-177.3-79.5-177.3-177.3S414.2 333.1 512 333.1s177.3 79.5 177.3 177.3S609.8 687.8 512 687.8z"></path>
|
||
</svg>
|
||
</a>
|
||
</nav>
|
||
</aside>
|
||
<aside class="sub-sidebar">
|
||
<ul>
|
||
<li>
|
||
<a href="wrap.html">容器</a>
|
||
<ul>
|
||
<li><a href="wrap.html#resize">全局缩放</a></li>
|
||
<li><a href="wrap.html#wrap-limit">尺寸限制</a></li>
|
||
<li><a href="wrap.html#wrap-padding">保留间距</a></li>
|
||
<li><a href="wrap.html#clearfix">清除浮动</a></li>
|
||
<li><a href="wrap.html#float">设置浮动</a></li>
|
||
<li><a href="wrap.html#align">文字对齐</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="elements.html">常用元素</a>
|
||
<ul>
|
||
<li><a href="elements.html#heading">标题</a></li>
|
||
<li><a href="elements.html#types">文字</a></li>
|
||
<li><a href="elements.html#images">图片</a></li>
|
||
<li><a href="elements.html#article">文章</a></li>
|
||
<li><a href="elements.html#buttons">按钮</a></li>
|
||
<li><a href="elements.html#tag">漂浮提示</a></li>
|
||
<li><a href="elements.html#codes">代码块</a></li>
|
||
<li><a href="elements.html#lists">项目列表</a></li>
|
||
<li><a href="elements.html#forms">表单</a></li>
|
||
<li><a href="elements.html#fieldset">表单小组</a></li>
|
||
<li><a href="elements.html#table">表格</a></li>
|
||
<li><a href="elements.html#media">多媒体</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="grid.html">栅格系统</a>
|
||
<ul>
|
||
<li><a href="grid.html#grids-size">栅格尺寸</a></li>
|
||
<li><a href="grid.html#grids-auto">自动栅格</a></li>
|
||
<li><a href="grid.html#grids-info">栅格类型</a></li>
|
||
<li><a href="grid.html#grids-padding">栅格间距</a></li>
|
||
<li><a href="grid.html#columns-align">对齐方式</a></li>
|
||
<li><a href="grid.html#columns-hide">栅格隐藏</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="animation.html">动画</a>
|
||
<ul>
|
||
<li><a href="animation.html#animate-fade">淡入淡出</a></li>
|
||
<li><a href="animation.html#animate-fade-scale">淡入缩放</a></li>
|
||
<li><a href="animation.html#animate-scale">缩放</a></li>
|
||
<li><a href="animation.html#animate-moving">平移</a></li>
|
||
<li><a href="animation.html#animate-rotate">旋转</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</aside>
|
||
<main class="content">
|
||
<div class="wrap min">
|
||
<div class="ks-title">
|
||
<h1>样式</h1>
|
||
<h2>Kico Style 的内置样式</h2>
|
||
</div>
|
||
<div class="ks-content">
|
||
<h1>栅格系统</h1>
|
||
<p>Kico Style 采用了类似 BootStrap 的 12 格布局，可用于手机，平板和台式机，并设置有三个尺寸的栅格系统。通过改变您的浏览器宽度，即可体验到不同类的效果 😉</p>
|
||
<p><del>建议在一行内不要使栅格超过总和 12，避免间距出现错误。</del>（在新版已经支持多行展示，但会通过清除底部 <code>margin</code> 的方式纠正间距，建议为此保留足够的空间）同时建议在一行内不要混用不同类型的 Column 列元素。</p>
|
||
<section>
|
||
<h2 id="grids-size">栅格尺寸：</h2>
|
||
<p>通过设置栅格尺寸，就可以快速构建一套多元化的响应式布局。</p>
|
||
<div class="demo-block grids-size-demo">
|
||
<div class="row s">
|
||
<div class="col-6">
|
||
<p>col-6</p>
|
||
</div>
|
||
<div class="col-6">
|
||
<p>col-6</p>
|
||
</div>
|
||
|
||
<div class="col-s-4">
|
||
<p>col-s-4</p>
|
||
</div>
|
||
<div class="col-s-4">
|
||
<p>col-s-4</p>
|
||
</div>
|
||
<div class="col-s-4">
|
||
<p>col-s-4</p>
|
||
</div>
|
||
|
||
<div class="col-m-3">
|
||
<p>.col-m-3</p>
|
||
</div>
|
||
<div class="col-m-3">
|
||
<p>.col-m-3</p>
|
||
</div>
|
||
<div class="col-m-3">
|
||
<p>.col-m-3</p>
|
||
</div>
|
||
<div class="col-m-3">
|
||
<p>.col-m-3</p>
|
||
</div>
|
||
|
||
<div class="col-l-6">
|
||
<p>col-l-6</p>
|
||
</div>
|
||
<div class="col-l-6">
|
||
<p>col-l-6</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<details class="code-block">
|
||
<summary>查看代码：</summary>
|
||
<pre class="language-html"><code data-fill-content></code></pre>
|
||
</details>
|
||
</section>
|
||
<section>
|
||
<h2 id="grids-auto">自动栅格</h2>
|
||
<p>通过设置自动栅格，可以构建五栏布局（需根据子元素内容来决定），或是填充单行其余剩下的空间。</p>
|
||
<div class="demo-block grids-auto-demo">
|
||
<div class="row s">
|
||
<div class="col-auto">
|
||
<p>col-auto</p>
|
||
</div>
|
||
<div class="col-auto">
|
||
<p>col-auto</p>
|
||
</div>
|
||
<div class="col-auto">
|
||
<p>col-auto</p>
|
||
</div>
|
||
<div class="col-auto">
|
||
<p>col-auto</p>
|
||
</div>
|
||
<div class="col-auto">
|
||
<p>col-auto</p>
|
||
</div>
|
||
|
||
<div class="col-3">
|
||
<p>col-3</p>
|
||
</div>
|
||
<div class="col-4">
|
||
<p>col-4</p>
|
||
</div>
|
||
<div class="col-auto">
|
||
<p>col-auto</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<details class="code-block">
|
||
<summary>查看代码：</summary>
|
||
<pre class="language-html"><code data-fill-content></code></pre>
|
||
</details>
|
||
</section>
|
||
<section>
|
||
<h2 id="grids-info">栅格类型：</h2>
|
||
<p>通过设置栅格类型，可以增强该栅格的响应式效果。</p>
|
||
<div class="ks-table">
|
||
<table style="min-width: 45em">
|
||
<colgroup align="right" style="width: 7em"></colgroup>
|
||
<colgroup align="right" style="width: 8em"></colgroup>
|
||
<colgroup align="right" style="width: 20em"></colgroup>
|
||
<thead>
|
||
<tr>
|
||
<th>适用环境</th>
|
||
<th>类名</th>
|
||
<th>行为</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>固定</td>
|
||
<td><code>.col-*</code></td>
|
||
<td>始终为横向摆放，死都不会改（叠加后面的类则作为小于 600px 的设置，不竖向摆放）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>手机</td>
|
||
<td><code>.col-s-*</code></td>
|
||
<td>大于 600px 的屏幕将更换为横向摆放</td>
|
||
</tr>
|
||
<tr>
|
||
<td>平板</td>
|
||
<td><code>.col-m-*</code></td>
|
||
<td>大于 900px 的屏幕将更换为横向摆放</td>
|
||
</tr>
|
||
<tr>
|
||
<td>台式机</td>
|
||
<td><code>.col-l-*</code></td>
|
||
<td>大于 1024px 的屏幕将更换为横向摆放</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
<section>
|
||
<h2 id="grids-padding">栅格间距：</h2>
|
||
<p>通过栅格间距，可以用更窄的方式设计较为传统的页面。在 <code>.row</code> 元素上设置即可。</p>
|
||
<div class="ks-table">
|
||
<table style="min-width: 40em">
|
||
<thead>
|
||
<tr>
|
||
<th>间距大小</th>
|
||
<th>类名</th>
|
||
<th>描述</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>0</td>
|
||
<td><code>.full</code></td>
|
||
<td>没有间距</td>
|
||
</tr>
|
||
<tr>
|
||
<td>1em</td>
|
||
<td><code>.s</code></td>
|
||
<td>较窄的间距</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2em</td>
|
||
<td>无需添加</td>
|
||
<td>默认间距</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2.5em</td>
|
||
<td><code>.m</code></td>
|
||
<td>较宽间距</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3em</td>
|
||
<td><code>.l</code></td>
|
||
<td>宽间距</td>
|
||
</tr>
|
||
<tr>
|
||
<td>1em/2em</td>
|
||
<td><code>auto</code></td>
|
||
<td>自适应间距 <em>新/推荐</em></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="demo-block grids-padding-demo">
|
||
<div class="row auto">
|
||
<div class="col-6">
|
||
<p>自动间距的栅格</p>
|
||
</div>
|
||
<div class="col-6">
|
||
<p>手机上变窄</p>
|
||
</div>
|
||
<div class="col-6">
|
||
<p>电脑上默认宽</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<details class="code-block">
|
||
<summary>查看代码：</summary>
|
||
<pre class="language-html"><code data-fill-content></code></pre>
|
||
</details>
|
||
</section>
|
||
<section>
|
||
<h2 id="columns-align">对齐方式：</h2>
|
||
<p>通过设置对齐方式，可以实现一些用 <code>Float</code> 浮动方案较难解决的垂直居中对齐方式。</p>
|
||
<div class="ks-table">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>对齐方式</th>
|
||
<th>类名</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>左上</td>
|
||
<td>不添加任何类</td>
|
||
</tr>
|
||
<tr>
|
||
<td>右上</td>
|
||
<td><code>right</code> 或 <code>right top</code></td>
|
||
</tr>
|
||
<tr>
|
||
<td>左下</td>
|
||
<td><code>bottom</code> 或 <code>left bottom</code></td>
|
||
</tr>
|
||
<tr>
|
||
<td>右下</td>
|
||
<td><code>right bottom</code></td>
|
||
</tr>
|
||
<tr>
|
||
<td>全局居中</td>
|
||
<td><code>center</code></td>
|
||
</tr>
|
||
<tr>
|
||
<td>左居中</td>
|
||
<td><code>left center</code></td>
|
||
</tr>
|
||
<tr>
|
||
<td>右居中</td>
|
||
<td><code>right center</code></td>
|
||
</tr>
|
||
<tr>
|
||
<td>上居中</td>
|
||
<td><code>top center</code></td>
|
||
</tr>
|
||
<tr>
|
||
<td>下居中</td>
|
||
<td><code>bottom center</code></td>
|
||
</tr>
|
||
<tr>
|
||
<td>左下</td>
|
||
<td><code>bottom</code> 或 <code>left bottom</code></td>
|
||
</tr>
|
||
<tr>
|
||
<td>右下</td>
|
||
<td><code>right bottom</code></td>
|
||
</tr>
|
||
<tr>
|
||
<td>电脑为左，手机为横向居中</td>
|
||
<td><code>to-center</code> 或 <code>left to-center</code></td>
|
||
</tr>
|
||
<tr>
|
||
<td>电脑为右，手机为横向居中</td>
|
||
<td><code>right to-center</code></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
<section>
|
||
<h2 id="columns-hide">栅格隐藏：</h2>
|
||
<p>通过设置栅格隐藏扩展类 <code>hide-s</code>，<code>hide-m</code>，<code>hide-l</code> 就可以在对应宽度时隐藏该栅格。</p>
|
||
<div class="demo-block columns-hide-demo">
|
||
<div class="row s">
|
||
<div class="col-s-4 hide-s">
|
||
<p>在小于 600px 时隐藏</p>
|
||
</div>
|
||
<div class="col-m-4 hide-m">
|
||
<p>在小于 900px 时隐藏</p>
|
||
</div>
|
||
<div class="col-l-4 hide-l">
|
||
<p>在小于 1024px 时隐藏</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<details class="code-block">
|
||
<summary>查看代码：</summary>
|
||
<pre class="language-html"><code><div class="row s">
|
||
<div class="col-s-4 hide-s">
|
||
<p>在小于 600px 时隐藏</p>
|
||
</div>
|
||
<div class="col-m-4 hide-m">
|
||
<p>在小于 900px 时隐藏</p>
|
||
</div>
|
||
<div class="col-l-4 hide-l">
|
||
<p>在小于 1024px 时隐藏</p>
|
||
</div>
|
||
</div></code></pre>
|
||
</details>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
<footer>
|
||
<a class="to-top" href="#"></a>
|
||
<p>© 2023 By <a href="https://paugram.com" target="_blank">Dreamer-Paul</a>.</p>
|
||
</footer>
|
||
|
||
<script src="static/kico.js"></script>
|
||
<script src="static/doc.js?v=22.12.25"></script>
|
||
<script src="https://cdn.jsdelivr.net/gh/Dreamer-Paul/Single@2.1/static/prism.js"></script>
|
||
</body>
|
||
</html>
|