Bootstrap—面包屑导航breadcrumb

最新推荐文章于 2024-07-17 15:36:40 发布

Tiramisu_C

最新推荐文章于 2024-07-17 15:36:40 发布

阅读量4.1k

点赞数 3

分类专栏： Bootstrap Bootstrap学习之路文章标签： Bootstrap 面包屑导航 breadcrumb

本文链接：https://blog.csdn.net/nongweiyilady/article/details/53677432

版权

Bootstrap 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

Bootstrap学习之路

17 篇文章 17 订阅

订阅专栏

什么是面包屑导航，先来看一下效果：

面包屑导航是具有层次结构的一种显示方式，bootrap中通过 .breadcrumb class 的无序列表实现面包屑导航效果，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面包屑导航</title>
    <link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>
    <div class="container">
        <ul class="breadcrumb">
            <li><a href="#">鞋子</a></li>
            <li><a href="#">女鞋</a></li>
            <li><a href="#">高跟鞋</a></li>
        </ul>
    </div>
</body>
</html>

本文参考资料来自：http://www.runoob.com/bootstrap/bootstrap-breadcrumbs.html