颜色

定义基础颜色和状态颜色

常规状态色

着重颜色表示不同状态和主次。

类名全称：primary,secondary,success,danger,warning,information,light,dark。

类名缩写：pri,sec,suc,dan,wan,inf,lig,dar；为全名的前三个字母。

主要 primary 次要 secondary 成功 success 危险 danger 警告 warning 信息 information 亮 light 暗 dark

<mark class="primary">...</mark>
<mark class="secondary">...</mark>
<mark class="success">...</mark>
<mark class="danger">...</mark>
<mark class="warning">...</mark>
<mark class="information">...</mark>
<mark class="light">...</mark>
<mark class="dark">...</mark>

<div class="primary">...</div>
<div class="secondary">...</div>
<div class="success">...</div>
<div class="danger">...</div>
<div class="warning">...</div>
<div class="information">...</div>
<div class="light">...</div>
<div class="dark">...</div>

轻量状态色

轻量颜色表示不同状态和主次。

组合类名：pale，与常规状态色类名组合使用； 全称类名：pale-primary,pale-secondary,pale-success,pale-danger,pale-warning,pale-information,pale-light,pale-dark。

主要 primary 次要 secondary 成功 success 危险 danger 警告 warning 信息 information 亮 light 暗 dark

<mark class="pale primary">...</mark>
<mark class="pale secondary">...</mark>
<mark class="pale success">...</mark>
<mark class="pale danger">...</mark>
<mark class="pale warning">...</mark>
<mark class="pale information">...</mark>
<mark class="pale light">...</mark>
<mark class="pale dark">...</mark>

<div class="pale primary">...</div>
<div class="pale secondary">...</div>
<div class="pale success">...</div>
<div class="pale danger">...</div>
<div class="pale warning">...</div>
<div class="pale information">...</div>
<div class="pale light">...</div>
<div class="pale dark">...</div>

半透明状态色

透明颜色表示不同状态和主次。

组合类名：alpha，与常规状态色类名组合使用； 全称类名：alpha-primary,alpha-secondary,alpha-success,alpha-danger,alpha-warning,alpha-information,alpha-light,alpha-dark。

主要 primary 次要 secondary 成功 success 危险 danger 警告 warning 信息 information 亮 light 暗 dark

<mark class="alpha primary">...</mark>
<mark class="alpha secondary">...</mark>
<mark class="alpha success">...</mark>
<mark class="alpha danger">...</mark>
<mark class="alpha warning">...</mark>
<mark class="alpha information">...</mark>
<mark class="alpha light">...</mark>
<mark class="alpha dark">...</mark>

<div class="alpha primary">...</div>
<div class="alpha secondary">...</div>
<div class="alpha success">...</div>
<div class="alpha danger">...</div>
<div class="alpha warning">...</div>
<div class="alpha information">...</div>
<div class="alpha light">...</div>
<div class="alpha dark">...</div>

闪烁状态色

闪烁的报警状态。

组合类名：flash，与常规状态色类名组合使用； 全称类名：flash-primary,flash-secondary,flash-success,flash-danger,flash-warning,flash-information,flash-light,flash-dark。

危险 danger 警告 warning

<mark class="flash danger">...</mark>
<mark class="flash warning">...</mark>

<div class="flash danger">...</div>
<div class="flash warning">...</div>

文本状态色

文本颜色表示不同状态和主次，没有背景色。

组合类名：text，与常规状态色类名组合使用； 全称类名：text-primary,text-secondary,text-success,text-danger,text-warning,text-information,text-light,text-dark。

主要 primary 次要 secondary 成功 success 危险 danger 警告 warning 信息 information 亮 light 暗 dark

<span class="text primary">...</span>
<span class="text secondary">...</span>
<span class="text success">...</span>
<span class="text danger">...</span>
<span class="text warning">...</span>
<span class="text information">...</span>
<span class="text light">...</span>
<span class="text dark">...</span>

悬停与选中

通过组合使用 样式类 hov hover 和 sel selected 可实现悬停效果与选中效果。