使用bootstrap实现freeCodeCamp上Build a Personal Portfolio Webpage
bootstrap中标签页插件
HTML
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
</div>
JS
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
bootstrap中滚动监听插件
需要相对定位（relative positioning）
无论何种实现方式，滚动监听都需要被监听的组件是 position: relative; 即相对定位方式。大多数时候是监听 元素。When scrollspying on elements other than the , be sure to have a height set and overflow-y: scroll; applied.
通过 data 属性调用
To easily add scrollspy behavior to your topbar navigation, add data-spy=“scroll” to the element you want to spy on (most typically this would be the ). Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component.
css
body {
position: relative;
}
html
<body data-spy="scroll" data-target="#navbar-example"
最低0.47元/天 解锁文章
717
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
