内置样式
<p>[TOC]</p>
<h1>内置样式</h1>
<p>VF内使用的一系列内置样式，用于方便开发者做样式调整，你也可以使用这些样式。
通过直接给节点添加 class 名的形式，从而减少 style 泛滥的问题，在各个组件中自定义太多的 style 不是一个好的做法，当项目慢慢复杂以后将会变得不好维护。
内置样式的做法，是参(chao)考(xi) vuetify 的</p>
<ul>
<li>例如，我们需要一个div，四周外边框为 4 像素，左右两侧内边距为 8 像素，字号为 12 像素，字体颜色为 黑色，背景颜色为 容器颜色，则可使用：
<pre><code><div class="ma-1 ph-2 fs-12 text-black bgg-container">Demo</div>
等同于以下样式
margin: 4px;
padding-left: 8px;
padding-right: 8px;
color: #000;
background-color: #f3f3f3;</code></pre>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/8f0e766ffc986d3cf451cbceb32d50d2" alt="" /></p></li>
</ul>
<h3>文本颜色</h3>
<ul>
<li>语法：text-{param}，例如 text-success</li>
</ul>
<table>
<thead>
<tr>
<th>class名</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>text-primary</td>
<td>主颜色</td>
</tr>
<tr>
<td>text-info</td>
<td>提示性颜色</td>
</tr>
<tr>
<td>text-success</td>
<td>代表成功的</td>
</tr>
<tr>
<td>text-warning</td>
<td>做强调作用的</td>
</tr>
<tr>
<td>text-danger</td>
<td>做危险警告作用的</td>
</tr>
<tr>
<td>text-white</td>
<td>纯白色</td>
</tr>
<tr>
<td>text-black-10</td>
<td>纯黑色</td>
</tr>
<tr>
<td>text-black-9</td>
<td>黑色，色度 90%</td>
</tr>
<tr>
<td>text-black-8</td>
<td>黑色，色度 80%</td>
</tr>
<tr>
<td>text-black-7</td>
<td>黑色，色度 70%</td>
</tr>
<tr>
<td>text-black-6</td>
<td>黑色，色度 60%</td>
</tr>
<tr>
<td>text-black-5</td>
<td>黑色，色度 50%</td>
</tr>
<tr>
<td>text-black-4</td>
<td>黑色，色度 40%</td>
</tr>
<tr>
<td>text-black-3</td>
<td>黑色，色度 30%</td>
</tr>
<tr>
<td>text-black-2</td>
<td>黑色，色度 20%</td>
</tr>
<tr>
<td>text-black-1</td>
<td>黑色，色度 10%</td>
</tr>
</tbody>
</table>
<h3>背景颜色</h3>
<ul>
<li>语法：bgg-{param}，例如 bgg-success</li>
</ul>
<table>
<thead>
<tr>
<th>class名</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>bgg-primary</td>
<td>主颜色的</td>
</tr>
<tr>
<td>bgg-info</td>
<td>提示性颜色的</td>
</tr>
<tr>
<td>bgg-success</td>
<td>代表成功的</td>
</tr>
<tr>
<td>bgg-warning</td>
<td>做强调作用的</td>
</tr>
<tr>
<td>bgg-danger</td>
<td>做危险警告作用的</td>
</tr>
<tr>
<td>bgg-black</td>
<td>纯黑色</td>
</tr>
<tr>
<td>bgg-white</td>
<td>纯白色</td>
</tr>
<tr>
<td>bgg-container</td>
<td>一般作为容器的</td>
</tr>
</tbody>
</table>
<h3>尺寸</h3>
<ul>
<li>语法： {param1}-{param2}，例如：width-100</li>
</ul>
<table>
<thead>
<tr>
<th>class名</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>width-100</td>
<td>width: 100%</td>
</tr>
<tr>
<td>height-100</td>
<td>height: 100%，注意，该样式以父节点的高度为参考值，父节点必须有明确的高度</td>
</tr>
</tbody>
</table>
<h3>外边框</h3>
<ul>
<li>语法：m{param1}-{param2}，例如：ml-1</li>
<li>举例：margin: 0 可使用 class 名为 ma-0，代表 margin 的 all 为 0
param2可取的值为 0 - 5，分别代表 0px，4px，8px，12px，16px，20px
param1可取的值如下</li>
</ul>
<table>
<thead>
<tr>
<th>param1</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>四个方向（all）</td>
</tr>
<tr>
<td>h</td>
<td>水平方向（horizontal）</td>
</tr>
<tr>
<td>v</td>
<td>垂直方向（vertical）</td>
</tr>
<tr>
<td>l</td>
<td>left</td>
</tr>
<tr>
<td>t</td>
<td>top</td>
</tr>
<tr>
<td>r</td>
<td>right</td>
</tr>
<tr>
<td>b</td>
<td>bottom</td>
</tr>
</tbody>
</table>
<h3>内边框</h3>
<ul>
<li>语法：p{param1}-{param2}，例如：pl-1</li>
<li>举例：padding: 0 可使用 class 名为 pa-0，代表 padding 的 all 为 0
param2可取的值为 0 - 5，分别代表 0px，4px，8px，12px，16px，20px
param1可取的值如下</li>
</ul>
<table>
<thead>
<tr>
<th>param1</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>四个方向（all）</td>
</tr>
<tr>
<td>h</td>
<td>水平方向（horizontal）</td>
</tr>
<tr>
<td>v</td>
<td>垂直方向（vertical）</td>
</tr>
<tr>
<td>l</td>
<td>left</td>
</tr>
<tr>
<td>t</td>
<td>top</td>
</tr>
<tr>
<td>r</td>
<td>right</td>
</tr>
<tr>
<td>b</td>
<td>bottom</td>
</tr>
</tbody>
</table>
<h3>字号</h3>
<ul>
<li>语法：fs-{param}，例如 fs-12
param 取值范围：12 - 32 之间的偶数</li>
</ul>
<h3>对齐</h3>
<ul>
<li>语法：text-{param}，例如 text-left</li>
</ul>
<table>
<thead>
<tr>
<th>class名</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>text-left</td>
<td>左对齐</td>
</tr>
<tr>
<td>text-right</td>
<td>右对齐</td>
</tr>
<tr>
<td>text-center</td>
<td>水平居中</td>
</tr>
</tbody>
</table>
<h3>浮动</h3>
<ul>
<li>语法： float-{param}，例如 float-left</li>
</ul>
<table>
<thead>
<tr>
<th>class名</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>float-left</td>
<td>左对浮动</td>
</tr>
<tr>
<td>float-right</td>
<td>右浮动</td>
</tr>
<tr>
<td>float-clear</td>
<td>清除浮动</td>
</tr>
</tbody>
</table>
<h3>指针样式</h3>
<ul>
<li>语法： hover-{param}，例如 hover-pointer</li>
</ul>
<table>
<thead>
<tr>
<th>class名</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>hover-pointer</td>
<td>可点击手势</td>
</tr>
</tbody>
</table>