Bootstrap组件--面包屑

面包屑导航：指引网站迷途之人的高效设计

最新推荐文章于 2024-08-27 21:37:49 发布

原创最新推荐文章于 2024-08-27 21:37:49 发布 · 339 阅读

0 ·

CC 4.0 BY-SA版权

Bootstrap 专栏收录该内容

15 篇文章

订阅专栏

本文深入解析面包屑导航的概念及其在复杂网站架构中的应用价值，详细介绍了其在层级深邃网站上的重要作用，以及如何在独立不交叉的网站结构中巧妙运用。通过提供实际案例，展示如何在不同页面间实现便捷跳转，确保用户始终知晓自身位置，轻松找回方向。

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

适用范围：
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>