找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
网推大家坛 新闻 网站推广 网站技术 查看内容

标签和微章移动和PC端分别介绍

2017-3-23 21:01| 发布者: ppdz| 查看: 33| 评论: 0

简介:标签和徽章这两个效果暂且这样称呼。在Web项目导航栏中我们经常遇到这种情况,比如某个导航条在后期的更新中新增了一个菜单项,这个时候我们需要使用一个标识来提示这个菜单项是新增的,我们通常会使用“new”或者“ ...

标签和徽章这两个效果暂且这样称呼。在Web项目导航栏中我们经常遇到这种情况,比如某个导航条在后期的更新中新增了一个菜单项,这个时候我们需要使用一个标识来提示这个菜单项是新增的,我们通常会使用“new”或者“hot”这样的小图标来提示。Bootstrap中提供了一个简单的样式来实现类似的效果,代码如下:

上述代码中的“地图”菜单使用了标签,可以突出显示这一项为“New”,其中使用了class="label label-default"样式类,页面效果如图所示。

上面使用的样式类中我们看到了class="label label-default",它和按钮的样式似曾相识,Bootstrap提供了6种不同样式类。

label-deafult:默认标签,深灰色。

label-primary:主要标签,深蓝色。

label-success:成功标签,绿色。

label-info:信息标签,浅蓝色。

label-warning:警告标签,橙色。

label-danger:错误标签,红色。

下面的代码中罗列了所有的样式使用方式

上述代码运行效果如下

在手机应用中我们经常看到一个列表在右侧有一个数字的提示,表示消息未读或者已读,以及有多少消息未读数等。徽章的使用和上面提到的标签使用方式类似,在Bootstrap中我们只需使用class="badge"即可快速实现该效果。下面的代码中首页菜单项使用了徽章效果,我们添加了一个<span>标签,然后提示一个5。

上述代码运行效果如下

上图所示效果是在宽屏(大于768px)的时候显示的效果,这种效果在移动设备上显示效果更佳。在移动设备上我们看到导航中这个数字显示在最右侧,这里我们只需要使用class="pull-right"即可。下面代码使用了一个反色导航条,并且使用了响应式效果,在菜单“图片”、“地图”上新增了class="pull-right"。

上述代码运行效果如下

收藏 分享 邀请
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋

看过本文的人还看过

已有 0 人参与

会员评论

推荐阅读

返回顶部