Bootstrap—面包屑导航breadcrumb

最新推荐文章于 2025-07-22 06:06:35 发布

原创

最新推荐文章于 2025-07-22 06:06:35 发布 · 4.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Bootstrap #面包屑导航 #breadcrumb

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

面包屑导航是具有层次结构的一种显示方式，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>