Bootstrap入门书籍之（五）导航条、分页导航(3)

它默认是居中显示的，如果我们需要一个居左一个居右显示的话，添加两个样式： previous 让“上一步”按钮居左； next 让“下一步”按钮居右。（同样可以使用 disabled 表示禁用状态）

«上一页 下一页»

其他

标签

在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个“new”标签，来告诉用户。这是新添加的导航项。

在Bootstrap专门将这样的效果提取成为了单独的标签组件。可以使用 这样的行内标签添加 .label 类来控制大小，再使用情景类来控制高亮显示的颜色如： label-default 、 label-danger 等等（在原来笔记中说到过这样的情景类，只不过这里需要加上不同的前缀）

徽章（角标）

其实和上面的标签效果很大一部分是类似的，一般用作信息提示，例如剩余多少未读信息等等，也就是我们常常能在右上角看到的未读信息提示。在Bootstrap中，把这种效果称作为徽章效果，使用 badge 类来实现。

给链接、导航等元素嵌套 元素，可以很醒目的展示新的或未读的信息条目。

Inbox 42 Messages 4

通过查看源码，我们可以发现Bootstrap同样使用 :empty 伪元素，来设置当没有内容的时候隐藏：

.badge:empty { display: none; }

需要注意的是IE8 不支持 :empty 选择符，所以不会默认隐藏；

Bootstrap 中的徽章会适配导航元素的激活状态。

Home 42 Profile Messages 3

关于Bootstrap入门书籍之（五）导航条、分页导航就给大家介绍到这里，希望对大家有所帮助！

您可能感兴趣的文章:

内容版权声明：除非注明，否则皆为本站原创文章。

转载注明出处：https://www.heiqu.com/wgwywg.html