Bootstrap组件联动

Bootstrap组件联动

锚点与滚动条联动的实现

撰写时间：2018-09-26 撰写人：陈琪

实现思想

1. 将菜单栏(锚点)与内容通过id绑定
2. 菜单栏样式与内容的样式设置
3. 锚点及锚点内容与滚动条事件双向绑定

菜单栏与内容绑定

• 菜单栏使用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