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. redis安装和配置教程phpredis扩展安装测试

    作者:zhanhailiang 日期:2014-10-16 推荐阅读: Redis持久化策略 关于Redis很多其它资料阅读 1. 下载redis-2.8.17.tar.gz:http://downl ...

  2. Android Activity和Fragment生命周期图

  3. windows和linux在建筑python集成开发环境IDE

    http://blog.csdn.net/pipisorry/article/details/39854707 使用的系统及软件 Ubuntu / windows Python 2.7 / pytho ...

  4. 如何构建高性能web网站：分布式缓存

    一.数据库前端缓冲区 要清除数据库前缓冲区,首先必须明确什么是文件系统的内核缓冲区(Buffer Area):它位于内核的物理内存地址空间,除了使用O_DIRECT比其他标签中打开文件,所有的磁盘的读 ...

  5. hdu Diophantus of Alexandria（素数的筛选+分解）

    Description Diophantus of Alexandria was an egypt mathematician living in Alexandria. He was one of ...

  6. Quartz.Net任务统一调度框架

    山寨版Quartz.Net任务统一调度框架   TaskScheduler 在日常工作中,大家都会经常遇到Win服务,在我工作的这些年中一直在使用Quartz.Net这个任务统一调度框架,也非常好用, ...

  7. python test0729.py

    #!/usr/env python #-*- coding: utf-8 -*- import urllib import urllib2 import random import requests ...

  8. uva 11987 Almost Union-Find （并检查集合）

    标题效果: 三操作. 1. 合并两个集合 2.代替所述第二组的第一个元素 3.输出设置数量,并.. IDEAS: 使用p该元素的记录数,其中集合,建立并查集. #include <cstdio& ...

  9. 【高德地图API】从零开始学高德JS API（六）——坐标转换

    原文:[高德地图API]从零开始学高德JS API(六)——坐标转换 摘要:如何从GPS转到谷歌?如何从百度转到高德?这些都是小case.我们还提供,如何将基站cell_id转换为GPS坐标? --- ...

  10. Android MediaPlayer 和 NativePlayer 播放格式控制

    对于本机MediaPlayer 支持格型式试验: 对于原生 NativeMedia 的支持格式測试: 这个支持就比較失望了,眼下測试的手机仅仅支持 H.264视频及AAC音频,其他的格式都不支持. 使 ...