滚动监听
- 确定滚动所在的元素添加data-spy="scroll"滚动监听的属性一般都在body上
- 使用data-target="#leftmenu"侧边导航栏与滚动的内容建立锚点关系/data-target属性关联导航条
- 设置锚点位置到窗体顶端的距离，这个距离的范围开始监听到这个锚点；data-offset="0" 单位是px，用在含有滚动条的元素上
- 利用class="container来固定宽度布局
- class="row"+class="col-md-4"进行栅格布局
- 设置锚点位置到窗体顶端的距离，这个距离的范围开始监听到这个锚点；data-offset="0" 单位是px，用在含有滚动条的元素上
- 通过data-spy="affix"固定侧边栏的位置
- active激活项目
- panel-danger设置带语境色彩的面板
- panel-heading 简单地向面板添加标题
- panel-title 添加预定义样式的标题
- 最后加入class="panel-body面板主体
<body data-spy="scroll" data-target="#leftmenu">
<div class="container">
<div class="row">
<div class="col-md-4">
<div id="leftmenu">
<<ul class="nav nav-pills nav-stacked" data-offset-top="100" data-spy="affix">
<li class="active">
<a href="#web">WEB前端开发</a>
</li>
<li>
<a href="#php">PHP开发</a>
</li>
<li>
<a href="#asp">Asp.Net开发</a>
</li>
</ul>
</div>
</div>
<div class="col-md-8">
<div class="panel panel-danger">
<div class="panel-heading">
<h3 id="web" class="panel-title">WEB前端开发 </h3>
</div>
<div class="panel-body" style="height: 300px;">
<h3>WEB前端开发</h3>
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 id="php" class="panel-title">PHP开发 </h3>
</div>
<div class="panel-body" style="height: 300px;">
<h3>PHP开发</h3>
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 id="asp" class="panel-title">ASP.NET开发 </h3>
</div>
<div class="panel-body" style="height: 300px;">
<h3>ASP.NET开发</h3>
</div>
</div>
</div>
</div>
</div>