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. HDU 4292Food(网络流的最大流量）

    职务地址:HDU 4292 水题. 因为每一个人仅仅能有1份,所以须要拆点限制流量.建图方法为,建一源点与汇点.将食物与源点相连,权值为食物额数量,将饮料与汇点相连,权值为饮料数量..然后将人进行拆点 ...

  2. uva 1500 - Alice and Bob(论证)

    option=com_onlinejudge&Itemid=8&page=show_problem&problem=4246" target="_blank ...

  3. User、Role、Permission数据库设计ABP

    ABP 初探 之User.Role.Permission数据库设计 (EntityFramework 继承的另一种使用方法) 最近群里(134710707)的朋友都在讨论ABP源码,我把最近学习的内容 ...

  4. MySQL 服务器变量 数据操作DML-视图

    原文:MySQL 服务器变量 数据操作DML-视图 SQL语言的组成部分 常见分类: DDL:数据定义语言 DCL:数据控制语言,如授权 DML:数据操作语言 其它分类: 完整性定义语言: DDL的一 ...

  5. Swift中文教程(二)--简单值

    原文:Swift中文教程(二)--简单值 Swift使用let关键字声明常量,var关键字声明变量.常量无需在编译时指定,但至少要被赋值一次.也就是说,赋值一次多次使用: var myVariable ...

  6. ffmpeg参数具体解释

    a) 通用选项 -L license -h 帮助 -fromats 显示可用的格式,编解码的.协议的... -f fmt 强迫採用格式fmt,如image2.gif -i filename 输入文件 ...

  7. 将程序添加到右键菜单和图标（以记事本、UltraEdit为例）

    原文:将程序添加到右键菜单(以记事本.UltraEdit为例) 如何将程序加入右键菜单,这里分别以记事本.UltraEdit为例! 以记事本程序为例: 1. 在运行中输入regedit,打开注册表,找 ...

  8. asp.net webform生命周期

  9. c# 数据类型转换 as（C# 参考）

    as    运算符类似于强制转换操作.               但是,因此,如果转换是不可能的,as 返回 null 而不引发异常.  请看下面的示例: expression is type ? ...

  10. STL源代码分析——STL算法sort排序算法

    前言 因为在前文的<STL算法剖析>中,源代码剖析许多,不方便学习,也不方便以后复习.这里把这些算法进行归类,对他们单独的源代码剖析进行解说.本文介绍的STL算法中的sort排序算法,SG ...