83 lines
49 KiB
JavaScript
83 lines
49 KiB
JavaScript
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\"><<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"hbox b-a\"</span>>\n <<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"col wrapper-sm bg-success\"</span>>Col A</<span class=\"hljs-keyword\">div</span>>\n <<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"col wrapper-sm bg-info\"</span>>Col B</<span class=\"hljs-keyword\">div</span>>\n <<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"col wrapper-sm bg-danger\"</span>>Col C</<span class=\"hljs-keyword\">div</span>>\n</<span class=\"hljs-keyword\">div</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=\"hljs-selector-class\">.w-1x</span> {\n <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">1em</span>;\n}\n<span class=\"hljs-selector-class\">.w-2x</span> {\n <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">2em</span>;\n}\n<span class=\"hljs-selector-class\">.w-3x</span> {\n <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">3em</span>;\n}\n<span class=\"hljs-selector-class\">.w-xxs</span> {\n <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">60px</span>;\n}\n<span class=\"hljs-selector-class\">.w-xs</span> {\n <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">90px</span>;\n}\n<span class=\"hljs-selector-class\">.w-sm</span> {\n <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">150px</span>;\n}\n<span class=\"hljs-selector-class\">.w</span> {\n <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">200px</span>;\n}\n<span class=\"hljs-selector-class\">.w-md</span> {\n <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">240px</span>;\n}\n<span class=\"hljs-selector-class\">.w-lg</span> {\n <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">280px</span>;\n}\n<span class=\"hljs-selector-class\">.w-xl</span> {\n <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">320px</span>;\n}\n<span class=\"hljs-selector-class\">.w-xxl</span> {\n <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">360px</span>;\n}\n<span class=\"hljs-selector-class\">.w-full</span> {\n <span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">100%</span>;\n}\n<span class=\"hljs-selector-class\">.w-auto</span> {\n <span class=\"hljs-attribute\">width</span>: auto;\n}\n<span class=\"hljs-selector-class\">.h-auto</span> {\n <span class=\"hljs-attribute\">height</span>: auto;\n}\n<span class=\"hljs-selector-class\">.h-full</span> {\n <span class=\"hljs-attribute\">height</span>: <span class=\"hljs-number\">100%</span> <span class=\"hljs-meta\">!important</span>;\n <span class=\"hljs-attribute\">max-height</span>: none <span class=\"hljs-meta\">!important</span>;\n}\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=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"hbox b-a bg-primary\"</span>>\n <<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>>w<span class=\"hljs-number\">-1</span>x</<span class=\"hljs-keyword\">div</span>>\n <<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>>w<span class=\"hljs-number\">-2</span>x</<span class=\"hljs-keyword\">div</span>>\n <<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>>w<span class=\"hljs-number\">-3</span>x</<span class=\"hljs-keyword\">div</span>>\n <<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>>w-xxs</<span class=\"hljs-keyword\">div</span>>\n <<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>>w-xs</<span class=\"hljs-keyword\">div</span>>\n <<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>>w-sm</<span class=\"hljs-keyword\">div</span>>\n <<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"col wrapper-sm b-r w\"</span>>w</<span class=\"hljs-keyword\">div</span>>\n <<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"col wrapper-sm lter\"</span>>...</<span class=\"hljs-keyword\">div</span>>\n</<span class=\"hljs-keyword\">div</span>>\n<<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>>\n <<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>>w-md</<span class=\"hljs-keyword\">div</span>>\n <<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>>w-lg</<span class=\"hljs-keyword\">div</span>>\n <<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>>w-xl</<span class=\"hljs-keyword\">div</span>>\n <<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"col wrapper-sm lter\"</span>>...</<span class=\"hljs-keyword\">div</span>>\n</<span class=\"hljs-keyword\">div</span>>\n<<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>>\n <<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>>w-xxl</<span class=\"hljs-keyword\">div</span>>\n <<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"col wrapper-sm lter\"</span>>...</<span class=\"hljs-keyword\">div</span>>\n</<span class=\"hljs-keyword\">div</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=\"hljs-selector-class\">.m-xxs</span> {\n <span class=\"hljs-attribute\">margin</span>: <span class=\"hljs-number\">2px</span> <span class=\"hljs-number\">4px</span>;\n}\n<span class=\"hljs-selector-class\">.m-xs</span> {\n <span class=\"hljs-attribute\">margin</span>: <span class=\"hljs-number\">5px</span>;\n}\n<span class=\"hljs-selector-class\">.m-sm</span> {\n <span class=\"hljs-attribute\">margin</span>: <span class=\"hljs-number\">10px</span>;\n}\n<span class=\"hljs-selector-class\">.m</span> {\n <span class=\"hljs-attribute\">margin</span>: <span class=\"hljs-number\">15px</span>;\n}\n<span class=\"hljs-selector-class\">.m-md</span> {\n <span class=\"hljs-attribute\">margin</span>: <span class=\"hljs-number\">20px</span>;\n}\n<span class=\"hljs-selector-class\">.m-lg</span> {\n <span class=\"hljs-attribute\">margin</span>: <span class=\"hljs-number\">30px</span>;\n}\n<span class=\"hljs-selector-class\">.m-xl</span> {\n <span class=\"hljs-attribute\">margin</span>: <span class=\"hljs-number\">50px</span>;\n}\n<span class=\"hljs-selector-class\">.m-n</span> {\n <span class=\"hljs-attribute\">margin</span>: <span class=\"hljs-number\">0</span> <span class=\"hljs-meta\">!important</span>;\n}\n<span class=\"hljs-selector-class\">.m-l-none</span> {\n <span class=\"hljs-attribute\">margin-left</span>: <span class=\"hljs-number\">0</span> <span class=\"hljs-meta\">!important</span>;\n}\n<span class=\"hljs-selector-class\">.m-l-xs</span> {\n <span class=\"hljs-attribute\">margin-left</span>: <span class=\"hljs-number\">5px</span>;\n}\n<span class=\"hljs-selector-class\">.m-l-sm</span> {\n <span class=\"hljs-attribute\">margin-left</span>: <span class=\"hljs-number\">10px</span>;\n}\n<span class=\"hljs-selector-class\">.m-l</span> {\n <span class=\"hljs-attribute\">margin-left</span>: <span class=\"hljs-number\">15px</span>;\n}\n<span class=\"hljs-selector-class\">.m-l-md</span> {\n <span class=\"hljs-attribute\">margin-left</span>: <span class=\"hljs-number\">20px</span>;\n}\n<span class=\"hljs-selector-class\">.m-l-lg</span> {\n <span class=\"hljs-attribute\">margin-left</span>: <span class=\"hljs-number\">30px</span>;\n}\n<span class=\"hljs-selector-class\">.m-l-xl</span> {\n <span class=\"hljs-attribute\">margin-left</span>: <span class=\"hljs-number\">40px</span>;\n}\n<span class=\"hljs-selector-class\">.m-l-xxl</span> {\n <span class=\"hljs-attribute\">margin-left</span>: <span class=\"hljs-number\">50px</span>;\n}\n<span class=\"hljs-selector-class\">.m-l-n-xxs</span> {\n <span class=\"hljs-attribute\">margin-left</span>: -<span class=\"hljs-number\">1px</span>;\n}\n<span class=\"hljs-selector-class\">.m-l-n-xs</span> {\n <span class=\"hljs-attribute\">margin-left</span>: -<span class=\"hljs-number\">5px</span>;\n}\n<span class=\"hljs-selector-class\">.m-l-n-sm</span> {\n <span class=\"hljs-attribute\">margin-left</span>: -<span class=\"hljs-number\">10px</span>;\n}\n<span class=\"hljs-selector-class\">.m-l-n</span> {\n <span class=\"hljs-attribute\">margin-left</span>: -<span class=\"hljs-number\">15px</span>;\n}\n<span class=\"hljs-selector-class\">.m-l-n-md</span> {\n <span class=\"hljs-attribute\">margin-left</span>: -<span class=\"hljs-number\">20px</span>;\n}\n<span class=\"hljs-selector-class\">.m-l-n-lg</span> {\n <span class=\"hljs-attribute\">margin-left</span>: -<span class=\"hljs-number\">30px</span>;\n}\n<span class=\"hljs-selector-class\">.m-l-n-xl</span> {\n <span class=\"hljs-attribute\">margin-left</span>: -<span class=\"hljs-number\">40px</span>;\n}\n<span class=\"hljs-selector-class\">.m-l-n-xxl</span> {\n <span class=\"hljs-attribute\">margin-left</span>: -<span class=\"hljs-number\">50px</span>;\n}\n<span class=\"hljs-selector-class\">.m-t-none</span> {\n <span class=\"hljs-attribute\">margin-top</span>: <span class=\"hljs-number\">0</span> <span class=\"hljs-meta\">!important</span>;\n}\n<span class=\"hljs-selector-class\">.m-t-xxs</span> {\n <span class=\"hljs-attribute\">margin-top</span>: <span class=\"hljs-number\">1px</span>;\n}\n<span class=\"hljs-selector-class\">.m-t-xs</span> {\n <span class=\"hljs-attribute\">margin-top</span>: <span class=\"hljs-number\">5px</span>;\n}\n<span class=\"hljs-selector-class\">.m-t-sm</span> {\n <span class=\"hljs-attribute\">margin-top</span>: <span class=\"hljs-number\">10px</span>;\n}\n<span class=\"hljs-selector-class\">.m-t</span> {\n <span class=\"hljs-attribute\">margin-top</span>: <span class=\"hljs-number\">15px</span>;\n}\n<span class=\"hljs-selector-class\">.m-t-md</span> {\n <span class=\"hljs-attribute\">margin-top</span>: <span class=\"hljs-number\">20px</span>;\n}\n<span class=\"hljs-selector-class\">.m-t-lg</span> {\n <span class=\"hljs-attribute\">margin-top</span>: <span class=\"hljs-number\">30px</span>;\n}\n<span class=\"hljs-selector-class\">.m-t-xl</span> {\n <span class=\"hljs-attribute\">margin-top</span>: <span class=\"hljs-number\">40px</span>;\n}\n<span class=\"hljs-selector-class\">.m-t-xxl</span> {\n <span class=\"hljs-attribute\">margin-top</span>: <span class=\"hljs-number\">50px</span>;\n}\n<span class=\"hljs-selector-class\">.m-t-n-xxs</span> {\n <span class=\"hljs-attribute\">margin-top</span>: -<span class=\"hljs-number\">1px</span>;\n}\n<span class=\"hljs-selector-class\">.m-t-n-xs</span> {\n <span class=\"hljs-attribute\">margin-top</span>: -<span class=\"hljs-number\">5px</span>;\n}\n<span class=\"hljs-selector-class\">.m-t-n-sm</span> {\n <span class=\"hljs-attribute\">margin-top</span>: -<span class=\"hljs-number\">10px</span>;\n}\n<span class=\"hljs-selector-class\">.m-t-n</span> {\n <span class=\"hljs-attribute\">margin-top</span>: -<span class=\"hljs-number\">15px</span>;\n}\n<span class=\"hljs-selector-class\">.m-t-n-md</span> {\n <span class=\"hljs-attribute\">margin-top</span>: -<span class=\"hljs-number\">20px</span>;\n}\n<span class=\"hljs-selector-class\">.m-t-n-lg</span> {\n <span class=\"hljs-attribute\">margin-top</span>: -<span class=\"hljs-number\">30px</span>;\n}\n<span class=\"hljs-selector-class\">.m-t-n-xl</span> {\n <span class=\"hljs-attribute\">margin-top</span>: -<span class=\"hljs-number\">40px</span>;\n}\n<span class=\"hljs-selector-class\">.m-t-n-xxl</span> {\n <span class=\"hljs-attribute\">margin-top</span>: -<span class=\"hljs-number\">50px</span>;\n}\n<span class=\"hljs-selector-class\">.m-r-none</span> {\n <span class=\"hljs-attribute\">margin-right</span>: <span class=\"hljs-number\">0</span> <span class=\"hljs-meta\">!important</span>;\n}\n<span class=\"hljs-selector-class\">.m-r-xxs</span> {\n <span class=\"hljs-attribute\">margin-right</span>: <span class=\"hljs-number\">1px</span>;\n}\n<span class=\"hljs-selector-class\">.m-r-xs</span> {\n <span class=\"hljs-attribute\">margin-right</span>: <span class=\"hljs-number\">5px</span>;\n}\n<span class=\"hljs-selector-class\">.m-r-sm</span> {\n <span class=\"hljs-attribute\">margin-right</span>: <span class=\"hljs-number\">10px</span>;\n}\n<span class=\"hljs-selector-class\">.m-r</span> {\n <span class=\"hljs-attribute\">margin-right</span>: <span class=\"hljs-number\">15px</span>;\n}\n<span class=\"hljs-selector-class\">.m-r-md</span> {\n <span class=\"hljs-attribute\">margin-right</span>: <span class=\"hljs-number\">20px</span>;\n}\n<span class=\"hljs-selector-class\">.m-r-lg</span> {\n <span class=\"hljs-attribute\">margin-right</span>: <span class=\"hljs-number\">30px</span>;\n}\n<span class=\"hljs-selector-class\">.m-r-xl</span> {\n <span class=\"hljs-attribute\">margin-right</span>: <span class=\"hljs-number\">40px</span>;\n}\n<span class=\"hljs-selector-class\">.m-r-xxl</span> {\n <span class=\"hljs-attribute\">margin-right</span>: <span class=\"hljs-number\">50px</span>;\n}\n<span class=\"hljs-selector-class\">.m-r-n-xxs</span> {\n <span class=\"hljs-attribute\">margin-right</span>: -<span class=\"hljs-number\">1px</span>;\n}\n<span class=\"hljs-selector-class\">.m-r-n-xs</span> {\n <span class=\"hljs-attribute\">margin-right</span>: -<span class=\"hljs-number\">5px</span>;\n}\n<span class=\"hljs-selector-class\">.m-r-n-sm</span> {\n <span class=\"hljs-attribute\">margin-right</span>: -<span class=\"hljs-number\">10px</span>;\n}\n<span class=\"hljs-selector-class\">.m-r-n</span> {\n <span class=\"hljs-attribute\">margin-right</span>: -<span class=\"hljs-number\">15px</span>;\n}\n<span class=\"hljs-selector-class\">.m-r-n-md</span> {\n <span class=\"hljs-attribute\">margin-right</span>: -<span class=\"hljs-number\">20px</span>;\n}\n<span class=\"hljs-selector-class\">.m-r-n-lg</span> {\n <span class=\"hljs-attribute\">margin-right</span>: -<span class=\"hljs-number\">30px</span>;\n}\n<span class=\"hljs-selector-class\">.m-r-n-xl</span> {\n <span class=\"hljs-attribute\">margin-right</span>: -<span class=\"hljs-number\">40px</span>;\n}\n<span class=\"hljs-selector-class\">.m-r-n-xxl</span> {\n <span class=\"hljs-attribute\">margin-right</span>: -<span class=\"hljs-number\">50px</span>;\n}\n<span class=\"hljs-selector-class\">.m-b-none</span> {\n <span class=\"hljs-attribute\">margin-bottom</span>: <span class=\"hljs-number\">0</span> <span class=\"hljs-meta\">!important</span>;\n}\n<span class=\"hljs-selector-class\">.m-b-xxs</span> {\n <span class=\"hljs-attribute\">margin-bottom</span>: <span class=\"hljs-number\">1px</span>;\n}\n<span class=\"hljs-selector-class\">.m-b-xs</span> {\n <span class=\"hljs-attribute\">margin-bottom</span>: <span class=\"hljs-number\">5px</span>;\n}\n<span class=\"hljs-selector-class\">.m-b-sm</span> {\n <span class=\"hljs-attribute\">margin-bottom</span>: <span class=\"hljs-number\">10px</span>;\n}\n<span class=\"hljs-selector-class\">.m-b</span> {\n <span class=\"hljs-attribute\">margin-bottom</span>: <span class=\"hljs-number\">15px</span>;\n}\n<span class=\"hljs-selector-class\">.m-b-md</span> {\n <span class=\"hljs-attribute\">margin-bottom</span>: <span class=\"hljs-number\">20px</span>;\n}\n<span class=\"hljs-selector-class\">.m-b-lg</span> {\n <span class=\"hljs-attribute\">margin-bottom</span>: <span class=\"hljs-number\">30px</span>;\n}\n<span class=\"hljs-selector-class\">.m-b-xl</span> {\n <span class=\"hljs-attribute\">margin-bottom</span>: <span class=\"hljs-number\">40px</span>;\n}\n<span class=\"hljs-selector-class\">.m-b-xxl</span> {\n <span class=\"hljs-attribute\">margin-bottom</span>: <span class=\"hljs-number\">50px</span>;\n}\n<span class=\"hljs-selector-class\">.m-b-n-xxs</span> {\n <span class=\"hljs-attribute\">margin-bottom</span>: -<span class=\"hljs-number\">1px</span>;\n}\n<span class=\"hljs-selector-class\">.m-b-n-xs</span> {\n <span class=\"hljs-attribute\">margin-bottom</span>: -<span class=\"hljs-number\">5px</span>;\n}\n<span class=\"hljs-selector-class\">.m-b-n-sm</span> {\n <span class=\"hljs-attribute\">margin-bottom</span>: -<span class=\"hljs-number\">10px</span>;\n}\n<span class=\"hljs-selector-class\">.m-b-n</span> {\n <span class=\"hljs-attribute\">margin-bottom</span>: -<span class=\"hljs-number\">15px</span>;\n}\n<span class=\"hljs-selector-class\">.m-b-n-md</span> {\n <span class=\"hljs-attribute\">margin-bottom</span>: -<span class=\"hljs-number\">20px</span>;\n}\n<span class=\"hljs-selector-class\">.m-b-n-lg</span> {\n <span class=\"hljs-attribute\">margin-bottom</span>: -<span class=\"hljs-number\">30px</span>;\n}\n<span class=\"hljs-selector-class\">.m-b-n-xl</span> {\n <span class=\"hljs-attribute\">margin-bottom</span>: -<span class=\"hljs-number\">40px</span>;\n}\n<span class=\"hljs-selector-class\">.m-b-n-xxl</span> {\n <span class=\"hljs-attribute\">margin-bottom</span>: -<span class=\"hljs-number\">50px</span>;\n}\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> {\n <span class=\"hljs-attribute\">padding</span>: <span class=\"hljs-number\">5px</span>;\n}\n<span class=\"hljs-selector-class\">.wrapper-sm</span> {\n <span class=\"hljs-attribute\">padding</span>: <span class=\"hljs-number\">10px</span>;\n}\n<span class=\"hljs-selector-class\">.wrapper</span> {\n <span class=\"hljs-attribute\">padding</span>: <span class=\"hljs-number\">15px</span>;\n}\n<span class=\"hljs-selector-class\">.wrapper-md</span> {\n <span class=\"hljs-attribute\">padding</span>: <span class=\"hljs-number\">20px</span>;\n}\n<span class=\"hljs-selector-class\">.wrapper-lg</span> {\n <span class=\"hljs-attribute\">padding</span>: <span class=\"hljs-number\">30px</span>;\n}\n<span class=\"hljs-selector-class\">.wrapper-xl</span> {\n <span class=\"hljs-attribute\">padding</span>: <span class=\"hljs-number\">50px</span>;\n}\n<span class=\"hljs-selector-class\">.padder-xs</span> {\n <span class=\"hljs-attribute\">padding-left</span>: <span class=\"hljs-number\">5px</span>;\n <span class=\"hljs-attribute\">padding-right</span>: <span class=\"hljs-number\">5px</span>;\n}\n<span class=\"hljs-selector-class\">.padder-sm</span> {\n <span class=\"hljs-attribute\">padding-left</span>: <span class=\"hljs-number\">10px</span>;\n <span class=\"hljs-attribute\">padding-right</span>: <span class=\"hljs-number\">10px</span>;\n}\n<span class=\"hljs-selector-class\">.padder-lg</span> {\n <span class=\"hljs-attribute\">padding-left</span>: <span class=\"hljs-number\">30px</span>;\n <span class=\"hljs-attribute\">padding-right</span>: <span class=\"hljs-number\">30px</span>;\n}\n<span class=\"hljs-selector-class\">.padder-md</span> {\n <span class=\"hljs-attribute\">padding-left</span>: <span class=\"hljs-number\">20px</span>;\n <span class=\"hljs-attribute\">padding-right</span>: <span class=\"hljs-number\">20px</span>;\n}\n<span class=\"hljs-selector-class\">.padder</span> {\n <span class=\"hljs-attribute\">padding-left</span>: <span class=\"hljs-number\">15px</span>;\n <span class=\"hljs-attribute\">padding-right</span>: <span class=\"hljs-number\">15px</span>;\n}\n<span class=\"hljs-selector-class\">.padder-v-xs</span> {\n <span class=\"hljs-attribute\">padding-top</span>: <span class=\"hljs-number\">5px</span>;\n <span class=\"hljs-attribute\">padding-bottom</span>: <span class=\"hljs-number\">5px</span>;\n}\n<span class=\"hljs-selector-class\">.padder-v-sm</span> {\n <span class=\"hljs-attribute\">padding-top</span>: <span class=\"hljs-number\">10px</span>;\n <span class=\"hljs-attribute\">padding-bottom</span>: <span class=\"hljs-number\">10px</span>;\n}\n<span class=\"hljs-selector-class\">.padder-v-lg</span> {\n <span class=\"hljs-attribute\">padding-top</span>: <span class=\"hljs-number\">30px</span>;\n <span class=\"hljs-attribute\">padding-bottom</span>: <span class=\"hljs-number\">30px</span>;\n}\n<span class=\"hljs-selector-class\">.padder-v-md</span> {\n <span class=\"hljs-attribute\">padding-top</span>: <span class=\"hljs-number\">20px</span>;\n <span class=\"hljs-attribute\">padding-bottom</span>: <span class=\"hljs-number\">20px</span>;\n}\n<span class=\"hljs-selector-class\">.padder-v</span> {\n <span class=\"hljs-attribute\">padding-top</span>: <span class=\"hljs-number\">15px</span>;\n <span class=\"hljs-attribute\">padding-bottom</span>: <span class=\"hljs-number\">15px</span>;\n}\n<span class=\"hljs-selector-class\">.no-padder</span> {\n <span class=\"hljs-attribute\">padding</span>: <span class=\"hljs-number\">0</span> <span class=\"hljs-meta\">!important</span>;\n}\n<span class=\"hljs-selector-class\">.pull-in</span> {\n <span class=\"hljs-attribute\">margin-left</span>: -<span class=\"hljs-number\">15px</span>;\n <span class=\"hljs-attribute\">margin-right</span>: -<span class=\"hljs-number\">15px</span>;\n}\n<span class=\"hljs-selector-class\">.pull-out</span> {\n <span class=\"hljs-attribute\">margin</span>: -<span class=\"hljs-number\">10px</span> -<span class=\"hljs-number\">15px</span>;\n}\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> {\n <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}\n<span class=\"hljs-selector-class\">.b-a</span> {\n <span class=\"hljs-attribute\">border</span>: <span class=\"hljs-number\">1px</span> solid <span class=\"hljs-variable\">@border-color</span>;\n}\n<span class=\"hljs-selector-class\">.b-t</span> {\n <span class=\"hljs-attribute\">border-top</span>: <span class=\"hljs-number\">1px</span> solid <span class=\"hljs-variable\">@border-color</span>;\n}\n<span class=\"hljs-selector-class\">.b-r</span> {\n <span class=\"hljs-attribute\">border-right</span>: <span class=\"hljs-number\">1px</span> solid <span class=\"hljs-variable\">@border-color</span>;\n}\n<span class=\"hljs-selector-class\">.b-b</span> {\n <span class=\"hljs-attribute\">border-bottom</span>: <span class=\"hljs-number\">1px</span> solid <span class=\"hljs-variable\">@border-color</span>;\n}\n<span class=\"hljs-selector-class\">.b-l</span> {\n <span class=\"hljs-attribute\">border-left</span>: <span class=\"hljs-number\">1px</span> solid <span class=\"hljs-variable\">@border-color</span>;\n}\n<span class=\"hljs-selector-class\">.b-light</span> {\n <span class=\"hljs-attribute\">border-color</span>: <span class=\"hljs-variable\">@brand-light</span>;\n}\n<span class=\"hljs-selector-class\">.b-dark</span> {\n <span class=\"hljs-attribute\">border-color</span>: <span class=\"hljs-variable\">@brand-dark</span>;\n}\n<span class=\"hljs-selector-class\">.b-black</span> {\n <span class=\"hljs-attribute\">border-color</span>: <span class=\"hljs-variable\">@brand-dark</span>;\n}\n<span class=\"hljs-selector-class\">.b-primary</span> {\n <span class=\"hljs-attribute\">border-color</span>: <span class=\"hljs-variable\">@brand-primary</span>;\n}\n<span class=\"hljs-selector-class\">.b-success</span> {\n <span class=\"hljs-attribute\">border-color</span>: <span class=\"hljs-variable\">@brand-success</span>;\n}\n<span class=\"hljs-selector-class\">.b-info</span> {\n <span class=\"hljs-attribute\">border-color</span>: <span class=\"hljs-variable\">@brand-info</span>;\n}\n<span class=\"hljs-selector-class\">.b-warning</span> {\n <span class=\"hljs-attribute\">border-color</span>: <span class=\"hljs-variable\">@brand-warning</span>;\n}\n<span class=\"hljs-selector-class\">.b-danger</span> {\n <span class=\"hljs-attribute\">border-color</span>: <span class=\"hljs-variable\">@brand-danger</span>;\n}\n<span class=\"hljs-selector-class\">.b-white</span> {\n <span class=\"hljs-attribute\">border-color</span>: <span class=\"hljs-number\">#fff</span>;\n}\n<span class=\"hljs-selector-class\">.b-dashed</span> {\n <span class=\"hljs-attribute\">border-style</span>: dashed <span class=\"hljs-meta\">!important</span>;\n}\n<span class=\"hljs-selector-class\">.b-l-light</span> {\n <span class=\"hljs-attribute\">border-left-color</span>: <span class=\"hljs-variable\">@brand-light</span>;\n}\n<span class=\"hljs-selector-class\">.b-l-dark</span> {\n <span class=\"hljs-attribute\">border-left-color</span>: <span class=\"hljs-variable\">@brand-dark</span>;\n}\n<span class=\"hljs-selector-class\">.b-l-black</span> {\n <span class=\"hljs-attribute\">border-left-color</span>: <span class=\"hljs-variable\">@brand-dark</span>;\n}\n<span class=\"hljs-selector-class\">.b-l-primary</span> {\n <span class=\"hljs-attribute\">border-left-color</span>: <span class=\"hljs-variable\">@brand-primary</span>;\n}\n<span class=\"hljs-selector-class\">.b-l-success</span> {\n <span class=\"hljs-attribute\">border-left-color</span>: <span class=\"hljs-variable\">@brand-success</span>;\n}\n<span class=\"hljs-selector-class\">.b-l-info</span> {\n <span class=\"hljs-attribute\">border-left-color</span>: <span class=\"hljs-variable\">@brand-info</span>;\n}\n<span class=\"hljs-selector-class\">.b-l-warning</span> {\n <span class=\"hljs-attribute\">border-left-color</span>: <span class=\"hljs-variable\">@brand-warning</span>;\n}\n<span class=\"hljs-selector-class\">.b-l-danger</span> {\n <span class=\"hljs-attribute\">border-left-color</span>: <span class=\"hljs-variable\">@brand-danger</span>;\n}\n<span class=\"hljs-selector-class\">.b-l-white</span> {\n <span class=\"hljs-attribute\">border-left-color</span>: <span class=\"hljs-number\">#fff</span>;\n}\n<span class=\"hljs-selector-class\">.b-l-2x</span> {\n <span class=\"hljs-attribute\">border-left-width</span>: <span class=\"hljs-number\">2px</span>;\n}\n<span class=\"hljs-selector-class\">.b-l-3x</span> {\n <span class=\"hljs-attribute\">border-left-width</span>: <span class=\"hljs-number\">3px</span>;\n}\n<span class=\"hljs-selector-class\">.b-l-4x</span> {\n <span class=\"hljs-attribute\">border-left-width</span>: <span class=\"hljs-number\">4px</span>;\n}\n<span class=\"hljs-selector-class\">.b-l-5x</span> {\n <span class=\"hljs-attribute\">border-left-width</span>: <span class=\"hljs-number\">5px</span>;\n}\n<span class=\"hljs-selector-class\">.b-2x</span> {\n <span class=\"hljs-attribute\">border-width</span>: <span class=\"hljs-number\">2px</span>;\n}\n<span class=\"hljs-selector-class\">.b-3x</span> {\n <span class=\"hljs-attribute\">border-width</span>: <span class=\"hljs-number\">3px</span>;\n}\n<span class=\"hljs-selector-class\">.b-4x</span> {\n <span class=\"hljs-attribute\">border-width</span>: <span class=\"hljs-number\">4px</span>;\n}\n<span class=\"hljs-selector-class\">.b-5x</span> {\n <span class=\"hljs-attribute\">border-width</span>: <span class=\"hljs-number\">5px</span>;\n}\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> {\n <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>\n <span class=\"hljs-variable\">@border-radius-base</span>;\n}\n<span class=\"hljs-selector-class\">.r-2x</span> {\n <span class=\"hljs-attribute\">border-radius</span>: <span class=\"hljs-variable\">@border-radius-base</span> * <span class=\"hljs-number\">2</span>;\n}\n<span class=\"hljs-selector-class\">.r-3x</span> {\n <span class=\"hljs-attribute\">border-radius</span>: <span class=\"hljs-variable\">@border-radius-base</span> * <span class=\"hljs-number\">3</span>;\n}\n<span class=\"hljs-selector-class\">.r-l</span> {\n <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}\n<span class=\"hljs-selector-class\">.r-r</span> {\n <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}\n<span class=\"hljs-selector-class\">.r-t</span> {\n <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}\n<span class=\"hljs-selector-class\">.r-b</span> {\n <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}\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> {\n <span class=\"hljs-attribute\">font-weight</span>: normal;\n}\n<span class=\"hljs-selector-class\">.font-thin</span> {\n <span class=\"hljs-attribute\">font-weight</span>: <span class=\"hljs-number\">300</span>;\n}\n<span class=\"hljs-selector-class\">.font-bold</span> {\n <span class=\"hljs-attribute\">font-weight</span>: <span class=\"hljs-number\">700</span>;\n}\n<span class=\"hljs-selector-class\">.text-3x</span> {\n <span class=\"hljs-attribute\">font-size</span>: <span class=\"hljs-number\">3em</span>;\n}\n<span class=\"hljs-selector-class\">.text-2x</span> {\n <span class=\"hljs-attribute\">font-size</span>: <span class=\"hljs-number\">2em</span>;\n}\n<span class=\"hljs-selector-class\">.text-lg</span> {\n <span class=\"hljs-attribute\">font-size</span>: @font-size-lg;\n}\n<span class=\"hljs-selector-class\">.text-md</span> {\n <span class=\"hljs-attribute\">font-size</span>: @font-size-md;\n}\n<span class=\"hljs-selector-class\">.text-base</span> {\n <span class=\"hljs-attribute\">font-size</span>: @font-size-base;\n}\n<span class=\"hljs-selector-class\">.text-sm</span> {\n <span class=\"hljs-attribute\">font-size</span>: @font-size-sm;\n}\n<span class=\"hljs-selector-class\">.text-xs</span> {\n <span class=\"hljs-attribute\">font-size</span>: @font-size-xs;\n}\n<span class=\"hljs-selector-class\">.text-xxs</span> {\n <span class=\"hljs-attribute\">text-indent</span>: -<span class=\"hljs-number\">9999px</span>;\n}\n<span class=\"hljs-selector-class\">.text-ellipsis</span> {\n <span class=\"hljs-attribute\">display</span>: block;\n <span class=\"hljs-attribute\">white-space</span>: nowrap;\n <span class=\"hljs-attribute\">overflow</span>: hidden;\n <span class=\"hljs-attribute\">text-overflow</span>: ellipsis;\n}\n<span class=\"hljs-selector-class\">.text-u-c</span> {\n <span class=\"hljs-attribute\">text-transform</span>: uppercase;\n}\n<span class=\"hljs-selector-class\">.text-l-t</span> {\n <span class=\"hljs-attribute\">text-decoration</span>: line-through;\n}\n<span class=\"hljs-selector-class\">.text-u-l</span> {\n <span class=\"hljs-attribute\">text-decoration</span>: underline;\n}\n<span class=\"hljs-selector-class\">.text-left</span> {\n <span class=\"hljs-attribute\">text-align</span>: left;\n}\n<span class=\"hljs-selector-class\">.text-center</span> {\n <span class=\"hljs-attribute\">text-align</span>: center;\n}\n<span class=\"hljs-selector-class\">.text-right</span> {\n <span class=\"hljs-attribute\">text-align</span>: right;\n}\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> {\n <span class=\"hljs-attribute\">position</span>: relative;\n}\n<span class=\"hljs-selector-class\">.pos-stc</span> {\n <span class=\"hljs-attribute\">position</span>: static <span class=\"hljs-meta\">!important</span>;\n}\n<span class=\"hljs-selector-class\">.pos-abt</span> {\n <span class=\"hljs-attribute\">position</span>: absolute;\n}\n<span class=\"hljs-selector-class\">.pos-fix</span> {\n <span class=\"hljs-attribute\">position</span>: fixed;\n}\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=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"hbox b-a bg-light\"</span>>\n <<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>>bg-white</<span class=\"hljs-keyword\">div</span>>\n <<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>>bg-dark</<span class=\"hljs-keyword\">div</span>>\n <<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>>bg-info</<span class=\"hljs-keyword\">div</span>>\n <<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>>bg-success</<span class=\"hljs-keyword\">div</span>>\n <<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>>bg-warning</<span class=\"hljs-keyword\">div</span>>\n <<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>>bg-danger</<span class=\"hljs-keyword\">div</span>>\n <<span class=\"hljs-keyword\">div</span> <span class=\"hljs-built_in\">class</span>=<span class=\"hljs-string\">\"col wrapper-sm bg-primary\"</span>>bg-primary</<span class=\"hljs-keyword\">div</span>>\n</<span class=\"hljs-keyword\">div</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=\"hljs-selector-class\">.show</span> {\n <span class=\"hljs-attribute\">visibility</span>: visible;\n}\n<span class=\"hljs-selector-class\">.line</span> {\n *<span class=\"hljs-attribute\">width</span>: <span class=\"hljs-number\">100%</span>;\n <span class=\"hljs-attribute\">height</span>: <span class=\"hljs-number\">2px</span>;\n <span class=\"hljs-attribute\">margin</span>: <span class=\"hljs-number\">10px</span> <span class=\"hljs-number\">0</span>;\n <span class=\"hljs-attribute\">font-size</span>: <span class=\"hljs-number\">0</span>;\n <span class=\"hljs-attribute\">overflow</span>: hidden;\n <span class=\"hljs-attribute\">background-color</span>: transparent;\n <span class=\"hljs-attribute\">border-width</span>: <span class=\"hljs-number\">0</span>;\n <span class=\"hljs-attribute\">border-top</span>: <span class=\"hljs-number\">1px</span> solid @border-color;\n}\n<span class=\"hljs-selector-class\">.line-xs</span> {\n <span class=\"hljs-attribute\">margin</span>: <span class=\"hljs-number\">0</span>;\n}\n<span class=\"hljs-selector-class\">.line-lg</span> {\n <span class=\"hljs-attribute\">margin-top</span>: <span class=\"hljs-number\">15px</span>;\n <span class=\"hljs-attribute\">margin-bottom</span>: <span class=\"hljs-number\">15px</span>;\n}\n<span class=\"hljs-selector-class\">.line-dashed</span> {\n <span class=\"hljs-attribute\">border-style</span>: dashed;\n <span class=\"hljs-attribute\">background</span>: transparent;\n}\n<span class=\"hljs-selector-class\">.no-line</span> {\n <span class=\"hljs-attribute\">border-width</span>: <span class=\"hljs-number\">0</span>;\n}\n<span class=\"hljs-selector-class\">.no-border</span>,\n<span class=\"hljs-selector-class\">.no-borders</span> {\n <span class=\"hljs-attribute\">border-color</span>: transparent;\n <span class=\"hljs-attribute\">border-width</span>: <span class=\"hljs-number\">0</span>;\n}\n<span class=\"hljs-selector-class\">.no-radius</span> {\n <span class=\"hljs-attribute\">border-radius</span>: <span class=\"hljs-number\">0</span>;\n}\n<span class=\"hljs-selector-class\">.block</span> {\n <span class=\"hljs-attribute\">display</span>: block;\n}\n<span class=\"hljs-selector-class\">.block</span><span class=\"hljs-selector-class\">.hide</span> {\n <span class=\"hljs-attribute\">display</span>: none;\n}\n<span class=\"hljs-selector-class\">.inline</span> {\n <span class=\"hljs-attribute\">display</span>: inline-block <span class=\"hljs-meta\">!important</span>;\n}\n<span class=\"hljs-selector-class\">.none</span> {\n <span class=\"hljs-attribute\">display</span>: none;\n}\n<span class=\"hljs-selector-class\">.pull-none</span> {\n <span class=\"hljs-attribute\">float</span>: none;\n}\n<span class=\"hljs-selector-class\">.rounded</span> {\n <span class=\"hljs-attribute\">border-radius</span>: <span class=\"hljs-number\">500px</span>;\n}\n<span class=\"hljs-selector-class\">.clear</span> {\n <span class=\"hljs-attribute\">display</span>: block;\n <span class=\"hljs-attribute\">overflow</span>: hidden;\n}\n<span class=\"hljs-selector-class\">.no-bg</span> {\n <span class=\"hljs-attribute\">background-color</span>: transparent;\n <span class=\"hljs-attribute\">color</span>: inherit;\n}\n<span class=\"hljs-selector-class\">.no-select</span> {\n -webkit-touch-callout: none;\n -webkit-user-<span class=\"hljs-selector-tag\">select</span>: none;\n -khtml-user-<span class=\"hljs-selector-tag\">select</span>: none;\n -moz-user-<span class=\"hljs-selector-tag\">select</span>: none;\n -ms-user-<span class=\"hljs-selector-tag\">select</span>: none;\n user-<span class=\"hljs-selector-tag\">select</span>: none;\n}\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
|
|
}
|
|
};
|
|
|
|
});
|