当前位置 : 主页 > 网页制作 > Bootstarp >

Bootstrap 路径导航breadcrumb

来源:互联网 收集:自由互联 发布时间:2021-06-12
! DOCTYPE html html lang ="en" head meta charset ="UTF-8" title 路径导航breadcrumb / title !-- breadcrumb(约定俗成,且可被搜索引擎爬到) suriouc: "汉赛尔和格莱特" === 格林童话 很久很久以前,在大森林的边上
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路径导航breadcrumb</title>
    <!-- 

    breadcrumb(约定俗成,且可被搜索引擎爬到)

    suriouc:    "汉赛尔和格莱特" ===> <格林童话> 

        很久很久以前,在大森林的边上住着一个贫穷的樵夫,他与妻子和两个孩子相依为命。
        他的儿子名叫汉赛尔,女儿名叫格莱特。
        后来樵夫的妻子去世了,他又给孩子们娶了一个后母。后母计划把两个孩子带到森林的深处,然后趁他们睡着的时候跑掉。
        汉赛尔无意中知道了后母的计划,于是偷偷地把一块面包藏在了口袋里。在去森林的路上,汉赛尔悄悄地捏碎了他的面包,并不时地停下脚步,把碎面包屑撒在路上。
        后母顺利地趁孩子们睡着的时候溜掉了,汉赛尔和格莱特醒来已是一片漆黑。汉赛尔安慰他的妹妹说:“等太阳一出来,我们就看得见我撒在地上的面包屑了,它一定会指给我们回家的路。”
        但是当太阳升起来时,他们在地上却怎么也找不到一点面包屑了,原来它们都被那些在树林里、田野上飞来飞去的鸟儿一点点地啄食了,兄妹俩在森林中迷了路。
        不停的寻路,让他们饥饿难忍,腿脚无力,来到了一个用面包做屋顶,糖果做窗户的小屋。饥饿让他们忘记了疲惫,及潜在的危险,啃起了屋子。
        结果在巫婆的诱骗下,哥哥被锁屋中,妹妹被迫做劳力,就在巫婆要吃掉哥哥之时,妹妹借向巫婆学习添柴之机。将巫婆推入炉中,兄妹俩带着巫婆的财宝,回到了家中。
        后母己经去世,兄妹俩和父亲一起过上了幸福的生活。

     -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

</head>
<body>
    <div class="container">
        <div class="row">
            <ol class="breadcrumb">
                <!-- breadcrumb路径导航使用ol块,li做子路径. -->
                <li><a href="javascript:;">HOME</a></li>
                <li><a href="javascript:;">CONTENT</a></li>
                <li class="active">GOODS</li>
                <!-- 路径导航的设置:当前路径下为active,且不需要a链接;
                    向上路径需要a链接用于快速切换.
                 -->
            </ol>
        </div>
    </div>
</body>
</html>
上一篇:Bootstrap分页查询
下一篇:element-ui
网友评论