amis2/gh-pages/docs/style.js

define('docs/style.md', function(require, exports, module) {

  module.exports = {
    "title": "样式表说明",
    "shortname": "style",
    "html": "<p>amis 中有大量的功能类 class 可以使用，即可以用在 schema 中，也可以用在自定义组件开发中，掌握这些 class, 几乎可以不用写样式。</p>\n<p>amis 中的样式基于 <a href=\"http://getbootstrap.com/css/\">BootStrap V3</a>, 这里主要讲 Bootstrap 中没有涉及到的。</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\">&lt;<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"hbox b-a\"</span>&gt;\n    &lt;<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"col wrapper-sm bg-success\"</span>&gt;Col A&lt;/<span class=\"hljs-keyword\">div</span>&gt;\n    &lt;<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"col wrapper-sm bg-info\"</span>&gt;Col B&lt;/<span class=\"hljs-keyword\">div</span>&gt;\n    &lt;<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"col wrapper-sm bg-danger\"</span>&gt;Col C&lt;/<span class=\"hljs-keyword\">div</span>&gt;\n&lt;/<span class=\"hljs-keyword\">div</span>&gt;\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=\"hljs-selector-class\">.w-1x</span> { <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">1em</span>; }\n<span class=\"hljs-selector-class\">.w-2x</span> { <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">2em</span>; }\n<span class=\"hljs-selector-class\">.w-3x</span> { <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">3em</span>; }\n<span class=\"hljs-selector-class\">.w-xxs</span> { <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">60px</span>; }\n<span class=\"hljs-selector-class\">.w-xs</span> { <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">90px</span>; }\n<span class=\"hljs-selector-class\">.w-sm</span> { <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">150px</span>; }\n<span class=\"hljs-selector-class\">.w</span> { <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">200px</span>; }\n<span class=\"hljs-selector-class\">.w-md</span> { <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">240px</span>; }\n<span class=\"hljs-selector-class\">.w-lg</span> { <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">280px</span>; }\n<span class=\"hljs-selector-class\">.w-xl</span> { <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">320px</span>; }\n<span class=\"hljs-selector-class\">.w-xxl</span> { <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">360px</span>; }\n<span class=\"hljs-selector-class\">.w-full</span> { <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">100%</span>; }\n<span class=\"hljs-selector-class\">.w-auto</span> { <span class=\"hljs-attribute\">width</span>: auto; }\n<span class=\"hljs-selector-class\">.h-auto</span> { <span class=\"hljs-attribute\">height</span>: auto; }\n<span class=\"hljs-selector-class\">.h-full</span> { <span class=\"hljs-attribute\">height</span>: <span class=\"hljs-number\">100%</span> <span class=\"hljs-meta\">!important</span>; <span class=\"hljs-attribute\">max-height</span>: none <span class=\"hljs-meta\">!important</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\">&lt;<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"hbox b-a bg-primary\"</span>&gt;\n    &lt;<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"col wrapper-sm b-r w-1x\"</span>&gt;w<span class=\"hljs-number\">-1</span>x&lt;/<span class=\"hljs-keyword\">div</span>&gt;\n    &lt;<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"col wrapper-sm b-r w-2x\"</span>&gt;w<span class=\"hljs-number\">-2</span>x&lt;/<span class=\"hljs-keyword\">div</span>&gt;\n    &lt;<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"col wrapper-sm b-r w-3x\"</span>&gt;w<span class=\"hljs-number\">-3</span>x&lt;/<span class=\"hljs-keyword\">div</span>&gt;\n    &lt;<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"col wrapper-sm b-r w-xxs\"</span>&gt;w-xxs&lt;/<span class=\"hljs-keyword\">div</span>&gt;\n    &lt;<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"col wrapper-sm b-r w-xs\"</span>&gt;w-xs&lt;/<span class=\"hljs-keyword\">div</span>&gt;\n    &lt;<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"col wrapper-sm b-r w-sm\"</span>&gt;w-sm&lt;/<span class=\"hljs-keyword\">div</span>&gt;\n    &lt;<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"col wrapper-sm b-r w\"</span>&gt;w&lt;/<span class=\"hljs-keyword\">div</span>&gt;\n    &lt;<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"col wrapper-sm  lter\"</span>&gt;...&lt;/<span class=\"hljs-keyword\">div</span>&gt;\n&lt;/<span class=\"hljs-keyword\">div</span>&gt;\n&lt;<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"hbox b-a bg-primary m-t\"</span>&gt;\n    &lt;<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"col wrapper-sm b-r w-md\"</span>&gt;w-md&lt;/<span class=\"hljs-keyword\">div</span>&gt;\n    &lt;<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"col wrapper-sm b-r w-lg\"</span>&gt;w-lg&lt;/<span class=\"hljs-keyword\">div</span>&gt;\n    &lt;<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"col wrapper-sm b-r w-xl\"</span>&gt;w-xl&lt;/<span class=\"hljs-keyword\">div</span>&gt;\n    &lt;<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"col wrapper-sm lter\"</span>&gt;...&lt;/<span class=\"hljs-keyword\">div</span>&gt;\n&lt;/<span class=\"hljs-keyword\">div</span>&gt;\n&lt;<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"hbox b-a bg-primary m-t\"</span>&gt;\n    &lt;<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"col wrapper-sm b-r w-xxl\"</span>&gt;w-xxl&lt;/<span class=\"hljs-keyword\">div</span>&gt;\n    &lt;<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"col wrapper-sm lter\"</span>&gt;...&lt;/<span class=\"hljs-keyword\">div</span>&gt;\n&lt;/<span class=\"hljs-keyword\">div</span>&gt;\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=\"hljs-selector-class\">.m-xxs</span> { <span class=\"hljs-attribute\">margin</span>: <span class=\"hljs-number\">2px</span> <span class=\"hljs-number\">4px</span> }\n<span class=\"hljs-selector-class\">.m-xs</span> { <span class=\"hljs-attribute\">margin</span>: <span class=\"hljs-number\">5px</span>; }\n<span class=\"hljs-selector-class\">.m-sm</span> { <span class=\"hljs-attribute\">margin</span>: <span class=\"hljs-number\">10px</span>; }\n<span class=\"hljs-selector-class\">.m</span> { <span class=\"hljs-attribute\">margin</span>: <span class=\"hljs-number\">15px</span>; }\n<span class=\"hljs-selector-class\">.m-md</span> { <span class=\"hljs-attribute\">margin</span>: <span class=\"hljs-number\">20px</span>; }\n<span class=\"hljs-selector-class\">.m-lg</span> { <span class=\"hljs-attribute\">margin</span>: <span class=\"hljs-number\">30px</span>; }\n<span class=\"hljs-selector-class\">.m-xl</span> { <span class=\"hljs-attribute\">margin</span>: <span class=\"hljs-number\">50px</span>; }\n<span class=\"hljs-selector-class\">.m-n</span> { <span class=\"hljs-attribute\">margin</span>: <span class=\"hljs-number\">0</span> <span class=\"hljs-meta\">!important</span> }\n<span class=\"hljs-selector-class\">.m-l-none</span> { <span class=\"hljs-attribute\">margin-left</span>: <span class=\"hljs-number\">0</span> <span class=\"hljs-meta\">!important</span> }\n<span class=\"hljs-selector-class\">.m-l-xs</span> { <span class=\"hljs-attribute\">margin-left</span>: <span class=\"hljs-number\">5px</span>; }\n<span class=\"hljs-selector-class\">.m-l-sm</span> { <span class=\"hljs-attribute\">margin-left</span>: <span class=\"hljs-number\">10px</span>; }\n<span class=\"hljs-selector-class\">.m-l</span> { <span class=\"hljs-attribute\">margin-left</span>: <span class=\"hljs-number\">15px</span> }\n<span class=\"hljs-selector-class\">.m-l-md</span> { <span class=\"hljs-attribute\">margin-left</span>: <span class=\"hljs-number\">20px</span>; }\n<span class=\"hljs-selector-class\">.m-l-lg</span> { <span class=\"hljs-attribute\">margin-left</span>: <span class=\"hljs-number\">30px</span>; }\n<span class=\"hljs-selector-class\">.m-l-xl</span> { <span class=\"hljs-attribute\">margin-left</span>: <span class=\"hljs-number\">40px</span>; }\n<span class=\"hljs-selector-class\">.m-l-xxl</span> { <span class=\"hljs-attribute\">margin-left</span>: <span class=\"hljs-number\">50px</span>; }\n<span class=\"hljs-selector-class\">.m-l-n-xxs</span> { <span class=\"hljs-attribute\">margin-left</span>: -<span class=\"hljs-number\">1px</span> }\n<span class=\"hljs-selector-class\">.m-l-n-xs</span> { <span class=\"hljs-attribute\">margin-left</span>: -<span class=\"hljs-number\">5px</span> }\n<span class=\"hljs-selector-class\">.m-l-n-sm</span> { <span class=\"hljs-attribute\">margin-left</span>: -<span class=\"hljs-number\">10px</span> }\n<span class=\"hljs-selector-class\">.m-l-n</span> { <span class=\"hljs-attribute\">margin-left</span>: -<span class=\"hljs-number\">15px</span> }\n<span class=\"hljs-selector-class\">.m-l-n-md</span> { <span class=\"hljs-attribute\">margin-left</span>: -<span class=\"hljs-number\">20px</span> }\n<span class=\"hljs-selector-class\">.m-l-n-lg</span> { <span class=\"hljs-attribute\">margin-left</span>: -<span class=\"hljs-number\">30px</span> }\n<span class=\"hljs-selector-class\">.m-l-n-xl</span> { <span class=\"hljs-attribute\">margin-left</span>: -<span class=\"hljs-number\">40px</span> }\n<span class=\"hljs-selector-class\">.m-l-n-xxl</span> { <span class=\"hljs-attribute\">margin-left</span>: -<span class=\"hljs-number\">50px</span> }\n<span class=\"hljs-selector-class\">.m-t-none</span> { <span class=\"hljs-attribute\">margin-top</span>: <span class=\"hljs-number\">0</span> <span class=\"hljs-meta\">!important</span> }\n<span class=\"hljs-selector-class\">.m-t-xxs</span> { <span class=\"hljs-attribute\">margin-top</span>: <span class=\"hljs-number\">1px</span>; }\n<span class=\"hljs-selector-class\">.m-t-xs</span> { <span class=\"hljs-attribute\">margin-top</span>: <span class=\"hljs-number\">5px</span>; }\n<span class=\"hljs-selector-class\">.m-t-sm</span> { <span class=\"hljs-attribute\">margin-top</span>: <span class=\"hljs-number\">10px</span>; }\n<span class=\"hljs-selector-class\">.m-t</span> { <span class=\"hljs-attribute\">margin-top</span>: <span class=\"hljs-number\">15px</span> }\n<span class=\"hljs-selector-class\">.m-t-md</span> { <span class=\"hljs-attribute\">margin-top</span>: <span class=\"hljs-number\">20px</span>; }\n<span class=\"hljs-selector-class\">.m-t-lg</span> { <span class=\"hljs-attribute\">margin-top</span>: <span class=\"hljs-number\">30px</span>; }\n<span class=\"hljs-selector-class\">.m-t-xl</span> { <span class=\"hljs-attribute\">margin-top</span>: <span class=\"hljs-number\">40px</span>; }\n<span class=\"hljs-selector-class\">.m-t-xxl</span> { <span class=\"hljs-attribute\">margin-top</span>: <span class=\"hljs-number\">50px</span>; }\n<span class=\"hljs-selector-class\">.m-t-n-xxs</span> { <span class=\"hljs-attribute\">margin-top</span>: -<span class=\"hljs-number\">1px</span> }\n<span class=\"hljs-selector-class\">.m-t-n-xs</span> { <span class=\"hljs-attribute\">margin-top</span>: -<span class=\"hljs-number\">5px</span> }\n<span class=\"hljs-selector-class\">.m-t-n-sm</span> { <span class=\"hljs-attribute\">margin-top</span>: -<span class=\"hljs-number\">10px</span> }\n<span class=\"hljs-selector-class\">.m-t-n</span> { <span class=\"hljs-attribute\">margin-top</span>: -<span class=\"hljs-number\">15px</span> }\n<span class=\"hljs-selector-class\">.m-t-n-md</span> { <span class=\"hljs-attribute\">margin-top</span>: -<span class=\"hljs-number\">20px</span> }\n<span class=\"hljs-selector-class\">.m-t-n-lg</span> { <span class=\"hljs-attribute\">margin-top</span>: -<span class=\"hljs-number\">30px</span> }\n<span class=\"hljs-selector-class\">.m-t-n-xl</span> { <span class=\"hljs-attribute\">margin-top</span>: -<span class=\"hljs-number\">40px</span> }\n<span class=\"hljs-selector-class\">.m-t-n-xxl</span> { <span class=\"hljs-attribute\">margin-top</span>: -<span class=\"hljs-number\">50px</span> }\n<span class=\"hljs-selector-class\">.m-r-none</span> { <span class=\"hljs-attribute\">margin-right</span>: <span class=\"hljs-number\">0</span> <span class=\"hljs-meta\">!important</span> }\n<span class=\"hljs-selector-class\">.m-r-xxs</span> { <span class=\"hljs-attribute\">margin-right</span>: <span class=\"hljs-number\">1px</span> }\n<span class=\"hljs-selector-class\">.m-r-xs</span> { <span class=\"hljs-attribute\">margin-right</span>: <span class=\"hljs-number\">5px</span> }\n<span class=\"hljs-selector-class\">.m-r-sm</span> { <span class=\"hljs-attribute\">margin-right</span>: <span class=\"hljs-number\">10px</span> }\n<span class=\"hljs-selector-class\">.m-r</span> { <span class=\"hljs-attribute\">margin-right</span>: <span class=\"hljs-number\">15px</span> }\n<span class=\"hljs-selector-class\">.m-r-md</span> { <span class=\"hljs-attribute\">margin-right</span>: <span class=\"hljs-number\">20px</span> }\n<span class=\"hljs-selector-class\">.m-r-lg</span> { <span class=\"hljs-attribute\">margin-right</span>: <span class=\"hljs-number\">30px</span> }\n<span class=\"hljs-selector-class\">.m-r-xl</span> { <span class=\"hljs-attribute\">margin-right</span>: <span class=\"hljs-number\">40px</span> }\n<span class=\"hljs-selector-class\">.m-r-xxl</span> { <span class=\"hljs-attribute\">margin-right</span>: <span class=\"hljs-number\">50px</span> }\n<span class=\"hljs-selector-class\">.m-r-n-xxs</span> { <span class=\"hljs-attribute\">margin-right</span>: -<span class=\"hljs-number\">1px</span> }\n<span class=\"hljs-selector-class\">.m-r-n-xs</span> { <span class=\"hljs-attribute\">margin-right</span>: -<span class=\"hljs-number\">5px</span> }\n<span class=\"hljs-selector-class\">.m-r-n-sm</span> { <span class=\"hljs-attribute\">margin-right</span>: -<span class=\"hljs-number\">10px</span> }\n<span class=\"hljs-selector-class\">.m-r-n</span> { <span class=\"hljs-attribute\">margin-right</span>: -<span class=\"hljs-number\">15px</span> }\n<span class=\"hljs-selector-class\">.m-r-n-md</span> { <span class=\"hljs-attribute\">margin-right</span>: -<span class=\"hljs-number\">20px</span> }\n<span class=\"hljs-selector-class\">.m-r-n-lg</span> { <span class=\"hljs-attribute\">margin-right</span>: -<span class=\"hljs-number\">30px</span> }\n<span class=\"hljs-selector-class\">.m-r-n-xl</span> { <span class=\"hljs-attribute\">margin-right</span>: -<span class=\"hljs-number\">40px</span> }\n<span class=\"hljs-selector-class\">.m-r-n-xxl</span> { <span class=\"hljs-attribute\">margin-right</span>: -<span class=\"hljs-number\">50px</span> }\n<span class=\"hljs-selector-class\">.m-b-none</span> { <span class=\"hljs-attribute\">margin-bottom</span>: <span class=\"hljs-number\">0</span> <span class=\"hljs-meta\">!important</span> }\n<span class=\"hljs-selector-class\">.m-b-xxs</span> { <span class=\"hljs-attribute\">margin-bottom</span>: <span class=\"hljs-number\">1px</span>; }\n<span class=\"hljs-selector-class\">.m-b-xs</span> { <span class=\"hljs-attribute\">margin-bottom</span>: <span class=\"hljs-number\">5px</span>; }\n<span class=\"hljs-selector-class\">.m-b-sm</span> { <span class=\"hljs-attribute\">margin-bottom</span>: <span class=\"hljs-number\">10px</span>; }\n<span class=\"hljs-selector-class\">.m-b</span> { <span class=\"hljs-attribute\">margin-bottom</span>: <span class=\"hljs-number\">15px</span>; }\n<span class=\"hljs-selector-class\">.m-b-md</span> { <span class=\"hljs-attribute\">margin-bottom</span>: <span class=\"hljs-number\">20px</span>; }\n<span class=\"hljs-selector-class\">.m-b-lg</span> { <span class=\"hljs-attribute\">margin-bottom</span>: <span class=\"hljs-number\">30px</span>; }\n<span class=\"hljs-selector-class\">.m-b-xl</span> { <span class=\"hljs-attribute\">margin-bottom</span>: <span class=\"hljs-number\">40px</span>; }\n<span class=\"hljs-selector-class\">.m-b-xxl</span> { <span class=\"hljs-attribute\">margin-bottom</span>: <span class=\"hljs-number\">50px</span>; }\n<span class=\"hljs-selector-class\">.m-b-n-xxs</span> { <span class=\"hljs-attribute\">margin-bottom</span>: -<span class=\"hljs-number\">1px</span> }\n<span class=\"hljs-selector-class\">.m-b-n-xs</span> { <span class=\"hljs-attribute\">margin-bottom</span>: -<span class=\"hljs-number\">5px</span> }\n<span class=\"hljs-selector-class\">.m-b-n-sm</span> { <span class=\"hljs-attribute\">margin-bottom</span>: -<span class=\"hljs-number\">10px</span> }\n<span class=\"hljs-selector-class\">.m-b-n</span> { <span class=\"hljs-attribute\">margin-bottom</span>: -<span class=\"hljs-number\">15px</span> }\n<span class=\"hljs-selector-class\">.m-b-n-md</span> { <span class=\"hljs-attribute\">margin-bottom</span>: -<span class=\"hljs-number\">20px</span> }\n<span class=\"hljs-selector-class\">.m-b-n-lg</span> { <span class=\"hljs-attribute\">margin-bottom</span>: -<span class=\"hljs-number\">30px</span> }\n<span class=\"hljs-selector-class\">.m-b-n-xl</span> { <span class=\"hljs-attribute\">margin-bottom</span>: -<span class=\"hljs-number\">40px</span> }\n<span class=\"hljs-selector-class\">.m-b-n-xxl</span> { <span class=\"hljs-attribute\">margin-bottom</span>: -<span class=\"hljs-number\">50px</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=\"hljs-selector-class\">.wrapper-xs</span> { <span class=\"hljs-attribute\">padding</span>: <span class=\"hljs-number\">5px</span>; }\n<span class=\"hljs-selector-class\">.wrapper-sm</span> { <span class=\"hljs-attribute\">padding</span>: <span class=\"hljs-number\">10px</span>; }\n<span class=\"hljs-selector-class\">.wrapper</span> { <span class=\"hljs-attribute\">padding</span>: <span class=\"hljs-number\">15px</span>; }\n<span class=\"hljs-selector-class\">.wrapper-md</span> { <span class=\"hljs-attribute\">padding</span>: <span class=\"hljs-number\">20px</span>; }\n<span class=\"hljs-selector-class\">.wrapper-lg</span> { <span class=\"hljs-attribute\">padding</span>: <span class=\"hljs-number\">30px</span>; }\n<span class=\"hljs-selector-class\">.wrapper-xl</span> { <span class=\"hljs-attribute\">padding</span>: <span class=\"hljs-number\">50px</span>; }\n<span class=\"hljs-selector-class\">.padder-xs</span> { <span class=\"hljs-attribute\">padding-left</span>: <span class=\"hljs-number\">5px</span>; <span class=\"hljs-attribute\">padding-right</span>: <span class=\"hljs-number\">5px</span> }\n<span class=\"hljs-selector-class\">.padder-sm</span> { <span class=\"hljs-attribute\">padding-left</span>: <span class=\"hljs-number\">10px</span>; <span class=\"hljs-attribute\">padding-right</span>: <span class=\"hljs-number\">10px</span> }\n<span class=\"hljs-selector-class\">.padder-lg</span> { <span class=\"hljs-attribute\">padding-left</span>: <span class=\"hljs-number\">30px</span>; <span class=\"hljs-attribute\">padding-right</span>: <span class=\"hljs-number\">30px</span> }\n<span class=\"hljs-selector-class\">.padder-md</span> { <span class=\"hljs-attribute\">padding-left</span>: <span class=\"hljs-number\">20px</span>; <span class=\"hljs-attribute\">padding-right</span>: <span class=\"hljs-number\">20px</span> }\n<span class=\"hljs-selector-class\">.padder</span> { <span class=\"hljs-attribute\">padding-left</span>: <span class=\"hljs-number\">15px</span>; <span class=\"hljs-attribute\">padding-right</span>: <span class=\"hljs-number\">15px</span> }\n<span class=\"hljs-selector-class\">.padder-v-xs</span> { <span class=\"hljs-attribute\">padding-top</span>: <span class=\"hljs-number\">5px</span>; <span class=\"hljs-attribute\">padding-bottom</span>: <span class=\"hljs-number\">5px</span> }\n<span class=\"hljs-selector-class\">.padder-v-sm</span> { <span class=\"hljs-attribute\">padding-top</span>: <span class=\"hljs-number\">10px</span>; <span class=\"hljs-attribute\">padding-bottom</span>: <span class=\"hljs-number\">10px</span> }\n<span class=\"hljs-selector-class\">.padder-v-lg</span> { <span class=\"hljs-attribute\">padding-top</span>: <span class=\"hljs-number\">30px</span>; <span class=\"hljs-attribute\">padding-bottom</span>: <span class=\"hljs-number\">30px</span> }\n<span class=\"hljs-selector-class\">.padder-v-md</span> { <span class=\"hljs-attribute\">padding-top</span>: <span class=\"hljs-number\">20px</span>; <span class=\"hljs-attribute\">padding-bottom</span>: <span class=\"hljs-number\">20px</span> }\n<span class=\"hljs-selector-class\">.padder-v</span> { <span class=\"hljs-attribute\">padding-top</span>: <span class=\"hljs-number\">15px</span>; <span class=\"hljs-attribute\">padding-bottom</span>: <span class=\"hljs-number\">15px</span> }\n<span class=\"hljs-selector-class\">.no-padder</span> { <span class=\"hljs-attribute\">padding</span>: <span class=\"hljs-number\">0</span> <span class=\"hljs-meta\">!important</span>; }\n<span class=\"hljs-selector-class\">.pull-in</span> { <span class=\"hljs-attribute\">margin-left</span>: -<span class=\"hljs-number\">15px</span>; <span class=\"hljs-attribute\">margin-right</span>: -<span class=\"hljs-number\">15px</span>; }\n<span class=\"hljs-selector-class\">.pull-out</span> { <span class=\"hljs-attribute\">margin</span>: -<span class=\"hljs-number\">10px</span> -<span class=\"hljs-number\">15px</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=\"hljs-selector-class\">.b</span> { <span class=\"hljs-attribute\">border</span>: <span class=\"hljs-number\">1px</span> solid rgba(<span class=\"hljs-number\">0</span>, <span class=\"hljs-number\">0</span>, <span class=\"hljs-number\">0</span>, <span class=\"hljs-number\">0.05</span>) }\n<span class=\"hljs-selector-class\">.b-a</span> { <span class=\"hljs-attribute\">border</span>: <span class=\"hljs-number\">1px</span> solid <span class=\"hljs-variable\">@border-color</span> }\n<span class=\"hljs-selector-class\">.b-t</span> { <span class=\"hljs-attribute\">border-top</span>: <span class=\"hljs-number\">1px</span> solid <span class=\"hljs-variable\">@border-color</span> }\n<span class=\"hljs-selector-class\">.b-r</span> { <span class=\"hljs-attribute\">border-right</span>: <span class=\"hljs-number\">1px</span> solid <span class=\"hljs-variable\">@border-color</span> }\n<span class=\"hljs-selector-class\">.b-b</span> { <span class=\"hljs-attribute\">border-bottom</span>: <span class=\"hljs-number\">1px</span> solid <span class=\"hljs-variable\">@border-color</span> }\n<span class=\"hljs-selector-class\">.b-l</span> { <span class=\"hljs-attribute\">border-left</span>: <span class=\"hljs-number\">1px</span> solid <span class=\"hljs-variable\">@border-color</span> }\n<span class=\"hljs-selector-class\">.b-light</span> { <span class=\"hljs-attribute\">border-color</span>: <span class=\"hljs-variable\">@brand-light</span> }\n<span class=\"hljs-selector-class\">.b-dark</span> { <span class=\"hljs-attribute\">border-color</span>: <span class=\"hljs-variable\">@brand-dark</span> }\n<span class=\"hljs-selector-class\">.b-black</span> { <span class=\"hljs-attribute\">border-color</span>: <span class=\"hljs-variable\">@brand-dark</span> }\n<span class=\"hljs-selector-class\">.b-primary</span> { <span class=\"hljs-attribute\">border-color</span>: <span class=\"hljs-variable\">@brand-primary</span> }\n<span class=\"hljs-selector-class\">.b-success</span> { <span class=\"hljs-attribute\">border-color</span>: <span class=\"hljs-variable\">@brand-success</span> }\n<span class=\"hljs-selector-class\">.b-info</span> { <span class=\"hljs-attribute\">border-color</span>: <span class=\"hljs-variable\">@brand-info</span> }\n<span class=\"hljs-selector-class\">.b-warning</span> { <span class=\"hljs-attribute\">border-color</span>: <span class=\"hljs-variable\">@brand-warning</span> }\n<span class=\"hljs-selector-class\">.b-danger</span> { <span class=\"hljs-attribute\">border-color</span>: <span class=\"hljs-variable\">@brand-danger</span> }\n<span class=\"hljs-selector-class\">.b-white</span> { <span class=\"hljs-attribute\">border-color</span>: <span class=\"hljs-number\">#fff</span> }\n<span class=\"hljs-selector-class\">.b-dashed</span> { <span class=\"hljs-attribute\">border-style</span>: dashed <span class=\"hljs-meta\">!important</span>; }\n<span class=\"hljs-selector-class\">.b-l-light</span> { <span class=\"hljs-attribute\">border-left-color</span>: <span class=\"hljs-variable\">@brand-light</span> }\n<span class=\"hljs-selector-class\">.b-l-dark</span> { <span class=\"hljs-attribute\">border-left-color</span>: <span class=\"hljs-variable\">@brand-dark</span> }\n<span class=\"hljs-selector-class\">.b-l-black</span> { <span class=\"hljs-attribute\">border-left-color</span>: <span class=\"hljs-variable\">@brand-dark</span> }\n<span class=\"hljs-selector-class\">.b-l-primary</span> { <span class=\"hljs-attribute\">border-left-color</span>: <span class=\"hljs-variable\">@brand-primary</span> }\n<span class=\"hljs-selector-class\">.b-l-success</span> { <span class=\"hljs-attribute\">border-left-color</span>: <span class=\"hljs-variable\">@brand-success</span> }\n<span class=\"hljs-selector-class\">.b-l-info</span> { <span class=\"hljs-attribute\">border-left-color</span>: <span class=\"hljs-variable\">@brand-info</span> }\n<span class=\"hljs-selector-class\">.b-l-warning</span> { <span class=\"hljs-attribute\">border-left-color</span>: <span class=\"hljs-variable\">@brand-warning</span> }\n<span class=\"hljs-selector-class\">.b-l-danger</span> { <span class=\"hljs-attribute\">border-left-color</span>: <span class=\"hljs-variable\">@brand-danger</span> }\n<span class=\"hljs-selector-class\">.b-l-white</span> { <span class=\"hljs-attribute\">border-left-color</span>: <span class=\"hljs-number\">#fff</span> }\n<span class=\"hljs-selector-class\">.b-l-2x</span> { <span class=\"hljs-attribute\">border-left-width</span>: <span class=\"hljs-number\">2px</span> }\n<span class=\"hljs-selector-class\">.b-l-3x</span> { <span class=\"hljs-attribute\">border-left-width</span>: <span class=\"hljs-number\">3px</span> }\n<span class=\"hljs-selector-class\">.b-l-4x</span> { <span class=\"hljs-attribute\">border-left-width</span>: <span class=\"hljs-number\">4px</span> }\n<span class=\"hljs-selector-class\">.b-l-5x</span> { <span class=\"hljs-attribute\">border-left-width</span>: <span class=\"hljs-number\">5px</span> }\n<span class=\"hljs-selector-class\">.b-2x</span> { <span class=\"hljs-attribute\">border-width</span>: <span class=\"hljs-number\">2px</span> }\n<span class=\"hljs-selector-class\">.b-3x</span> { <span class=\"hljs-attribute\">border-width</span>: <span class=\"hljs-number\">3px</span> }\n<span class=\"hljs-selector-class\">.b-4x</span> { <span class=\"hljs-attribute\">border-width</span>: <span class=\"hljs-number\">4px</span> }\n<span class=\"hljs-selector-class\">.b-5x</span> { <span class=\"hljs-attribute\">border-width</span>: <span class=\"hljs-number\">5px</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=\"hljs-selector-class\">.r</span> { <span class=\"hljs-attribute\">border-radius</span>: <span class=\"hljs-variable\">@border-radius-base</span> <span class=\"hljs-variable\">@border-radius-base</span> <span class=\"hljs-variable\">@border-radius-base</span> <span class=\"hljs-variable\">@border-radius-base</span>; }\n<span class=\"hljs-selector-class\">.r-2x</span> { <span class=\"hljs-attribute\">border-radius</span>: <span class=\"hljs-variable\">@border-radius-base</span> * <span class=\"hljs-number\">2</span>; }\n<span class=\"hljs-selector-class\">.r-3x</span> { <span class=\"hljs-attribute\">border-radius</span>: <span class=\"hljs-variable\">@border-radius-base</span> * <span class=\"hljs-number\">3</span>; }\n<span class=\"hljs-selector-class\">.r-l</span> { <span class=\"hljs-attribute\">border-radius</span>: <span class=\"hljs-variable\">@border-radius-base</span> <span class=\"hljs-number\">0</span> <span class=\"hljs-number\">0</span> <span class=\"hljs-variable\">@border-radius-base</span>; }\n<span class=\"hljs-selector-class\">.r-r</span> { <span class=\"hljs-attribute\">border-radius</span>: <span class=\"hljs-number\">0</span> <span class=\"hljs-variable\">@border-radius-base</span> <span class=\"hljs-variable\">@border-radius-base</span> <span class=\"hljs-number\">0</span>; }\n<span class=\"hljs-selector-class\">.r-t</span> { <span class=\"hljs-attribute\">border-radius</span>: <span class=\"hljs-variable\">@border-radius-base</span> <span class=\"hljs-variable\">@border-radius-base</span> <span class=\"hljs-number\">0</span> <span class=\"hljs-number\">0</span>; }\n<span class=\"hljs-selector-class\">.r-b</span> { <span class=\"hljs-attribute\">border-radius</span>: <span class=\"hljs-number\">0</span> <span class=\"hljs-number\">0</span> <span class=\"hljs-variable\">@border-radius-base</span> <span class=\"hljs-variable\">@border-radius-base</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=\"hljs-selector-class\">.font-normal</span> { <span class=\"hljs-attribute\">font-weight</span>: normal; }\n<span class=\"hljs-selector-class\">.font-thin</span> { <span class=\"hljs-attribute\">font-weight</span>: <span class=\"hljs-number\">300</span>; }\n<span class=\"hljs-selector-class\">.font-bold</span> { <span class=\"hljs-attribute\">font-weight</span>: <span class=\"hljs-number\">700</span>; }\n<span class=\"hljs-selector-class\">.text-3x</span> { <span class=\"hljs-attribute\">font-size</span>: <span class=\"hljs-number\">3em</span>; }\n<span class=\"hljs-selector-class\">.text-2x</span> { <span class=\"hljs-attribute\">font-size</span>: <span class=\"hljs-number\">2em</span>; }\n<span class=\"hljs-selector-class\">.text-lg</span> { <span class=\"hljs-attribute\">font-size</span>: @font-size-lg; }\n<span class=\"hljs-selector-class\">.text-md</span> { <span class=\"hljs-attribute\">font-size</span>: @font-size-md; }\n<span class=\"hljs-selector-class\">.text-base</span> { <span class=\"hljs-attribute\">font-size</span>: @font-size-base; }\n<span class=\"hljs-selector-class\">.text-sm</span> { <span class=\"hljs-attribute\">font-size</span>: @font-size-sm; }\n<span class=\"hljs-selector-class\">.text-xs</span> { <span class=\"hljs-attribute\">font-size</span>: @font-size-xs; }\n<span class=\"hljs-selector-class\">.text-xxs</span> { <span class=\"hljs-attribute\">text-indent</span>: -<span class=\"hljs-number\">9999px</span> }\n<span class=\"hljs-selector-class\">.text-ellipsis</span> { <span class=\"hljs-attribute\">display</span>: block; <span class=\"hljs-attribute\">white-space</span>: nowrap; <span class=\"hljs-attribute\">overflow</span>: hidden; <span class=\"hljs-attribute\">text-overflow</span>: ellipsis; }\n<span class=\"hljs-selector-class\">.text-u-c</span> { <span class=\"hljs-attribute\">text-transform</span>: uppercase; }\n<span class=\"hljs-selector-class\">.text-l-t</span> { <span class=\"hljs-attribute\">text-decoration</span>: line-through; }\n<span class=\"hljs-selector-class\">.text-u-l</span> { <span class=\"hljs-attribute\">text-decoration</span>: underline; }\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=\"hljs-selector-class\">.pos-rlt</span> { <span class=\"hljs-attribute\">position</span>: relative; }\n<span class=\"hljs-selector-class\">.pos-stc</span> { <span class=\"hljs-attribute\">position</span>: static <span class=\"hljs-meta\">!important</span>; }\n<span class=\"hljs-selector-class\">.pos-abt</span> { <span class=\"hljs-attribute\">position</span>: absolute; }\n<span class=\"hljs-selector-class\">.pos-fix</span> { <span class=\"hljs-attribute\">position</span>: fixed; }\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-sucess</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\">&lt;<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"hbox b-a bg-light\"</span>&gt;\n    &lt;<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"col wrapper-sm b-r bg-white\"</span>&gt;bg-white&lt;/<span class=\"hljs-keyword\">div</span>&gt;\n    &lt;<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"col wrapper-sm b-r bg-dark\"</span>&gt;bg-dark&lt;/<span class=\"hljs-keyword\">div</span>&gt;\n    &lt;<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"col wrapper-sm b-r bg-info\"</span>&gt;bg-info&lt;/<span class=\"hljs-keyword\">div</span>&gt;\n    &lt;<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"col wrapper-sm b-r bg-success\"</span>&gt;bg-sucess&lt;/<span class=\"hljs-keyword\">div</span>&gt;\n    &lt;<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"col wrapper-sm b-r bg-warning\"</span>&gt;bg-warning&lt;/<span class=\"hljs-keyword\">div</span>&gt;\n    &lt;<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"col wrapper-sm b-r bg-danger\"</span>&gt;bg-danger&lt;/<span class=\"hljs-keyword\">div</span>&gt;\n    &lt;<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"col wrapper-sm bg-primary\"</span>&gt;bg-primary&lt;/<span class=\"hljs-keyword\">div</span>&gt;\n&lt;/<span class=\"hljs-keyword\">div</span>&gt;\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=\"hljs-selector-class\">.show</span> { <span class=\"hljs-attribute\">visibility</span>: visible; }\n<span class=\"hljs-selector-class\">.line</span> { *<span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">100%</span>; <span class=\"hljs-attribute\">height</span>: <span class=\"hljs-number\">2px</span>; <span class=\"hljs-attribute\">margin</span>: <span class=\"hljs-number\">10px</span> <span class=\"hljs-number\">0</span>; <span class=\"hljs-attribute\">font-size</span>: <span class=\"hljs-number\">0</span>; <span class=\"hljs-attribute\">overflow</span>: hidden; <span class=\"hljs-attribute\">background-color</span>: transparent; <span class=\"hljs-attribute\">border-width</span>: <span class=\"hljs-number\">0</span>; <span class=\"hljs-attribute\">border-top</span>: <span class=\"hljs-number\">1px</span> solid @border-color; }\n<span class=\"hljs-selector-class\">.line-xs</span> { <span class=\"hljs-attribute\">margin</span>: <span class=\"hljs-number\">0</span> }\n<span class=\"hljs-selector-class\">.line-lg</span> { <span class=\"hljs-attribute\">margin-top</span>: <span class=\"hljs-number\">15px</span>; <span class=\"hljs-attribute\">margin-bottom</span>: <span class=\"hljs-number\">15px</span> }\n<span class=\"hljs-selector-class\">.line-dashed</span> { <span class=\"hljs-attribute\">border-style</span>: dashed; <span class=\"hljs-attribute\">background</span>: transparent; }\n<span class=\"hljs-selector-class\">.no-line</span> { <span class=\"hljs-attribute\">border-width</span>: <span class=\"hljs-number\">0</span> }\n<span class=\"hljs-selector-class\">.no-border</span>, <span class=\"hljs-selector-class\">.no-borders</span> { <span class=\"hljs-attribute\">border-color</span>: transparent; <span class=\"hljs-attribute\">border-width</span>: <span class=\"hljs-number\">0</span> }\n<span class=\"hljs-selector-class\">.no-radius</span> { <span class=\"hljs-attribute\">border-radius</span>: <span class=\"hljs-number\">0</span> }\n<span class=\"hljs-selector-class\">.block</span> { <span class=\"hljs-attribute\">display</span>: block; }\n<span class=\"hljs-selector-class\">.block</span><span class=\"hljs-selector-class\">.hide</span> { <span class=\"hljs-attribute\">display</span>: none; }\n<span class=\"hljs-selector-class\">.inline</span> { <span class=\"hljs-attribute\">display</span>: inline-block !important; }\n<span class=\"hljs-selector-class\">.none</span> { <span class=\"hljs-attribute\">display</span>: none; }\n<span class=\"hljs-selector-class\">.pull-none</span> { <span class=\"hljs-attribute\">float</span>: none; }\n<span class=\"hljs-selector-class\">.rounded</span> { <span class=\"hljs-attribute\">border-radius</span>: <span class=\"hljs-number\">500px</span>; }\n<span class=\"hljs-selector-class\">.clear</span> { <span class=\"hljs-attribute\">display</span>: block; <span class=\"hljs-attribute\">overflow</span>: hidden; }\n<span class=\"hljs-selector-class\">.no-bg</span> { <span class=\"hljs-attribute\">background-color</span>: transparent; <span class=\"hljs-attribute\">color</span>: inherit; }\n<span class=\"hljs-selector-class\">.no-select</span> { -webkit-touch-callout: <span class=\"hljs-attribute\">none</span>; -webkit-user-select: <span class=\"hljs-attribute\">none</span>; -khtml-user-select: <span class=\"hljs-attribute\">none</span>; -moz-user-select: <span class=\"hljs-attribute\">none</span>; -ms-user-select: <span class=\"hljs-attribute\">none</span>; user-select: <span class=\"hljs-attribute\">none</span>; }\n</code></pre>\n",
    "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
    }
  };

});