Bootstrap组件联动
锚点与滚动条联动的实现
撰写时间:2018-09-26 撰写人:陈琪
实现思想
- 将菜单栏(锚点)与内容通过
id
绑定 - 菜单栏样式与内容的样式设置
- 锚点及锚点内容与滚动条事件双向绑定
菜单栏与内容绑定
- 菜单栏使用
nav
标签实现 - 在
nav
标签中使用ul
列表属性 - 菜单栏中使用
href=#id
此id
与内容标题的id
相同,并实现绑定 - 内容中标题使用
<h2>
,段落使用p
栅格系统的分布
<div class="container">
<div class="row">
<div class="col-md-3"> # 菜单栏所占栅格系统宽度
</div>
<div class="col-md-9"> # 右侧内容所占栅格系统宽度
</div>
</div>
</div>
菜单栏样式与内容的样式设置
菜单栏样式设置
菜单栏处于激活状态的样式设置
.icl-docs-sidebar .nav>li>.active,
.icl-docs-sidebar .nav