Bootstrap实战 - 单页面网站

一、介绍

单页面结构简单、布局清晰，常常用来做手机 App 或者某个产品的下载介绍页面。现在，展示型网页整体趋向于单页网站设计，这样一次性把核心信息展现出来，对于用户来说更加直观和简单，能够快速了解一个产品。

二、知识点

2.1 滚动监听

滚动监听使用了 Bootstrap 的 JavaScript 插件，根据滚动条所处的位置自动更新选中导航栏。

滚动监听一般与导航栏配合使用，这里先引用了带有二级导航的导航栏。并且给导航栏添加样式 navbar-fixed-top 使其固定在顶部不随滚动条移动而移动，但这样的话会遮住 body 上面的一部分内容，所以同时给 body 添加样式 padding-top: 60px。

因为有五个导航，所以下面也要相应的给出五个内容载体。这里唯一需要注意的是每个载体的 id 属性，都要在上面导航的 href="#?" 相对应，不然会看不到效果。

    

        
first
    
    

        
second
    
    

        
third
    
    

        
fourth
    
    

        
Sub-Navigation First
        
Sub-Navigation Second
        
Sub-Navigation Third
    

触发监听依赖