forked from p96170835/amis
83 lines
87 KiB
JavaScript
83 lines
87 KiB
JavaScript
amis.define('docs/style.md', function(require, exports, module, define) {
|
||
|
||
module.exports = {
|
||
"title": "定制样式",
|
||
"shortname": "style",
|
||
"html": "<p>绝大部分 amis 组件里都有个 <code>className</code> 配置项，设置后就会给对应的组件添加 css class，而 amis 内置了大量的功能类 class，通过这些 class 的组合就能满足大部分展现调整的需求。</p>\n<h2><a class=\"anchor\" name=\"%E5%9B%BE%E6%A0%87\" href=\"#%E5%9B%BE%E6%A0%87\" aria-hidden=\"true\"><svg aria-hidden=\"true\" class=\"octicon octicon-link\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>图标</h2><p>amis 集成了 <a href=\"http://fontawesome.io/icons/\">fontawesome</a>，所以关于图标部分，请前往 <a href=\"http://fontawesome.io/icons/\">fontawesome</a> 查看。</p>\n<h2><a class=\"anchor\" name=\"%E5%B8%83%E5%B1%80\" href=\"#%E5%B8%83%E5%B1%80\" aria-hidden=\"true\"><svg aria-hidden=\"true\" class=\"octicon octicon-link\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>布局</h2><p>水平布局可以考虑用 Bootstrap 的 <a href=\"http://getbootstrap.com/css/#grid\">Grids</a> 或者用 <code>hobx</code> 加 <code>col</code></p>\n<div class=\"amis-doc\"><div class=\"preview\"><div class=\"hbox b-a\">\n <div class=\"col wrapper-sm bg-success\">Col A</div>\n <div class=\"col wrapper-sm bg-info\">Col B</div>\n <div class=\"col wrapper-sm bg-danger\">Col C</div>\n</div>\n</div><pre><code class=\"lang-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>hbox b-a<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>col wrapper-sm bg-success<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>Col A<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>col wrapper-sm bg-info<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>Col B<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>col wrapper-sm bg-danger<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>Col C<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n</code></pre></div>\n<h2><a class=\"anchor\" name=\"%E5%AE%BD%E9%AB%98\" href=\"#%E5%AE%BD%E9%AB%98\" aria-hidden=\"true\"><svg aria-hidden=\"true\" class=\"octicon octicon-link\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>宽高</h2><pre><code class=\"lang-css\"><span class=\"token selector\">.w-1x</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">width</span><span class=\"token punctuation\">:</span> 1em<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.w-2x</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">width</span><span class=\"token punctuation\">:</span> 2em<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.w-3x</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">width</span><span class=\"token punctuation\">:</span> 3em<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.w-xxs</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">width</span><span class=\"token punctuation\">:</span> 60px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.w-xs</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">width</span><span class=\"token punctuation\">:</span> 90px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.w-sm</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">width</span><span class=\"token punctuation\">:</span> 150px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.w</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">width</span><span class=\"token punctuation\">:</span> 200px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.w-md</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">width</span><span class=\"token punctuation\">:</span> 240px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.w-lg</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">width</span><span class=\"token punctuation\">:</span> 280px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.w-xl</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">width</span><span class=\"token punctuation\">:</span> 320px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.w-xxl</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">width</span><span class=\"token punctuation\">:</span> 360px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.w-full</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">width</span><span class=\"token punctuation\">:</span> 100%<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.w-auto</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">width</span><span class=\"token punctuation\">:</span> auto<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.h-auto</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">height</span><span class=\"token punctuation\">:</span> auto<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.h-full</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">height</span><span class=\"token punctuation\">:</span> 100% <span class=\"token important\">!important</span><span class=\"token punctuation\">;</span>\n <span class=\"token property\">max-height</span><span class=\"token punctuation\">:</span> none <span class=\"token important\">!important</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n</code></pre>\n<div class=\"amis-doc\"><div class=\"preview\"><div class=\"hbox b-a bg-primary\">\n <div class=\"col wrapper-sm b-r w-1x\">w-1x</div>\n <div class=\"col wrapper-sm b-r w-2x\">w-2x</div>\n <div class=\"col wrapper-sm b-r w-3x\">w-3x</div>\n <div class=\"col wrapper-sm b-r w-xxs\">w-xxs</div>\n <div class=\"col wrapper-sm b-r w-xs\">w-xs</div>\n <div class=\"col wrapper-sm b-r w-sm\">w-sm</div>\n <div class=\"col wrapper-sm b-r w\">w</div>\n <div class=\"col wrapper-sm lter\">...</div>\n</div>\n<div class=\"hbox b-a bg-primary m-t\">\n <div class=\"col wrapper-sm b-r w-md\">w-md</div>\n <div class=\"col wrapper-sm b-r w-lg\">w-lg</div>\n <div class=\"col wrapper-sm b-r w-xl\">w-xl</div>\n <div class=\"col wrapper-sm lter\">...</div>\n</div>\n<div class=\"hbox b-a bg-primary m-t\">\n <div class=\"col wrapper-sm b-r w-xxl\">w-xxl</div>\n <div class=\"col wrapper-sm lter\">...</div>\n</div>\n</div><pre><code class=\"lang-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>hbox b-a bg-primary<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>col wrapper-sm b-r w-1x<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>w-1x<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>col wrapper-sm b-r w-2x<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>w-2x<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>col wrapper-sm b-r w-3x<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>w-3x<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>col wrapper-sm b-r w-xxs<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>w-xxs<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>col wrapper-sm b-r w-xs<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>w-xs<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>col wrapper-sm b-r w-sm<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>w-sm<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>col wrapper-sm b-r w<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>w<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>col wrapper-sm lter<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>...<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>hbox b-a bg-primary m-t<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>col wrapper-sm b-r w-md<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>w-md<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>col wrapper-sm b-r w-lg<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>w-lg<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>col wrapper-sm b-r w-xl<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>w-xl<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>col wrapper-sm lter<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>...<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>hbox b-a bg-primary m-t<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>col wrapper-sm b-r w-xxl<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>w-xxl<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>col wrapper-sm lter<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>...<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n</code></pre></div>\n<h2><a class=\"anchor\" name=\"%E5%A4%96%E8%BE%B9%E8%B7%9D\" href=\"#%E5%A4%96%E8%BE%B9%E8%B7%9D\" aria-hidden=\"true\"><svg aria-hidden=\"true\" class=\"octicon octicon-link\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>外边距</h2><pre><code class=\"lang-css\"><span class=\"token selector\">.m-xxs</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin</span><span class=\"token punctuation\">:</span> 2px 4px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-xs</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin</span><span class=\"token punctuation\">:</span> 5px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-sm</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin</span><span class=\"token punctuation\">:</span> 10px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin</span><span class=\"token punctuation\">:</span> 15px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-md</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin</span><span class=\"token punctuation\">:</span> 20px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-lg</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin</span><span class=\"token punctuation\">:</span> 30px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-xl</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin</span><span class=\"token punctuation\">:</span> 50px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-n</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin</span><span class=\"token punctuation\">:</span> 0 <span class=\"token important\">!important</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-l-none</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-left</span><span class=\"token punctuation\">:</span> 0 <span class=\"token important\">!important</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-l-xs</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-left</span><span class=\"token punctuation\">:</span> 5px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-l-sm</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-left</span><span class=\"token punctuation\">:</span> 10px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-l</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-left</span><span class=\"token punctuation\">:</span> 15px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-l-md</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-left</span><span class=\"token punctuation\">:</span> 20px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-l-lg</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-left</span><span class=\"token punctuation\">:</span> 30px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-l-xl</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-left</span><span class=\"token punctuation\">:</span> 40px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-l-xxl</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-left</span><span class=\"token punctuation\">:</span> 50px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-l-n-xxs</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-left</span><span class=\"token punctuation\">:</span> -1px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-l-n-xs</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-left</span><span class=\"token punctuation\">:</span> -5px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-l-n-sm</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-left</span><span class=\"token punctuation\">:</span> -10px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-l-n</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-left</span><span class=\"token punctuation\">:</span> -15px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-l-n-md</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-left</span><span class=\"token punctuation\">:</span> -20px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-l-n-lg</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-left</span><span class=\"token punctuation\">:</span> -30px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-l-n-xl</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-left</span><span class=\"token punctuation\">:</span> -40px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-l-n-xxl</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-left</span><span class=\"token punctuation\">:</span> -50px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-t-none</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-top</span><span class=\"token punctuation\">:</span> 0 <span class=\"token important\">!important</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-t-xxs</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-top</span><span class=\"token punctuation\">:</span> 1px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-t-xs</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-top</span><span class=\"token punctuation\">:</span> 5px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-t-sm</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-top</span><span class=\"token punctuation\">:</span> 10px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-t</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-top</span><span class=\"token punctuation\">:</span> 15px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-t-md</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-top</span><span class=\"token punctuation\">:</span> 20px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-t-lg</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-top</span><span class=\"token punctuation\">:</span> 30px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-t-xl</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-top</span><span class=\"token punctuation\">:</span> 40px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-t-xxl</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-top</span><span class=\"token punctuation\">:</span> 50px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-t-n-xxs</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-top</span><span class=\"token punctuation\">:</span> -1px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-t-n-xs</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-top</span><span class=\"token punctuation\">:</span> -5px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-t-n-sm</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-top</span><span class=\"token punctuation\">:</span> -10px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-t-n</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-top</span><span class=\"token punctuation\">:</span> -15px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-t-n-md</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-top</span><span class=\"token punctuation\">:</span> -20px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-t-n-lg</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-top</span><span class=\"token punctuation\">:</span> -30px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-t-n-xl</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-top</span><span class=\"token punctuation\">:</span> -40px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-t-n-xxl</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-top</span><span class=\"token punctuation\">:</span> -50px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-r-none</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-right</span><span class=\"token punctuation\">:</span> 0 <span class=\"token important\">!important</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-r-xxs</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-right</span><span class=\"token punctuation\">:</span> 1px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-r-xs</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-right</span><span class=\"token punctuation\">:</span> 5px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-r-sm</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-right</span><span class=\"token punctuation\">:</span> 10px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-r</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-right</span><span class=\"token punctuation\">:</span> 15px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-r-md</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-right</span><span class=\"token punctuation\">:</span> 20px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-r-lg</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-right</span><span class=\"token punctuation\">:</span> 30px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-r-xl</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-right</span><span class=\"token punctuation\">:</span> 40px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-r-xxl</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-right</span><span class=\"token punctuation\">:</span> 50px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-r-n-xxs</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-right</span><span class=\"token punctuation\">:</span> -1px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-r-n-xs</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-right</span><span class=\"token punctuation\">:</span> -5px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-r-n-sm</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-right</span><span class=\"token punctuation\">:</span> -10px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-r-n</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-right</span><span class=\"token punctuation\">:</span> -15px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-r-n-md</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-right</span><span class=\"token punctuation\">:</span> -20px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-r-n-lg</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-right</span><span class=\"token punctuation\">:</span> -30px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-r-n-xl</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-right</span><span class=\"token punctuation\">:</span> -40px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-r-n-xxl</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-right</span><span class=\"token punctuation\">:</span> -50px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-b-none</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-bottom</span><span class=\"token punctuation\">:</span> 0 <span class=\"token important\">!important</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-b-xxs</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-bottom</span><span class=\"token punctuation\">:</span> 1px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-b-xs</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-bottom</span><span class=\"token punctuation\">:</span> 5px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-b-sm</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-bottom</span><span class=\"token punctuation\">:</span> 10px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-b</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-bottom</span><span class=\"token punctuation\">:</span> 15px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-b-md</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-bottom</span><span class=\"token punctuation\">:</span> 20px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-b-lg</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-bottom</span><span class=\"token punctuation\">:</span> 30px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-b-xl</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-bottom</span><span class=\"token punctuation\">:</span> 40px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-b-xxl</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-bottom</span><span class=\"token punctuation\">:</span> 50px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-b-n-xxs</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-bottom</span><span class=\"token punctuation\">:</span> -1px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-b-n-xs</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-bottom</span><span class=\"token punctuation\">:</span> -5px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-b-n-sm</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-bottom</span><span class=\"token punctuation\">:</span> -10px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-b-n</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-bottom</span><span class=\"token punctuation\">:</span> -15px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-b-n-md</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-bottom</span><span class=\"token punctuation\">:</span> -20px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-b-n-lg</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-bottom</span><span class=\"token punctuation\">:</span> -30px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-b-n-xl</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-bottom</span><span class=\"token punctuation\">:</span> -40px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.m-b-n-xxl</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-bottom</span><span class=\"token punctuation\">:</span> -50px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n</code></pre>\n<h2><a class=\"anchor\" name=\"%E5%86%85%E8%BE%B9%E8%B7%9D\" href=\"#%E5%86%85%E8%BE%B9%E8%B7%9D\" aria-hidden=\"true\"><svg aria-hidden=\"true\" class=\"octicon octicon-link\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>内边距</h2><pre><code class=\"lang-css\"><span class=\"token selector\">.wrapper-xs</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">padding</span><span class=\"token punctuation\">:</span> 5px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.wrapper-sm</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">padding</span><span class=\"token punctuation\">:</span> 10px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.wrapper</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">padding</span><span class=\"token punctuation\">:</span> 15px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.wrapper-md</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">padding</span><span class=\"token punctuation\">:</span> 20px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.wrapper-lg</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">padding</span><span class=\"token punctuation\">:</span> 30px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.wrapper-xl</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">padding</span><span class=\"token punctuation\">:</span> 50px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.padder-xs</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">padding-left</span><span class=\"token punctuation\">:</span> 5px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">padding-right</span><span class=\"token punctuation\">:</span> 5px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.padder-sm</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">padding-left</span><span class=\"token punctuation\">:</span> 10px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">padding-right</span><span class=\"token punctuation\">:</span> 10px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.padder-lg</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">padding-left</span><span class=\"token punctuation\">:</span> 30px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">padding-right</span><span class=\"token punctuation\">:</span> 30px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.padder-md</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">padding-left</span><span class=\"token punctuation\">:</span> 20px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">padding-right</span><span class=\"token punctuation\">:</span> 20px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.padder</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">padding-left</span><span class=\"token punctuation\">:</span> 15px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">padding-right</span><span class=\"token punctuation\">:</span> 15px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.padder-v-xs</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">padding-top</span><span class=\"token punctuation\">:</span> 5px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">padding-bottom</span><span class=\"token punctuation\">:</span> 5px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.padder-v-sm</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">padding-top</span><span class=\"token punctuation\">:</span> 10px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">padding-bottom</span><span class=\"token punctuation\">:</span> 10px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.padder-v-lg</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">padding-top</span><span class=\"token punctuation\">:</span> 30px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">padding-bottom</span><span class=\"token punctuation\">:</span> 30px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.padder-v-md</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">padding-top</span><span class=\"token punctuation\">:</span> 20px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">padding-bottom</span><span class=\"token punctuation\">:</span> 20px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.padder-v</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">padding-top</span><span class=\"token punctuation\">:</span> 15px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">padding-bottom</span><span class=\"token punctuation\">:</span> 15px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.no-padder</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">padding</span><span class=\"token punctuation\">:</span> 0 <span class=\"token important\">!important</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.pull-in</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-left</span><span class=\"token punctuation\">:</span> -15px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">margin-right</span><span class=\"token punctuation\">:</span> -15px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.pull-out</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin</span><span class=\"token punctuation\">:</span> -10px -15px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n</code></pre>\n<h2><a class=\"anchor\" name=\"%E8%BE%B9%E6%A1%86\" href=\"#%E8%BE%B9%E6%A1%86\" aria-hidden=\"true\"><svg aria-hidden=\"true\" class=\"octicon octicon-link\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>边框</h2><pre><code class=\"lang-css\"><span class=\"token selector\">.b</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border</span><span class=\"token punctuation\">:</span> 1px solid <span class=\"token function\">rgba</span><span class=\"token punctuation\">(</span>0<span class=\"token punctuation\">,</span> 0<span class=\"token punctuation\">,</span> 0<span class=\"token punctuation\">,</span> 0.05<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.b-a</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border</span><span class=\"token punctuation\">:</span> 1px solid <span class=\"token atrule\"><span class=\"token rule\">@border-color</span><span class=\"token punctuation\">;</span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.b-t</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-top</span><span class=\"token punctuation\">:</span> 1px solid <span class=\"token atrule\"><span class=\"token rule\">@border-color</span><span class=\"token punctuation\">;</span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.b-r</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-right</span><span class=\"token punctuation\">:</span> 1px solid <span class=\"token atrule\"><span class=\"token rule\">@border-color</span><span class=\"token punctuation\">;</span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.b-b</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-bottom</span><span class=\"token punctuation\">:</span> 1px solid <span class=\"token atrule\"><span class=\"token rule\">@border-color</span><span class=\"token punctuation\">;</span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.b-l</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-left</span><span class=\"token punctuation\">:</span> 1px solid <span class=\"token atrule\"><span class=\"token rule\">@border-color</span><span class=\"token punctuation\">;</span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.b-light</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-color</span><span class=\"token punctuation\">:</span> <span class=\"token atrule\"><span class=\"token rule\">@brand-light</span><span class=\"token punctuation\">;</span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.b-dark</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-color</span><span class=\"token punctuation\">:</span> <span class=\"token atrule\"><span class=\"token rule\">@brand-dark</span><span class=\"token punctuation\">;</span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.b-black</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-color</span><span class=\"token punctuation\">:</span> <span class=\"token atrule\"><span class=\"token rule\">@brand-dark</span><span class=\"token punctuation\">;</span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.b-primary</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-color</span><span class=\"token punctuation\">:</span> <span class=\"token atrule\"><span class=\"token rule\">@brand-primary</span><span class=\"token punctuation\">;</span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.b-success</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-color</span><span class=\"token punctuation\">:</span> <span class=\"token atrule\"><span class=\"token rule\">@brand-success</span><span class=\"token punctuation\">;</span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.b-info</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-color</span><span class=\"token punctuation\">:</span> <span class=\"token atrule\"><span class=\"token rule\">@brand-info</span><span class=\"token punctuation\">;</span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.b-warning</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-color</span><span class=\"token punctuation\">:</span> <span class=\"token atrule\"><span class=\"token rule\">@brand-warning</span><span class=\"token punctuation\">;</span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.b-danger</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-color</span><span class=\"token punctuation\">:</span> <span class=\"token atrule\"><span class=\"token rule\">@brand-danger</span><span class=\"token punctuation\">;</span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.b-white</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-color</span><span class=\"token punctuation\">:</span> #fff<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.b-dashed</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-style</span><span class=\"token punctuation\">:</span> dashed <span class=\"token important\">!important</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.b-l-light</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-left-color</span><span class=\"token punctuation\">:</span> <span class=\"token atrule\"><span class=\"token rule\">@brand-light</span><span class=\"token punctuation\">;</span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.b-l-dark</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-left-color</span><span class=\"token punctuation\">:</span> <span class=\"token atrule\"><span class=\"token rule\">@brand-dark</span><span class=\"token punctuation\">;</span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.b-l-black</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-left-color</span><span class=\"token punctuation\">:</span> <span class=\"token atrule\"><span class=\"token rule\">@brand-dark</span><span class=\"token punctuation\">;</span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.b-l-primary</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-left-color</span><span class=\"token punctuation\">:</span> <span class=\"token atrule\"><span class=\"token rule\">@brand-primary</span><span class=\"token punctuation\">;</span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.b-l-success</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-left-color</span><span class=\"token punctuation\">:</span> <span class=\"token atrule\"><span class=\"token rule\">@brand-success</span><span class=\"token punctuation\">;</span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.b-l-info</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-left-color</span><span class=\"token punctuation\">:</span> <span class=\"token atrule\"><span class=\"token rule\">@brand-info</span><span class=\"token punctuation\">;</span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.b-l-warning</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-left-color</span><span class=\"token punctuation\">:</span> <span class=\"token atrule\"><span class=\"token rule\">@brand-warning</span><span class=\"token punctuation\">;</span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.b-l-danger</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-left-color</span><span class=\"token punctuation\">:</span> <span class=\"token atrule\"><span class=\"token rule\">@brand-danger</span><span class=\"token punctuation\">;</span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.b-l-white</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-left-color</span><span class=\"token punctuation\">:</span> #fff<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.b-l-2x</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-left-width</span><span class=\"token punctuation\">:</span> 2px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.b-l-3x</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-left-width</span><span class=\"token punctuation\">:</span> 3px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.b-l-4x</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-left-width</span><span class=\"token punctuation\">:</span> 4px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.b-l-5x</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-left-width</span><span class=\"token punctuation\">:</span> 5px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.b-2x</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-width</span><span class=\"token punctuation\">:</span> 2px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.b-3x</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-width</span><span class=\"token punctuation\">:</span> 3px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.b-4x</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-width</span><span class=\"token punctuation\">:</span> 4px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.b-5x</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-width</span><span class=\"token punctuation\">:</span> 5px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n</code></pre>\n<h2><a class=\"anchor\" name=\"%E5%9C%86%E8%A7%92\" href=\"#%E5%9C%86%E8%A7%92\" aria-hidden=\"true\"><svg aria-hidden=\"true\" class=\"octicon octicon-link\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>圆角</h2><pre><code class=\"lang-css\"><span class=\"token selector\">.r</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-radius</span><span class=\"token punctuation\">:</span> <span class=\"token atrule\"><span class=\"token rule\">@border-radius-base</span> <span class=\"token atrule\"><span class=\"token rule\">@border-radius-base</span> <span class=\"token atrule\"><span class=\"token rule\">@border-radius-base</span>\n <span class=\"token atrule\"><span class=\"token rule\">@border-radius-base</span><span class=\"token punctuation\">;</span></span></span></span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.r-2x</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-radius</span><span class=\"token punctuation\">:</span> <span class=\"token atrule\"><span class=\"token rule\">@border-radius-base</span> * 2<span class=\"token punctuation\">;</span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.r-3x</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-radius</span><span class=\"token punctuation\">:</span> <span class=\"token atrule\"><span class=\"token rule\">@border-radius-base</span> * 3<span class=\"token punctuation\">;</span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.r-l</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-radius</span><span class=\"token punctuation\">:</span> <span class=\"token atrule\"><span class=\"token rule\">@border-radius-base</span> 0 0 <span class=\"token atrule\"><span class=\"token rule\">@border-radius-base</span><span class=\"token punctuation\">;</span></span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.r-r</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-radius</span><span class=\"token punctuation\">:</span> 0 <span class=\"token atrule\"><span class=\"token rule\">@border-radius-base</span> <span class=\"token atrule\"><span class=\"token rule\">@border-radius-base</span> 0<span class=\"token punctuation\">;</span></span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.r-t</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-radius</span><span class=\"token punctuation\">:</span> <span class=\"token atrule\"><span class=\"token rule\">@border-radius-base</span> <span class=\"token atrule\"><span class=\"token rule\">@border-radius-base</span> 0 0<span class=\"token punctuation\">;</span></span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.r-b</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-radius</span><span class=\"token punctuation\">:</span> 0 0 <span class=\"token atrule\"><span class=\"token rule\">@border-radius-base</span> <span class=\"token atrule\"><span class=\"token rule\">@border-radius-base</span><span class=\"token punctuation\">;</span></span></span>\n<span class=\"token punctuation\">}</span>\n</code></pre>\n<h2><a class=\"anchor\" name=\"%E5%AD%97%E4%BD%93%E7%9B%B8%E5%85%B3\" href=\"#%E5%AD%97%E4%BD%93%E7%9B%B8%E5%85%B3\" aria-hidden=\"true\"><svg aria-hidden=\"true\" class=\"octicon octicon-link\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>字体相关</h2><pre><code class=\"lang-css\"><span class=\"token selector\">.font-normal</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">font-weight</span><span class=\"token punctuation\">:</span> normal<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.font-thin</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">font-weight</span><span class=\"token punctuation\">:</span> 300<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.font-bold</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">font-weight</span><span class=\"token punctuation\">:</span> 700<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.text-3x</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">font-size</span><span class=\"token punctuation\">:</span> 3em<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.text-2x</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">font-size</span><span class=\"token punctuation\">:</span> 2em<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.text-lg</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">font-size</span><span class=\"token punctuation\">:</span> <span class=\"token atrule\"><span class=\"token rule\">@font-size-lg</span><span class=\"token punctuation\">;</span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.text-md</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">font-size</span><span class=\"token punctuation\">:</span> <span class=\"token atrule\"><span class=\"token rule\">@font-size-md</span><span class=\"token punctuation\">;</span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.text-base</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">font-size</span><span class=\"token punctuation\">:</span> <span class=\"token atrule\"><span class=\"token rule\">@font-size-base</span><span class=\"token punctuation\">;</span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.text-sm</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">font-size</span><span class=\"token punctuation\">:</span> <span class=\"token atrule\"><span class=\"token rule\">@font-size-sm</span><span class=\"token punctuation\">;</span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.text-xs</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">font-size</span><span class=\"token punctuation\">:</span> <span class=\"token atrule\"><span class=\"token rule\">@font-size-xs</span><span class=\"token punctuation\">;</span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.text-xxs</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">text-indent</span><span class=\"token punctuation\">:</span> -9999px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.text-ellipsis</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">display</span><span class=\"token punctuation\">:</span> block<span class=\"token punctuation\">;</span>\n <span class=\"token property\">white-space</span><span class=\"token punctuation\">:</span> nowrap<span class=\"token punctuation\">;</span>\n <span class=\"token property\">overflow</span><span class=\"token punctuation\">:</span> hidden<span class=\"token punctuation\">;</span>\n <span class=\"token property\">text-overflow</span><span class=\"token punctuation\">:</span> ellipsis<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.text-u-c</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">text-transform</span><span class=\"token punctuation\">:</span> uppercase<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.text-l-t</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">text-decoration</span><span class=\"token punctuation\">:</span> line-through<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.text-u-l</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">text-decoration</span><span class=\"token punctuation\">:</span> underline<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.text-left</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">text-align</span><span class=\"token punctuation\">:</span> left<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.text-center</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">text-align</span><span class=\"token punctuation\">:</span> center<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.text-right</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">text-align</span><span class=\"token punctuation\">:</span> right<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n</code></pre>\n<h2><a class=\"anchor\" name=\"%E5%AE%9A%E4%BD%8D\" href=\"#%E5%AE%9A%E4%BD%8D\" aria-hidden=\"true\"><svg aria-hidden=\"true\" class=\"octicon octicon-link\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>定位</h2><pre><code class=\"lang-css\"><span class=\"token selector\">.pos-rlt</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">position</span><span class=\"token punctuation\">:</span> relative<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.pos-stc</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">position</span><span class=\"token punctuation\">:</span> static <span class=\"token important\">!important</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.pos-abt</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">position</span><span class=\"token punctuation\">:</span> absolute<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.pos-fix</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">position</span><span class=\"token punctuation\">:</span> fixed<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n</code></pre>\n<h2><a class=\"anchor\" name=\"%E8%83%8C%E6%99%AF\" href=\"#%E8%83%8C%E6%99%AF\" aria-hidden=\"true\"><svg aria-hidden=\"true\" class=\"octicon octicon-link\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>背景</h2><div class=\"amis-doc\"><div class=\"preview\"><div class=\"hbox b-a bg-light\">\n <div class=\"col wrapper-sm b-r bg-white\">bg-white</div>\n <div class=\"col wrapper-sm b-r bg-dark\">bg-dark</div>\n <div class=\"col wrapper-sm b-r bg-info\">bg-info</div>\n <div class=\"col wrapper-sm b-r bg-success\">bg-success</div>\n <div class=\"col wrapper-sm b-r bg-warning\">bg-warning</div>\n <div class=\"col wrapper-sm b-r bg-danger\">bg-danger</div>\n <div class=\"col wrapper-sm bg-primary\">bg-primary</div>\n</div>\n</div><pre><code class=\"lang-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>hbox b-a bg-light<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>col wrapper-sm b-r bg-white<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>bg-white<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>col wrapper-sm b-r bg-dark<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>bg-dark<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>col wrapper-sm b-r bg-info<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>bg-info<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>col wrapper-sm b-r bg-success<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>bg-success<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>col wrapper-sm b-r bg-warning<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>bg-warning<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>col wrapper-sm b-r bg-danger<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>bg-danger<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>col wrapper-sm bg-primary<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>bg-primary<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n</code></pre></div>\n<h2><a class=\"anchor\" name=\"%E5%85%B6%E4%BB%96\" href=\"#%E5%85%B6%E4%BB%96\" aria-hidden=\"true\"><svg aria-hidden=\"true\" class=\"octicon octicon-link\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>其他</h2><pre><code class=\"lang-css\"><span class=\"token selector\">.show</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">visibility</span><span class=\"token punctuation\">:</span> visible<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.line</span> <span class=\"token punctuation\">{</span>\n *<span class=\"token property\">width</span><span class=\"token punctuation\">:</span> 100%<span class=\"token punctuation\">;</span>\n <span class=\"token property\">height</span><span class=\"token punctuation\">:</span> 2px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">margin</span><span class=\"token punctuation\">:</span> 10px 0<span class=\"token punctuation\">;</span>\n <span class=\"token property\">font-size</span><span class=\"token punctuation\">:</span> 0<span class=\"token punctuation\">;</span>\n <span class=\"token property\">overflow</span><span class=\"token punctuation\">:</span> hidden<span class=\"token punctuation\">;</span>\n <span class=\"token property\">background-color</span><span class=\"token punctuation\">:</span> transparent<span class=\"token punctuation\">;</span>\n <span class=\"token property\">border-width</span><span class=\"token punctuation\">:</span> 0<span class=\"token punctuation\">;</span>\n <span class=\"token property\">border-top</span><span class=\"token punctuation\">:</span> 1px solid <span class=\"token atrule\"><span class=\"token rule\">@border-color</span><span class=\"token punctuation\">;</span></span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.line-xs</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin</span><span class=\"token punctuation\">:</span> 0<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.line-lg</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-top</span><span class=\"token punctuation\">:</span> 15px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">margin-bottom</span><span class=\"token punctuation\">:</span> 15px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.line-dashed</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-style</span><span class=\"token punctuation\">:</span> dashed<span class=\"token punctuation\">;</span>\n <span class=\"token property\">background</span><span class=\"token punctuation\">:</span> transparent<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.no-line</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-width</span><span class=\"token punctuation\">:</span> 0<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.no-border,\n.no-borders</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-color</span><span class=\"token punctuation\">:</span> transparent<span class=\"token punctuation\">;</span>\n <span class=\"token property\">border-width</span><span class=\"token punctuation\">:</span> 0<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.no-radius</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-radius</span><span class=\"token punctuation\">:</span> 0<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.block</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">display</span><span class=\"token punctuation\">:</span> block<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.block.hide</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">display</span><span class=\"token punctuation\">:</span> none<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.inline</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">display</span><span class=\"token punctuation\">:</span> inline-block <span class=\"token important\">!important</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.none</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">display</span><span class=\"token punctuation\">:</span> none<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.pull-none</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">float</span><span class=\"token punctuation\">:</span> none<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.rounded</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border-radius</span><span class=\"token punctuation\">:</span> 500px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.clear</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">display</span><span class=\"token punctuation\">:</span> block<span class=\"token punctuation\">;</span>\n <span class=\"token property\">overflow</span><span class=\"token punctuation\">:</span> hidden<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.no-bg</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">background-color</span><span class=\"token punctuation\">:</span> transparent<span class=\"token punctuation\">;</span>\n <span class=\"token property\">color</span><span class=\"token punctuation\">:</span> inherit<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\">.no-select</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">-webkit-touch-callout</span><span class=\"token punctuation\">:</span> none<span class=\"token punctuation\">;</span>\n <span class=\"token property\">-webkit-user-select</span><span class=\"token punctuation\">:</span> none<span class=\"token punctuation\">;</span>\n <span class=\"token property\">-khtml-user-select</span><span class=\"token punctuation\">:</span> none<span class=\"token punctuation\">;</span>\n <span class=\"token property\">-moz-user-select</span><span class=\"token punctuation\">:</span> none<span class=\"token punctuation\">;</span>\n <span class=\"token property\">-ms-user-select</span><span class=\"token punctuation\">:</span> none<span class=\"token punctuation\">;</span>\n <span class=\"token property\">user-select</span><span class=\"token punctuation\">:</span> none<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n</code></pre>\n\n\n<div class=\"m-t-lg b-l b-info b-3x wrapper bg-light dk\">文档内容有误？欢迎大家一起来编写，文档地址：<i class=\"fa fa-github\"></i><a href=\"https://github.com/baidu/amis/tree/master/docs/style.md\">/docs/style.md</a>。</div>",
|
||
"toc": {
|
||
"label": "目录",
|
||
"type": "toc",
|
||
"children": [
|
||
{
|
||
"label": "图标",
|
||
"fragment": "%E5%9B%BE%E6%A0%87",
|
||
"fullPath": "#%E5%9B%BE%E6%A0%87",
|
||
"level": 2
|
||
},
|
||
{
|
||
"label": "布局",
|
||
"fragment": "%E5%B8%83%E5%B1%80",
|
||
"fullPath": "#%E5%B8%83%E5%B1%80",
|
||
"level": 2
|
||
},
|
||
{
|
||
"label": "宽高",
|
||
"fragment": "%E5%AE%BD%E9%AB%98",
|
||
"fullPath": "#%E5%AE%BD%E9%AB%98",
|
||
"level": 2
|
||
},
|
||
{
|
||
"label": "外边距",
|
||
"fragment": "%E5%A4%96%E8%BE%B9%E8%B7%9D",
|
||
"fullPath": "#%E5%A4%96%E8%BE%B9%E8%B7%9D",
|
||
"level": 2
|
||
},
|
||
{
|
||
"label": "内边距",
|
||
"fragment": "%E5%86%85%E8%BE%B9%E8%B7%9D",
|
||
"fullPath": "#%E5%86%85%E8%BE%B9%E8%B7%9D",
|
||
"level": 2
|
||
},
|
||
{
|
||
"label": "边框",
|
||
"fragment": "%E8%BE%B9%E6%A1%86",
|
||
"fullPath": "#%E8%BE%B9%E6%A1%86",
|
||
"level": 2
|
||
},
|
||
{
|
||
"label": "圆角",
|
||
"fragment": "%E5%9C%86%E8%A7%92",
|
||
"fullPath": "#%E5%9C%86%E8%A7%92",
|
||
"level": 2
|
||
},
|
||
{
|
||
"label": "字体相关",
|
||
"fragment": "%E5%AD%97%E4%BD%93%E7%9B%B8%E5%85%B3",
|
||
"fullPath": "#%E5%AD%97%E4%BD%93%E7%9B%B8%E5%85%B3",
|
||
"level": 2
|
||
},
|
||
{
|
||
"label": "定位",
|
||
"fragment": "%E5%AE%9A%E4%BD%8D",
|
||
"fullPath": "#%E5%AE%9A%E4%BD%8D",
|
||
"level": 2
|
||
},
|
||
{
|
||
"label": "背景",
|
||
"fragment": "%E8%83%8C%E6%99%AF",
|
||
"fullPath": "#%E8%83%8C%E6%99%AF",
|
||
"level": 2
|
||
},
|
||
{
|
||
"label": "其他",
|
||
"fragment": "%E5%85%B6%E4%BB%96",
|
||
"fullPath": "#%E5%85%B6%E4%BB%96",
|
||
"level": 2
|
||
}
|
||
],
|
||
"level": 0
|
||
}
|
||
};
|
||
|
||
});
|