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. oracle 数据库备份

    //创建临时表空间create temporary tablespace test_temp tempfile 'D:\oracle\data\test\test_temp.dbf' size 32m ...

  2. c#中 ==与equals有什么区别

    对于值类型.引用类型来说比较过程怎样的? using System;using System.Collections.Generic;using System.Text; namespace Cons ...

  3. linux_shell_拆分文件_多进程脚本

    [需求场景]:一个10000w行的文件处理  ,多进程处理  比如启动100个进程同时处理. [方法]:拆分文件(split) ,制作shell脚本  执行后台进程 [demo]: 假设处理程序为   ...

  4. iOS根据获取的月和日星座名称

    /** * 依据月和日的下标获取星座名 * * @param monthIndex 月的下标 * @param dayIndex 日的下标 * * @return 星座名 */ - (NSString ...

  5. C#二维码生成与解码

    [窗体效果图] [程序源代码] using System; using System.Collections.Generic; using System.ComponentModel; using S ...

  6. JS Tree

    jQuery插件实例七:一棵Tree的生成史 在需要表示级联.层级的关系中,Tree作为最直观的表达方式常出现在组织架构.权限选择等层级关系中.典型的表现形试类似于: 一颗树的生成常常包括三个部分:1 ...

  7. java_tomcat_Server at localhost was unable to start within 45 seconds 小喵咪死活启动报错-二

    错误:Server Tomcat v6.0 Server at localhost was unable to start within 45 seconds 错误提示就是我们限定了部署的时间导致的错 ...

  8. javascript系列之核心知识点(一)

    JavaScript. The core. 1.对象 2.原型链 3.构造函数 4.执行上下文堆栈 5.执行上下文 6.变量对象 7.活动对象 8.作用域链 9.闭包 10.this值 11.总结 这 ...

  9. 在面对变化，撇开NO

    参观后转到供应商,看到自己的生产线流水线半自己的钣金生产线举措.这就是我一直想厂提高生产现场的想法,因为通常当我看到工作人员努力工作和繁忙的生产,只见废现场,线解决方式时,有点莫名的兴奋. 幸亏是一家 ...

  10. 在Mac电脑上为Dash制作docSet文档

    Dash是mac上的一款查看API的工具,里面能够直接下载大部分的API文档,可是有时候我们假设想把自己手里已有的文档也集成到Dash中,就须要我们自己动手了,事实上Dash官方也有教程怎样制作doc ...