一．路径组件

路径组件也叫做面包屑导航。

<ol class="breadcrumb"><li><a href="#">首页</a></li><li><a href="#">产品列表</a></li><li><a href="#">大衣</a></li><li class="active">毛呢大衣</li>
</ol>

二．分页组件

1、基本实例

分页组件可以提供带有展示页面的功能。

<ul class="pagination"><li><a href="#">&laquo;</a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">&raquo;</a></li>
</ul>

2、首选项和禁用

<ul class="pagination"><li><a href="#">&laquo;</a></li><li class="active"><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li class="disabled"><a href="#">5</a></li><li><a href="#">&raquo;</a></li>
</ul>

3、设置尺寸，四种 lg、默认、sm 和 xs

<ul class="pagination pagination-lg">

4、翻页效果

<ul class="pager"> <li><a href="#">上一页</a></li> <li><a href="#">下一页</a></li></ul>

5、对齐翻页链接

<ul class="pager"><li class="previous"><a href="#">上一页</a></li><li class="next"><a href="#">下一页</a></li>
</ul>

6、翻页项禁用

<li class="previous disabled"><a href="#">上一页</a></li>

三．标签

1、在文本后面带上标签

<h3>标签 <span class="label label-default">new</span></h3>

2、不同色调的标签

<h3>标签 <span class="label label-primary">new</span></h3>
<h3>标签 <span class="label label-success">new</span></h3>
<h3>标签 <span class="label label-info">new</span></h3>
<h3>标签 <span class="label label-warning">new</span></h3>
<h3>标签 <span class="label label-danger">new</span></h3>

四．徽章

1、未读信息数量徽章

<a href="#">信息 <span class="badge">10</span></a>

2、按钮中使用徽章

<button class="btn btn-success"> 提交 <span class="badge">3</span></button>

3、激活状态自动适配色调

<ul class="nav nav-pills"><li class="active"><a href="#">首页 <span class="badge">2</span></a></li><li><a href="#">资讯</a></li>
</ul>

转载于:https://www.cnblogs.com/shyroke/p/9184884.html

（八）路径（面包屑导航）分页标签和徽章组件相关推荐

Bootstrap(8) 路径分页标签和徽章组件
一．路径组件路径组件也叫做面包屑导航. //面包屑导航 <ol class="breadcrumb"><li><a href="#&quo ...
后台——侧边和面包屑导航栏设计与实现方案
一.功能描述后台管理系统最重要的功能之一无疑是导航的设计,不管是侧边导航栏还是头部面包屑导航栏,导航与路由如何去匹配是开发人员需要去考虑的问题.点击侧边导航栏的某一项可以跳转到当前页面的路由,头部面 ...
面包屑导航：最佳实践和范例
译文出处:http://www.cogu.cn/archives/65 本文翻译自:http://www.hongkiat.com/blog/breadcrumb-navigation-examine ...
帝国cms面包屑导航修改方式大合集
为了获得更好的收录效果与排名,面包屑导航也成为了我们的一个优化点.但面包屑导航要如何优化呢? 可以优化的方面包括: 面包屑导航newsnav默认效果面包屑导航newsnav标签修改面包屑导航new ...
Vue + ElementUI 动态生成面包屑导航教程
在Web应用程序中,面包屑导航是一种常用的导航方式,它可以帮助用户更好地理解当前页面的位置和层次关系.在Vue项目中,结合ElementUI组件库,我们可以很容易地实现一个动态生成面包屑导航的功能.本 ...
bootstrap中分页、面包屑导航、列表组、卡片、下拉菜单、折叠
分页: 分页功能是当遇到数据很多时,如果都放到一个页面上,那么找起来很不方便,而且不利于性能.此时采用分页功能就能很好的优化用户体验,可是如果自己开发分页功能,那么就会影响开发效率,bootstrap ...
php面包屑导航实现思路,WordPress实现面包屑导航的方法
面包屑导航是一个很基本的功能,当网站结构复杂的时候,面包屑导航可以不让用户迷失方向.WordPress实现面包屑导航无非是安装插件,或者直接写代码.在网上看了不少介绍,有些代码感觉质量不高,插件也有很 ...
react实现汉堡_利用 React 高阶组件实现一个面包屑导航
什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...
MVC 5 + EF6 入门完整教程14 -- 动态生成面包屑导航
MVC 5 + EF6 入门完整教程14 -- 动态生成面包屑导航原文:MVC 5 + EF6 入门完整教程14 -- 动态生成面包屑导航上篇文章我们完成了动态生成多级菜单这个实用组件. 本篇 ...

（八）路径（面包屑导航）分页标签和徽章组件

一．路径组件

二．分页组件

1、基本实例

2、首选项和禁用

3、设置尺寸，四种 lg、默认、sm 和 xs

4、翻页效果

5、对齐翻页链接

6、翻页项禁用

三．标签

1、在文本后面带上标签

2、不同色调的标签

四．徽章

2、按钮中使用徽章

3、激活状态自动适配色调

（八）路径（面包屑导航）分页标签和徽章组件相关推荐

最新文章

热门文章

（八）路径（面包屑导航）分页标签和徽章组件

一．路径组件

二．分页组件

1、基本实例

2、首选项和禁用

3、设置尺寸，四种 lg、默认、sm 和 xs

4、翻页效果

5、对齐翻页链接

6、翻页项禁用

三．标签

1、 在文本后面带上标签

2、不同色调的标签

四．徽章

2、按钮中使用徽章

3、激活状态自动适配色调

（八）路径（面包屑导航）分页标签和徽章组件相关推荐

最新文章

热门文章

1、在文本后面带上标签