Bootstrap实战 – 单页面网站

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

一、介绍

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

二、知识点

2.1 滚动 监听

滚动监听使用了 Bo o ts trap 的 Ja vaScri p t 插件，根据滚动条所处的位置自动更新选中导航栏。

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

&lt;!--代码部分--&gt;
&lt;nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="nav-menu"&gt;
    &lt;div class="container"&gt;
        &lt;div class="navbar-header"&gt;
            <!--以下为固定写法，用到的时候复制粘贴即可--&gt;
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navigation-collapse"&gt;
                <span class="sr-only"&gt;Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">LOGO</a>
        </div>
        <div class="collapse navbar-collapse" id="navigation-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#first">Navigation First</a></li>
                <li><a href="#second">Navigation Second</a></li>
                <li><a href="#third">Navigation Third</a></li>
                <li><a href="#fourth">Navigation Fourth</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        Navigation Fifth <span class="caret"></span>
                        <ul class="dropdown-menu">
                            <li><a href="#sub-first">Sub-Navigation First</a></li>
                            <li><a href="#sub-second">Sub-Navigation Second</a></li>
                            <li><a href="#sub-third">Sub-Navigation Third</a></li>
                        </ul>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

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

<!--代码部分-->
<div class="container-fluid scrollspy">
    <div id="first" class="bg-primary">
        <p>first</p>
    </div>
    <div id="second" class="bg-success">
        <p>second</p>
    </div>
    <div id="third" class="bg-info">
        <p>third</p>
    </div>
    <div id="fourth" class="bg-warning">
        <p>fourth</p>
    </div>
    <div id="fifth" class="bg-danger">
        <p id="sub-first" class="bg-success">Sub-Navigation First</p>
        <p id="sub-second" class="bg-info">Sub-Navigation Second</p>
        <p id="sub-third" class="bg-warning">Sub-Navigation Third</p>
    </div>
</div>