BootStrap笔记——附加导航

最新推荐文章于 2024-08-17 08:13:03 发布

-森木-

最新推荐文章于 2024-08-17 08:13:03 发布

阅读量428

点赞数 2

分类专栏： JavaWeb 前端文章标签： bootstrap

本文链接：https://blog.csdn.net/senmu_/article/details/110499535

版权

前端同时被 2 个专栏收录

69 篇文章 0 订阅

订阅专栏

JavaWeb

66 篇文章 0 订阅

订阅专栏

附加导航

锁定在某个位置，不会随着页面其他部分一起滚动
在这里插入图片描述

<style>
/* Custom Styles */
    ul.nav-tabs{
        width: 140px;
        margin-top: 20px;
        border-radius: 4px;
        border: 1px solid #ddd;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
    }
    ul.nav-tabs li{
        margin: 0;
        border-top: 1px solid #ddd;
    }
    ul.nav-tabs li:first-child{
        border-top: none;
    }
    ul.nav-tabs li a{
        margin: 0;
        padding: 8px 16px;
        border-radius: 0;
    }
    ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{
        color: #fff;
        background: #0088cc;
        border: 1px solid #0088cc;
    }
    ul.nav-tabs li:first-child a{
        border-radius: 4px 4px 0 0;
    }
    ul.nav-tabs li:last-child a{
        border-radius: 0 0 4px 4px;
    }
    ul.nav-tabs.affix{
        top: 30px; /* Set the top position of pinned element */
    }
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy">
<div class="container">
   <div class="jumbotron">
        <h1>Bootstrap Affix</h1>
    </div>
    <div class="row">
        <div class="col-xs-3" id="myScrollspy">
            <ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">
                <li class="active"><a href="#section-1">第一部分</a></li>
                <li><a href="#section-2">第二部分</a></li>
                <li><a href="#section-3">第三部分</a></li>
                <li><a href="#section-4">第四部分</a></li>
                <li><a href="#section-5">第五部分</a></li>
            </ul>
        </div>
        <div class="col-xs-9">
            <h2 id="section-1">第一部分</h2>
            <p>内容1</p>
            <hr>
            <h2 id="section-2">第二部分</h2>
            <p>内容2</p>
            <hr>
            <h2 id="section-3">第三部分</h2>
            <p>内容3</p>
            <hr>
            <h2 id="section-4">第四部分</h2>
            <p>内容4</p>
            <hr>
            <h2 id="section-5">第五部分</h2>
            <p>内容5</p>
         </div>
    </div>
</div>