Bootstrap中提供了面包屑导航的实现方法:

只需要引入bootstrap.css文件即可.

主要引用的样式有:

.span6

.breadcrumb

实例代码如下:

<!DOCTYPE html>

<html>

<meta charset="utf-8">

<head>

    <title>bootstrap面包屑导航</title>

    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">

</head>    

<body>

    <div class="container">

        <h2>我是面包屑导航的例子</h2>

        <div class="row">

            <div class="span6">

                <ul class="breadcrumb">

                    <li>

                        <a href="#">首页</a><span class="divider">></span>

                    </li>

                    <li>

                        <a href="#">耳机页面</a><span class="divider">></span>

                    </li>

                    <li class="active">

                        详细页面

                    </li>

                </ul>

            </div>

        </div>

    </div>

</body>

</html>

效果如图:

是不是很简约?

Bootstrap面包屑导航的更多相关文章

  1. Bootstrap——面包屑导航（Breadcrumbs）

    面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式. Bootstrap 中的面包屑导航(Breadcrumbs)是一个简单的带有 .breadcrumb 类的无序列表. <o ...

  2. WordPress的Bootstrap面包屑导航

    <ol class="breadcrumb"> 当前位置: <li><a href="<?php bloginfo('url'); ? ...

  3. Bootstrap-CL：面包屑导航

    ylbtech-Bootstrap-CL:面包屑导航 1.返回顶部 1. Bootstrap 面包屑导航(Breadcrumbs) 面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式 ...

  4. Bootsrtap 面包屑导航(Breadcrums)

    Bootstrap面包屑导航是一种基于网站层次信息显示的方式.以博客为例,面包屑导航可以显示发布日期,类别或标签,它们表示当前页面在导航层次结构内的位置. Bootstrap面包屑导航其实是一个简单的 ...

  5. Bootstrap <基础十八>面包屑导航（Breadcrumbs）

    面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航( ...

  6. Bootstrap (导航、标签、面包屑导航)

    导航 Bootstrap中可用的导航有相似的标记,用基类.nav开头,这是相似的部分.改变修饰类可以改变样式. <!DOCTYPE html> <html> <head& ...

  7. 学习使用 CSS3 制作网站面包屑导航效果

    作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...

  8. NEC学习 ---- 模块 -多行式面包屑导航

    如上面形式面包屑的写法: HTML如下, <div class="m-crumb"> <ul class="f-cb"> <li& ...

  9. WordPress 添加面包屑导航

    所谓面包屑,就是类似这种:首页 > 公司简介 > 发展历史 展示网站树型结构,并让网站访问者随时知道自己所处的位置,方便返回上几级. 将下面的代码添加到主题的 functions.php ...

随机推荐

  1. JavaScript之函数作用域

    有过类似C语言编程经验的同学应该都知道“块级作用域(block scope)”:花括号内的每一段代码都具有各自的作用域,而且在声明它们的代码段之外是不可见的.而在JavaScript中是没有块级作用域 ...

  2. 微信JS-SDK“分享信息设置”API及数字签名生成方法（NodeJS版本）

    原文:微信JS-SDK"分享信息设置"API及数字签名生成方法(NodeJS版本) 先上测试地址以示成功: 用微信打开下面地址测试 http://game.4gshu.com/de ...

  3. C#中反射的概念及其使用（转）

    提纲:1. 什么是反射2. 命名空间与装配件的关系3. 运行期得到类型信息有什么用4. 如何使用反射获取类型5. 如何根据类型来动态创建对象6. 如何获取方法以及动态调用方法7. 动态创建委托 1.什 ...

  4. C# 反射技术应用

    反射(Reflection)是.NET中的重要机制,通过放射,可以在运行时获得.NET中每一个类型(包括类.结构.委托.接口和枚举等)的成员,包括方法.属性.事件,以及构造函数等.还可以获得每个成员的 ...

  5. 处理器（CPU）调度问题

     因为处理器是最重要的计算机资源,提高利用率并提高系统性能的处理器(吞吐量.响应时间).于处理机调度性能的好坏,因而,处理机调度便成为操作系统设计的中心问题之中的一个. 一.处理机调度的层次 1. ...

  6. hardware_hp刀片服务器安装windows 2008系统配置

    2012年10月26日星期五 第一步. 看刀片机柜的后的OA地址 点击 OK 查看 Actlve OA 例如: 192.168.254.31 l 第二步: 连接PC 到左侧第一个接口 修改本机ip为同 ...

  7. 用fildder 查看loveuv 刷流量时通信的数据

    loveuv是一个用来刷网页流量的站点,以下介绍怎么查看它刷流量时数据的传输 首先是注冊页面,邀请码UBMNEY 注冊账号登陆后,在账户资料页面http://www.loveuv.com/user/m ...

  8. hdu3689（kmp+dp）

    题意:问随机生成一个长度为m(m<=1000)长度的字符串,出现某个子串s的概率是多少. 解法:dp+kmp优化.ans[i][j]表示i长度,走到了s的j位置的概率,当然这是在i之前没有出现s ...

  9. 浅谈 js 正则之 test 方法

    原文:浅谈 js 正则之 test 方法 其实我很少用这个,所以之前一直没注意这个问题,自从落叶那厮写了个变态的测试我才去看了下这东西.先来看个东西吧. var re = /\d/; console. ...

  10. hdu(2062)-Subset sequence 组合数学

    意甲冠军:查找集合{1,2,3...n}第一m一个排列子. 收集的线索所行的大小. 例两个元素的排列子集合按字典树排列是:{1},{1,2},{2},{2,1}: 解法:一个一个元素来确定,每次把剩余 ...