颜色

色系介绍

根据盒子模型原理，可定义色彩的属性为文本、背景和边框；框架为这三个属性定义了默认颜色。

为丰富色彩种类，除默认颜色外，框架还定义了三大类色彩体系：

1. 配色系：包含主色、辅色和点缀色，为常用的配色体系，建议应用时，自主定义相关色彩。在页面准备处有介绍自定义颜色方法。
2. 无色系：包含黑色、深色、暗色、灰色、银色、亮色、白色的灰度无色系。
3. 提示系：包含危险色、警告色、安全色、信息色的提示色系。

下面，分别介绍如何用三大色系来定义文本、背景和边框等属性的颜色：

文本色

默认文本色

默认文本色继承body元素的文本颜色值，无须添加样式；也可以用框架定义的.text样式设置默认文本色。

    <div>默认文本色</div>
    <div class="text">默认文本色</div>
  

配色系

配色系包含主色.text-main、辅色.text-sub和点缀色.text-dot三个颜色，具体应用为：

    <div class="text-main">主色文本</div>
    <div class="text-sub">辅色文本</div>
    <div class="text-dot">点缀色文本</div>
  

无色系

无色系包含黑色.text-black、深色.text-deep、暗色.text-dark、灰色.text-gray、银色.text-silver、亮色.text-light和白色.text-white七个颜色，具体应用为：

    <div class="text-black">黑色文本</div>
    <div class="text-deep">深色文本</div>
    <div class="text-dark">暗色文本</div>
    <div class="text-gray">灰色文本</div>
    <div class="text-silver">银色文本</div>
    <div class="text-light">亮色文本</div>
    <div class="text-white">白色文本</div>
  

提示色系

提示色系包危险色.text-danger、警告.text-warning、成功.text-success、信息.text-info四个颜色，具体应用为：

    <div class="text-danger">危险色文本</div>
    <div class="text-warning">警告色文本</div>
    <div class="text-success">成功色文本</div>
    <div class="text-info">信息色文本</div>
  

背景色

默认背景色

整个页面默认背景色为body标签定义的背景颜色，应用时也可以通过重置body标签改变整页面的背景颜色。

标签应用上，框架用可用.bg定义元素的背景色。

    <div class="bg">默认背景色</div>
  

配色系

配色系包含主色.bg-main、辅色.bg-sub和点缀色.bg-dot三个颜色，具体应用为：

    <div class="bg-main">主色背景</div>
    <div class="bg-sub">辅色背景</div>
    <div class="bg-dot">点缀色背景</div>
  

无色系

无色系包含黑色.bg-black、深色.bg-deep、暗色.bg-dark、灰色.bg-gray、银色.bg-silver、亮色.bg-light和白色.bg-white七个颜色，具体应用为：

    <div class="bg-black">黑色背景</div>
    <div class="bg-deep">深色背景</div>
    <div class="bg-dark">暗色背景</div>
    <div class="bg-gray">灰色背景</div>
    <div class="bg-silver">银色背景</div>
    <div class="bg-light">亮色背景</div>
    <div class="bg-white">白色背景</div>
  

提示色系

提示色系包危险色.bg-danger、警告.bg-warning、成功.bg-success、信息.bg-info四个颜色，具体应用为：

    <div class="bg-danger">危险色背景</div>
    <div class="bg-warning">警告色背景</div>
    <div class="bg-success">成功色背景</div>
    <div class="bg-info">信息色背景</div>
  

另外，框架还定义了专为警告框用的背景色，是提示色系的延伸：

    <div class="alert-danger">危险色警告框背景</div>
    <div class="alert-warning">警告色警告框背景</div>
    <div class="alert-success">成功色警告框背景</div>
    <div class="alert-info">信息色警告框背景</div>
  

背景反色

当背景为深色时，添加.bg-inverse样式，背景色内的文字变为白色。

    <div class="bg-main bg-inverse">背景反色</div>
  

边框色

默认边框色

框架用.border定义默认边框色。

    <div class="border">默认边框色</div>
  

配色系

配色系包含主色.border-main、辅色.border-sub和点缀色.border-dot三个颜色，边框配色只负责颜色的重置，需要建立在已有边框的基础上，如下面示例的.border，具体应用为：

    <div class="border border-main">主色边框</div>
    <div class="border border-sub">辅色边框</div>
    <div class="border border-dot">点缀色边框</div>
  

无色系

无色系包含黑色.border-black、深色.border-deep、暗色.border-dark、灰色.border-gray、银色.border-silver、亮色.border-light和白色.border-white七个颜色，具体应用为：

    <div class="border border-black">黑色边框</div>
    <div class="border border-deep">深色边框</div>
    <div class="border border-dark">暗色边框</div>
    <div class="border border-gray">灰色边框</div>
    <div class="border border-silver">银色边框</div>
    <div class="border border-light">亮色边框</div>
    <div class="border border border-white">白色边框</div>
  

提示色系

提示色系包危险色.border-danger、警告.border-warning、成功.border-success、信息.border-info四个颜色，具体应用为：

    <div class="border border-danger">危险色边框</div>
    <div class="border border-warning">警告色边框</div>
    <div class="border border-success">成功色边框</div>
    <div class="border border-info">信息色边框</div>
  

通过对颜色的应用，可以很好、很方便的调整元素的色彩。