给导航菜单添加自定义徽章及多种样式菜单设置方法

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

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

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

按钮样式

<!-- 按钮风格的菜单 -->
<span class="but jb-red">主题购买</span>
<span class="but c-blue">网站建设</span>
<span class="but c-yellow">科技资讯</span>
<span class="but b-purple radius">最新优惠</span><badge><i>VIP</i></badge>
<span class="but jb-vip2 radius">特惠资源</span><badge class="jb-red"><i class="fa fa-bolt"></i></badge>

1. 将菜单的文字用span标签包围
2. class仍然可以使用上面表格中的颜色、背景色class
3. 最重要的就是class多了一个but，没错，这个就是代表按钮的 class
4. class再增加一个radius，即可显示为两边圆角

到这里，整个教程就结束了！赶紧试一试，让您的网站导航菜单也变得丰富多彩吧！

温馨提示：
以上的class以及badge徽章是可以运用在整个网站的自定义代码位置的，比如主题设置的很多地方都是支持自定义代码的
另外，使用自定义Html代码请一定要注意标签闭合！代码使用不当还会引起网站显示错误！