amis/gh-pages/docs/style_56c0203.js
2020-06-08 19:02:21 +08:00

83 lines
87 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

define('docs/style.md', function(require, exports, module) {
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\">&lt;</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\">&lt;</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\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</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\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</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\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</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\">&lt;</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\">&lt;</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\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</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\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</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\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</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\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</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\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</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\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</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\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</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\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</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\">&lt;</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\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</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\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</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\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</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\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</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\">&lt;</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\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</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\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</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\">&lt;</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\">&lt;</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\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</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\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</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\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</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\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</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\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</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\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</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\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</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
}
};
});