bootstrap的大屏幕和页面类附加导航

最新推荐文章于 2022-09-05 11:12:21 发布

b84615814

最新推荐文章于 2022-09-05 11:12:21 发布

阅读量231

点赞数

分类专栏：前端学习html+css 文章标签： css

本文链接：https://blog.csdn.net/b84615814/article/details/84710707

版权

前端学习html+css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

大屏幕：

<div class="container">
<div class="jumbotron">
<h1>Bootstrap Affix</h1>
</div>
</div>

附加导航：
<div class="row">
<div class="col-xs-3">
<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>

样式表：
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 */
}

延伸：ul的阴影
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);