W3.CSS Badges (徽章)

2020-12-02 13:43 更新

W3.CSS 仅提供一种徽章类:

定义
w3-badge 圆形黑色徽章

徽章

w3-badge 类创建一个圆形徽章,默认颜色是黑色。

实例

<p>Updates <span class="w3-badge">9</span></p>


尝试一下 »
点击“尝试一下”按钮查看在线实例

彩色徽章

使用 w3-color  类更改徽章的颜色:

实例

<p>新闻 <span class="w3-badge w3-green">6</span></p>

<p>评论 <span class="w3-badge w3-red">8</span></p>


尝试一下 »
点击“尝试一下”按钮查看在线实例

按钮中的徽章

w3-badge 类可以在其他元件内部使用:

实例

<p><button class="w3-btn w3-black">按钮

<span class="w3-badge w3-margin-left w3-white">1</span>

</button></p>

<p><button class="w3-btn w3-red">按钮

<span class="w3-badge w3-margin-left">2</span>

</button></p>


尝试一下 »
点击“尝试一下”按钮查看在线实例

列表中的徽章

实例

<ul class="w3-ul">

  <li><span class="w3-badge">1</span> 吉尔</li>

  <li><span class="w3-badge">2</span> 夏娃</li>

  <li><span class="w3-badge">3</span> 亚当</li>

</ul>


尝试一下 »
点击“尝试一下”按钮查看在线实例

w3-right 类可以将元素浮动到列表右侧。

这非常适合带有徽章的列表:

实例

<ul class="w3-ul w3-border">

  <li>吉尔<span class="w3-badge w3-right w3-margin-right">1</span></li>

  <li>夏娃 <span class="w3-badge w3-right w3-margin-right">2</span></li>

  <li>亚当 <span class="w3-badge w3-right w3-margin-right">3</span></li>

</ul>


尝试一下 »
点击“尝试一下”按钮查看在线实例

表格中的徽章

实例

<tr>

  <td>夏娃</td>

  <td>杰克逊 <span class="w3-badge">1</span></td>

  <td>94</td>

</tr>

<tr>

  <td>亚当</td>

  <td>约翰逊 <span class="w3-badge">2</span></td>

  <td>67</td>

</tr>


尝试一下 »
点击“尝试一下”按钮查看在线实例

徽章的大小

默认情况下,徽章将继承其容器的大小。

w3-size 类(w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo)可以被用来修改徽章的尺寸。

您可能要为大型徽章添加一些额外的填充:

实例

<span class="w3-badge w3-jumbo w3-red">66</span>

<span class="w3-badge w3-jumbo w3-red w3-padding">66</span>


尝试一下 »
点击“尝试一下”按钮查看在线实例

UTF-8 徽章

由于 HTML5 支持 UTF-8 字符集,因此您可以将 Dingbats 用于单个数字的徽章。

实例

<div class="w3-xxlarge">
&#x2776; &#x2777; &#x2778; &#x2779; &#x277A; &#x2785; &#x2786; &#x2787; &#x2788; &#x2789;
</div>
<div class="w3-xxlarge w3-text-red">
&#x2776; &#x2777; &#x2778; &#x2779; &#x277A; &#x2785; &#x2786; &#x2787; &#x2788; &#x2789;
</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例


以上内容是否对您有帮助:

您可能还喜欢:

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号