`

Bootstrap组件--面包屑

 
阅读更多
面包屑导航(BreadcrumbNavigation)
这个概念来自童话故事"汉赛尔和格莱特",当汉赛尔和格莱特穿过森林时,不小心迷路了,但是他们发现在沿途走过的地方都撒下了面包屑,让这些面包屑来帮助他们找到回家的路。所以,面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回。

适用范围:
1、层级较深的网站。面包屑导航适合层级较深的网站,如果只有一级分类的话,通过主导航就可以起到快速定位的作用。扁平构架的网站就没有使用面包屑导航。
2、独立不交叉的网站结构,由于面包屑网站导航路径是线性结构的,因此网站内容必须划分的非常清晰,且不存在交叉。

    
     <section id="breadcrumbs">
        <!--下面是一个简单的案例,他可以展示在多个页面上,用以页面之间的跳转。-->
        <div class="bs-docs-example">
            <ul class="breadcrumb">
              <li class="active">首页</li>
            </ul>
            <ul class="breadcrumb">
              <li><a href="#">首页</a> <span class="divider">/</span></li>
              <li class="active">Library</li>
            </ul>
            <ul class="breadcrumb" style="margin-bottom: 5px;">
              <li><a href="#">首页</a> <span class="divider">/</span></li>
              <li><a href="#">Library</a> <span class="divider">/</span></li>
              <li class="active">Data</li>
            </ul>
        </div>
    </section>


http://v2.bootcss.com/components.html#breadcrumbs
分享到:
评论

相关推荐

    laravel-bootstrap-component:Bootstrap Laravel组件

    安装 通过composer安装软件包: composer require nh/bs-component 将此添加到您的packages.json "bootstrap" : "^5.0.0-beta1", "popper.js" : "^1.12", "quill" : "^1.3.6", "flatpickr" : "^4.6.3" ... 面包屑

    Bootstrap CSS组件之面包屑导航(breadcrumb)

    主要为大家详细介绍了Bootstrap CSS组件之面包屑导航(breadcrumb),具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    Bootstrap组件学习之导航、标签、面包屑导航(精品)

    Bootstrap中可用的导航有相似的标记,用基类.nav开头,这是相似的部分。改变修饰类可以改变样式。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=utf-8&gt; &lt;!-- &lt;link rel=stylesheet &gt...

    styled-bootstrap:of Bootstrap的样式化组件实现

    [ ] 面包屑 [ ]按钮 [ ]卡 [ ] 坍方 [ ] 落下 [ ] 形式 [ ]标题 输入组 巨无霸 [ ]清单组 模态 海军 导航栏 [ 分页 约夏克布丁 [ ]进展 滚动式 工具提示 实用工具 [ ]关闭图标 :open_book: 支持...

    组件:Bootstrap Web组件

    表带组件Bootstrap Web组件用法安装strap-components : yarn add strap-componentsnpm i strap-components --save 将CSS添加到您的... 路线图 :cross_mark: 警报 :cross_mark: 徽章 :cross_mark: 面包屑 :hammer: 纽扣

    Bootstrap v2.3.2(Web前端CSS框架)

    Bootstrap v2.3.2(Web前端CSS框架) Bootstrap是Twitter推出的一个开源的用于前端...其中包括以下组件:下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等

    Bootstrap用户手册:设计响应式网站-带书签.pdf

    Bootstrap内置的布局组件3.1 下拉菜单3.2 按钮组3.3 按钮下拉菜单3.4 导航元素3.5 导航条3.6 面包屑式导航3.7 分页导航3.8 标签3.9 圆标签3.10 排版相关的元素3.11 缩略图3.12 警示框3.13 进度条3.14 媒体对象3.15 ...

    bootstrap-ui:CakePHP:透明地使用Bootstrap

    FlashHelper(元素类型: error , info , success , warning ) FormHelper(对齐: default , inline , horizontal ) 面包屑助手HtmlHelper(组件: badge , icon ) PaginatorHelper 小部件( basic , ...

    Bootstrap用户手册

    这本书教你怎么用Bootstrap框架轻松设计出...设计界面及其他网页元素,比如导航、面包屑,以及自定义模态窗口等; 使用jQuery插件实现渐进的幻灯片、标签页式界面和下拉菜单; 在LESS文件中修改布局栏数和字体颜色。

    Bootstrap前端框架 5.0.0 beta1

    #32249:面包屑:简化外观,提高可扩展性;#32277:删除默认的线性渐变;#32280:添加烤面包位置。javascript#28849:辅助功能:为工具提示添加aria标签;#29370:创建基础组件;#31178:将Popper更新到2.x;#31827:...

    Styleguide-starter-kit:带有 Bootstrap Less 组件的入门套件

    风格指南入门套件 一个带有前端开发环境集(Bootstrap、Less、Font Awesome)的入门工具包,以及在样式指南中组织的各种组件。...面包屑 控制板 工具提示 旋转木马 模态 执照 Starter Kit 是在下。

    JavaTMP:使用HTML 5,CSS 3,jQuery,Bootstrap 4和Java构建的JavaTMP Bootstrap管理和仪表板组件模板

    结构合理,固定的导航栏,侧栏,面包屑和页脚栏。 使用Node的npm进行程序包和依赖项管理。 Bower或Yarn不再用于管理Web框架和插件。 使用Gulp自动化构建和开发过程。 使用SASS的SCSS语法生成CSS文件。 将Java

    bootstrap:带模具的Bootstrap的Web组件绑定

    零件状态警报需要测试徽章需要测试面包屑进行中纽扣需要测试按钮组没有开始卡没有开始轮播未开始,未计划下拉菜单未开始,未计划形式没有开始输入组没有开始巨无霸没有开始清单群组没有开始模态未开始,未计划导航...

    bootstrap模版

    Bootstrap中包含了丰富的Web组件如下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等;用户可以对Bootstrap中所有的CSS变量进行修改,依据自己的需求裁剪...

    Shamcey后台系统模板

    首个1.4版免费版,目前其他找到的免费版都是1.2版(而且还是1.2的不完全版) ...Bootstrap组件 下拉菜单 单按钮组 选项卡 分页 进度条 按钮下拉 导航栏 面包屑 标签和徽章 模态窗口,提示 详细的帮助文档

    ASP.NET-Core-MVC-引导标记帮助器:ASP.NET Core MVC引导标记帮助器

    演示: : 该软件包包括用于以下引导程序组件的标记帮助器: 警报徽章面包屑纽扣轮播坍方落下输入值巨无霸标签列表组媒体模态导航栏页头分页面板弹窗进度条标签缩图工具提示好安装创建一个新的ASP .NET Core Web应用...

    Bootstrap基本组件学习笔记之导航(10)

    Bootstrap的导航很有特色,主要分为胶囊式导航、面包屑导航、头部导航共3大类,可以满足绝大部分需求。 0x01 胶囊式导航 胶囊式导航采用的是无序列表ul来实现: &lt;!DOCTYPE html&gt; &lt;html lang="zh-cn"&gt; &lt;...

    bootstrap快速制作后台界面

    图片样式、输入组、折叠菜单panel、面包屑、表格样式、分页组件样式; 下面将跟着项目做出的小例子贴出来: &lt;!DOCTYPE html&gt; &lt;html lang=en&gt; &lt;head&gt; &lt;meta charset=utf-8 /&gt; &lt;meta ...

Global site tag (gtag.js) - Google Analytics