我想在我的网站左侧创建粘滞侧导航栏。& 我正在使用 Bootstrap 3 RC2。我不知道如何创建它。
3 回答
您需要为侧边栏固定时定义 CSS...
例如,
#sidebar.affix {
position: fixed;
top:25px;
width:228px;
}
这是一个工作示例:http ://bootply.com/73864
由于词缀插件,您所引用的粘性导航栏是可能的。您可以在此查看引导文档。
这个Jsfiddle包含一个有效的粘性侧边栏(使结果窗口更大以使其正常工作)。继续阅读以创建相同的侧边栏。
1. 为您的侧边栏创建 html。对于此示例,我们将在井中使用引导程序 nav-pills。
<div class="row">
<div class="col-sm-3">
<div class="well bs-sidebar affix" id="sidebar">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div> <!--well bs-sidebar affix-->
</div> <!--col-sm-3-->
<div class="col-sm-9">
<p>Main body content goes here</p>
</div> <!--col-sm-9-->
</div> <!--row-->
2.在你的js文件中调用affix插件
$('#sidebar').affix({
offset: {
top: $('header').height()
}
});
您需要用侧边栏上方的任何内容替换“标题”。如果您使用的是引导导航栏并且它位于侧边栏的正上方,请将“header”替换为您用于导航栏的类,例如:
top: $('.navbar navbar-default').height()
3.为词缀类添加css
用于非响应式布局的 CSS
.bs-sidebar.affix {
width: 263px;
top: 25px;
}
用于响应式布局的 CSS
@media (min-width: 768px) {
.bs-sidebar.affix {
width: 158px;
top: 25px;
}
}
@media (min-width: 992px) {
.bs-sidebar.affix {
width: 213px;
position: fixed;
top: 25px;
}
}
@media (min-width: 1200px) {
.bs-sidebar.affix {
width: 263px;
}
}
Twitter 的 Bootstrap 3 的默认导航栏是水平的。它有四种类型,默认、静态顶部和固定顶部和底部,请参见本页示例部分:http: //getbootstrap.com/getting-started
当然,您可以使用 Twitter 的 Bootstrap 3 来构建(左侧)侧导航。请先阅读文档,其中包含许多示例。画出你的想法草图,尝试用示例对其进行编码。在此处提出问题以对代码进行故障排除。可能首先从词缀 ( http://getbootstrap.com/javascript/#affix ) 和导航部分 ( http://getbootstrap.com/components/#nav ) 开始。
也许还检查:如何使画布导航重叠内容引导而不是移动它