9种不同的面包屑和分布式多步骤导航
2017-02-21 08:45
417 查看
【常用面包屑】9种不同的面包屑和分布式多步骤导航
![](http://dl2.iteye.com/upload/attachment/0123/2112/f9ea5117-6929-3618-a564-6eb15a8e0590.jpg)
实例代码
运行一下
下载地址
![](http://dl2.iteye.com/upload/attachment/0123/2112/f9ea5117-6929-3618-a564-6eb15a8e0590.jpg)
实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>9种不同的面包屑和分布式多步骤导航</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> <link rel="stylesheet" href="/api/jq/1/css/style.css"/> <script src="/api/jq/1/js/modernizr.js"></script> </head> <body> <div class="container"> <div class="demo"> <p>1、基本面包屑</p> <nav> <ol class="cd-breadcrumb"> <li><a href="#">首页</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">PHP</a></li> <li class="current"><a href="#">模板</a></li> </ol> </nav> <p>2、自定义分隔符面包屑</p> <nav> <ol class="cd-breadcrumb custom-separator"> <li><a href="#">首页</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">PHP</a></li> <li class="current"><a href="#">模板</a></li> </ol> </nav> <p>3、自定义图标面包屑</p> <nav> <ol class="cd-breadcrumb custom-separator custom-icons"> <li><a href="#">首页</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">PHP</a></li> <li class="current"><a href="#">模板</a></li> </ol> </nav> <p>4、三角箭头面包屑</p> <nav> <ol class="cd-breadcrumb triangle"> <li><a href="#">首页</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">PHP</a></li> <li class="current"><a href="#">模板</a></li> </ol> </nav> <p>5、三角箭头带图标面包屑</p> <nav> <ol class="cd-breadcrumb triangle custom-icons"> <li><a href="#">首页</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">PHP</a></li> <li class="current"><a href="#">模板</a></li> </ol> </nav> <p>6、基本分步指示</p> <nav> <ol class="cd-multi-steps text-center"> <li class="visited"><a href="#0">购物车</a></li> <li class="visited" ><a href="#0">结算付款</a></li> <li class="current"><em>送货</em></li> <li><em>验货收货</em></li> </ol> </nav> <p>7、自定义图标分步指示</p> <nav> <ol class="cd-multi-steps text-center custom-icons"> <li class="visited"><a href="#0">购物车</a></li> <li class="visited" ><a href="#0">结算付款</a></li> <li class="current"><em>送货</em></li> <li><em>验货收货</em></li> </ol> </nav> <p>8、圆点分步指示</p> <nav> <ol class="cd-multi-steps text-top"> <li class="visited"><a href="#0">购物车</a></li> <li class="visited" ><a href="#0">结算付款</a></li> <li class="current"><em>送货</em></li> <li><em>验货收货</em></li> </ol> </nav> <p>9、带数字的圆点分步指示</p> <nav> <ol class="cd-multi-steps text-bottom count"> <li class="visited"><a href="#0">购物车</a></li> <li class="visited" ><a href="#0">结算付款</a></li> <li class="current"><em>送货</em></li> <li><em>验货收货</em></li> </ol> </nav> </div> </div> </body> </html>
运行一下
下载地址
相关文章推荐
- 基于JS实现9种不同的面包屑和分布式多步骤导航效果
- BootStrap--CSS组件--面包屑导航(breadcrumb)
- jquery 面包屑导航
- 利用WhiteHose一步步建立分布式系统的框架(四)--创建AD步骤(定义AD的第二部分)
- redis3.0.2 分布式集群安装详细步骤
- EJB2.x和EJB3.0开发步骤的不同之处
- hadoop+zookeeper+yarn搭建高可用完全分布式环境详细步骤
- phpcms v9 当前位置 面包屑导航修改代码在哪里?
- 分享5款不同的多级导航切换DIV的jQuery特效
- php可应用于面包屑导航的迭代寻找家谱树实现方法
- hadoop-2.6.0伪分布式安装详细步骤
- drupal 菜单导航加上当前分类,drupal 面包屑breadcrumb重新定义
- 华为路由器与CISCO路由器的不同配置步骤
- Bootstrap 面包屑导航(Breadcrumbs)
- cisco思科开启dhcp,不同vlan确保全网互通(详细步骤)
- 配置多个站点地图,为不同页面添加不同的站点导航
- PHP实现面包屑导航
- MVC 5 + EF6 入门完整教程14 -- 动态生成面包屑导航
- hadoop2伪分布式安装步骤
- javascript 小知识(技巧、方法) ---面包屑导航 文字上下滚动