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 1754 I Hate It （段树 &amp; 树阵）

    I Hate It Time Limit: 9000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...

  2. 我的MYSQL学习心得（二）

    原文:我的MYSQL学习心得(二) 我的MYSQL学习心得(二) 我的MYSQL学习心得(一) 我的MYSQL学习心得(三) 我的MYSQL学习心得(四) 我的MYSQL学习心得(五) 我的MYSQL ...

  3. 他们控制的定义--让背景颜色变化ViewPager逐步幻灯片

    转载请注明出处.谢谢~ 今天想说一个简单但很好的效果达到.代码是绝对简单,达到绝对easy,就是你可能想不到而已. 不多说,上效果图. 第一个效果是仿最美应用的滑动颜色变化,第二个是我项目中要用的效果 ...

  4. Server Tomcat v7.0 Server at localhost was unable to start within 45 seconds解

    产生了一个解决这个问题的方法是在项目部署到tomcat比长45第二,当项目是比较大的,框架复杂的问题经常发生. 解决方法非常easy,找到以下这个路径中 workspace\.metadata\.pl ...

  5. Atitit.软件GUIbutton与仪表盘--db数据库区--导入mysql sql错误的解决之道

    Atitit.软件GUIbutton与仪表盘--db数据库区--导入mysql sql错误的解决之道 Keyword::截取文本文件后部分 查看提示max_allowed_packet限制 Targe ...

  6. 工作笔记3.手把手教你搭建SSH(struts2+hibernate+spring)环境

    上文中我们介绍<工作笔记2.软件开发经常使用工具> 从今天開始本文将教大家怎样进行开发?本文以搭建SSH(struts2+hibernate+spring)框架为例,共分为3步: 1)3个 ...

  7. HHVM Installation and Configuration(HHVM 安装及配置)

    Installation and Configuration¶ General Installation Considerations Installation on Linux systems Ub ...

  8. 《全体育&#183;瑜伽》

    今天出去吃饭,本来是想买<印象>创刊号的,结果没找着,看到一本<瑜伽>创刊号.作为一个伪瑜伽爱好者,我掏了20元大洋买了一本,你知道如今的时尚杂志都非常坏,用塑料膜封着,不能翻 ...

  9. Cocos2d-x3.0 TestCPP文件夹的注意事项

    1.不多说了,重力加速度. 2.ActionMangerTest:此Test它是由导演来展示,以获得集体诉讼经理ActionManager类别,操作控制节点. ①CrashTest:破坏demo,毁. ...

  10. Hibernat之关系的处理多对多

    第一步:编写两个pojo,比如一个学生表一个课程表  这里使用注解. 需要 课程表: package com.qcf.pox; import java.util.HashSet; import jav ...