子比主题：给导航栏菜单添加样式徽标

前言

最近在使用子比主题时，需要给导航栏按钮添加样式，添加徽标。

实现方式

<!-- badge标签即为徽章 支持多项Class --> 主题购买<badge>折扣</badge> 
网站建设<badge class="jb-yellow">NEW</badge> 
最新优惠<badge class="badge-bw jb-vip2"><i>VIP</i></badge> 
特惠资源<badge class="c-blue-2">NEW</badge> 
示例页面<badge class="jb-red badge-bw">99</badge> 
发布文章<badge class="b-blue"></badge> 
友情链接<badge class="jb-green">+1</badge> 
<!-- 徽章内也支持图标代码 -->

子比主题官方支持的 class 列表

class	样式	class	样式	class	样式
c-red	红色文字	b-theme	主题背景色	jb-red	渐变红色背景
c-yellow	橙色文字	b-red	红色背景	jb-yellow	渐变橙色背景
c-blue	蓝色文字	b-yellow	橙色背景	jb-blue	渐变蓝色背景
c-blue-2	深蓝色文字	b-blue	蓝色背景	jb-green	渐变绿色背景
c-green	绿色文字	b-green	深蓝色背景	jb-purple	渐变紫色背景
c-purple	紫色文字	b-purple	紫色背景	jb-vip1	渐变金色背景
				jb-vip2	渐变黑色背景

当然如果这些class的样式还满足不了你，你还可以直接添加style代码哦！

同时 badge 徽章的内容也是支持自定义图标的，例如你可以试试这句代码：

<!-- 图标徽章示例 -->
特惠资源<badge class="c-blue-2"><i class="fa fa-bolt"></i></badge>

前言

实现方式

相关推荐

评论