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

小何 • • 后端技术 • 18 阅读

前言

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

实现方式

<!-- 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>

版权声明：
作者：小何
链接：https://blog.chiyuba.com/houduanjishu/625.html
来源：小何博客
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
打赏
< <上一篇
下一篇>>
文章目录
关闭
目 录