Amaze UI

mark

记号

基础用法

Copy
<button type="button" class="am-btn am-btn-default am-btn-hollow am-mark">默认样式<sup>1</sup></button>
<button type="button" class="am-btn am-btn-primary am-btn-hollow am-mark">主色按钮<sup>2</sup></button>
<button type="button" class="am-btn am-btn-success am-btn-hollow am-mark">绿色按钮<sup>99+</sup></button>
<button type="button" class="am-btn am-btn-warning am-btn-hollow am-mark">橙色按钮<sup>好的</sup></button>
<button type="button" class="am-btn am-btn-danger am-btn-hollow am-mark">红色按钮<sup>new</sup></button>

添加 .am-mark 到你想添加记号的元素。sup 内添加内容。

在线运行

位置

网站名称1网址创建时间新增
Amaze UIhttp://amazeui.org2012-10-01
Amaze UIhttp://amazeui.org99+2012-10-01
Amaze UIhttp://amazeui.org2012-10-01
Copy
<table class="am-table">
  <thead>
    <tr>
      <th class="am-mark am-mark-around">网站名称<sup>1</sup></th>
      <th>网址</th>
      <th class="am-mark am-mark-around">创建时间<sup>新增</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Amaze UI</td>
      <td>http://amazeui.org</td>
      <td>2012-10-01</td>
    </tr>
    <tr>
      <td>Amaze UI</td>
      <td class="am-mark am-mark-around">http://amazeui.org<sup>99+</sup></td>
      <td>2012-10-01</td>
    </tr>
    <tr>
      <td>Amaze UI</td>
      <td>http://amazeui.org</td>
      <td>2012-10-01</td>
    </tr>
  </tbody>
</table>

添加 am-mark-around 可将记号的位置与元素内文字相对。

在线运行

小红点

Copy
<button type="button" class="am-btn am-btn-default am-btn-hollow am-mark am-mark-active">默认样式<sup></sup></button>
<button type="button" class="am-btn am-btn-primary am-btn-hollow am-mark am-mark-active">主色按钮<sup></sup></button>
<button type="button" class="am-btn am-btn-success am-btn-hollow am-mark am-mark-active">绿色按钮<sup></sup></button>
<button type="button" class="am-btn am-btn-warning am-btn-hollow am-mark am-mark-active">橙色按钮<sup></sup></button>
<button type="button" class="am-btn am-btn-danger am-btn-hollow am-mark am-mark-active">红色按钮<sup></sup></button>

添加 am-mark-active 记号样式变为小红点。

在线运行