【18】Bootstrap — 路径导航

最新推荐文章于 2024-04-15 07:57:18 发布

有心博客

最新推荐文章于 2024-04-15 07:57:18 发布

阅读量2.4k

点赞数

文章标签： bootstrap 导航路径规划

本文链接：https://blog.youkuaiyun.com/qq_32629809/article/details/77863372

版权

在一个带有层次的导航结构中标明当前页面的位置。
各路径间的分隔符已经自动通过 CSS 的 :before 和 content 属性添加了。

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body style="padding-top: 20px;">
        <ol class="breadcrumb">
            <li class="active">Home</li>
        </ol>
        <ol class="breadcrumb">
            <li>
                <a href="#">Home</a>
            </li>
            <li class="active">Library</li>
        </ol>
        <ol class="breadcrumb" style="margin-bottom: 5px;">
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">Library</a>
            </li>
            <li class="active">Data</li>
        </ol>
    </body>
</html>