ylbtech-Bootstrap-CL:面包屑导航
1.返回顶部
1、

Bootstrap 面包屑导航(Breadcrumbs)

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

Bootstrap 中的面包屑导航(Breadcrumbs)是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS(bootstrap.min.css)中下面所示的 class 自动被添加:

.breadcrumb > li + li:before {
color: #CCCCCC;
content: "/ ";
padding: 0 5px;
}

下面的实例演示了面包屑导航:

实例

<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">2013</a></li>
<li class="active">十一月</li>
</ol>

尝试一下 »

结果如下所示:

2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
11.返回顶部
 
作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

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

  1. 【bootstrap】面包屑导航(Breadcrumbs)

    .breadcrumb > li + li:before { color: #CCCCCC; content: "/ "; padding: 0 5px; } <ol ...

  2. Bootstrap <基础十八>面包屑导航(Breadcrumbs)

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

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

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

  4. Bootstrap面包屑导航

    Bootstrap中提供了面包屑导航的实现方法: 只需要引入bootstrap.css文件即可. 主要引用的样式有: .span6 .breadcrumb 实例代码如下: <!DOCTYPE h ...

  5. Bootstrap——面包屑导航(Breadcrumbs)

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

  6. Bootsrtap 面包屑导航(Breadcrums)

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

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

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

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

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

  9. WordPress 添加面包屑导航

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

随机推荐

  1. Flask 4 拓展

    NOTE 1.Flask被设计为可拓展模式,所以没有提供如数据库和用户认证等重要的功能,允许开发者按需开发. 2.使用Flask-Script支持命令行选项: 安装flask-script: pip ...

  2. Mac adb 安装

    一.下载Android studio https://developer.android.google.cn/studio/ 二.安装 首先移动 弹出下面弹框,直接点击OK 提示无法访问Android ...

  3. Singleton(单例)

    意图: 保证一个类仅有一个实例,并提供一个访问它的全局访问点. 适用性: 当类只能有一个实例而且客户可以从一个众所周知的访问点访问它时. 当这个唯一实例应该是通过子类化可扩展的,并且客户应该无需更改代 ...

  4. Spring Cloud组件

    Spring Cloud Eureka Eureka负责服务的注册于发现,Eureka的角色和 Zookeeper差不多,都是服务的注册和发现,构成Eureka体系的包括:服务注册中心.服务提供者.服 ...

  5. Java中泛型区别以及泛型擦除详解

    一.引言 复习javac的编译过程中的解语法糖的时候看见了泛型擦除中的举例,网上的资料大多比较散各针对性不一,在此做出自己的一些详细且易懂的总结. 二.泛型简介 泛型是JDK 1.5的一项新特性,一种 ...

  6. python学习笔记(六)---sublime text3 创建python项目

    1.创建项目 依次鼠标左键点击Project>Add Folder to Project...,选择test文件夹: 2.保存项目 依次鼠标左键点击Project>Save Project ...

  7. windows下mysql多实例安装

    在学习和开发过程中有时候会用到多个MySQL数据库,比如Master-Slave集群.分库分表,开发阶段在一台机器上安装多个MySQL实例就显得方便不少. 在 MySQL教程-基础篇-1.1-Wind ...

  8. kali linux 2018.2 mysql密码修改后无效,外部无法连接问题。

    kali linux 2018.2 mysql密码修改后无效,外部无法连接问题 Kali Linux 2018.2 默认MySQL数据库是mariadb,可能和MySQL有些细微的变化,只需要做如下处 ...

  9. 20181009-7 选题 Scrum立会报告+燃尽图 06

    Scrum立会报告+燃尽图(06)选题 此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2196 一.小组介绍 组长:刘莹莹 ...

  10. CUDA Samples: matrix multiplication(C = A * B)

    以下CUDA sample是分别用C++和CUDA实现的两矩阵相乘运算code即C= A*B,CUDA中包含了两种核函数的实现方法,第一种方法来自于CUDA Samples\v8.0\0_Simple ...