一、介紹
單頁面結構簡單、佈局清晰，常常用來做手機 App 或者某個產品的下載介紹頁面。現在，展示型網頁整體趨向於單頁網站設計，這樣一次性把核心信息展現出來，對於用戶來說更加直觀和簡單，能夠快速瞭解一個產品。
二、知識點
2.1 滾動監聽
滾動監聽使用了 Bootstrap 的 JavaScript 插件，根據滾動條所處的位置自動更新選中導航欄。
滾動監聽一般與導航欄配合使用，這裏先引用了帶有二級導航的導航欄。並且給導航欄添加樣式 navbar-fixed-top 使其固定在頂部不隨滾動條移動而移動，但這樣的話會遮住 body 上面的一部分內容，所以同時給 body 添加樣式 padding-top: 60px。
<!--代碼部分-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="nav-menu">
<div class="container">
<div class="navbar-header">
<!--以下爲固定寫法，用到的時候複製粘貼即可-->
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navigation-collapse">
<span class="sr-only">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>
觸發監聽依賴 <nav> 元素的屬性 id="nav-menu"，滾動監聽的效果是由樣式爲 scrollspy（這裏可以是任意值，只是做個示例）載體在其容器的滾動條變化時，隨着載體的內容在視覺中的變化，其 id 對應的導航欄做出相應的反應。這裏的滾動條對應的是 body 元素，所以給 body 元素加上屬性 data-spy="scroll" 和 data-target="#nav-menu"（這裏的值對應導航的 id 值），同時加上相對定位樣式 position: relative。這時移到最頂部時不能合理定位到第一個導航部分，因爲上面給了 body 元素一個 60px 的內邊距，這裏給 body 元素增加一個屬性 data-offset="60"，使滾動監聽在計算滾動位置是相對於頂部有一個偏移量。示例：<body data-spy="scroll" data-target="#nav-menu" data-offset="60">。
一級導航效果圖：
二級導航效果圖：
2.2 定製
下載的 Bootstrap 源碼雖然經過了壓縮，但是依然有幾百 k 的大小。是否可以去除不需要的 CSS 樣式和 JavaScript 功能呢？Bootstrap 中文網已經提供了這樣的功能。
可以在官網定製頁面設置自己需要的：
- 通用 CSS
- 組件
- JavaScript 組件
- jQuery 插件
例如：滾動監聽只需要導航欄組件，基礎 CSS 樣式和 Scrollspy JavaScript 插件，這裏可以只選擇需要的，其他留空即可。
之前若想改變 Bootstrap CSS 默認屬性的話，要麼在源碼中找出來修改，要麼在自己的 CSS 中寫樣式覆蓋它，例如：.navbar-default { background-color: #EDF4ED; }。在定製頁面中，CSS 樣式不僅可以篩選，還可以改變默認屬性，例如：改變導航欄的背景顏色，直接在屬性 @navbar-default-bg 下面修改即可。
按照自己的想法修改完成之後點擊頁面最下方的【編譯並下載】即大功告成。此時 CSS + JS 大小已經變成了 50k 左右，之後按照常規方法引用就可以了。
三、實戰
使用 Bootstrap 滾動監聽和定製功能製作一個介紹豆瓣 App 的單頁面。
演示地址：https://mazey.cn/bootstrap-blueprints/lesson-fifth-singlepage/index.html，源碼地址：https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-fifth-singlepage。
版權聲明
本博客所有的原創文章，作者皆保留版權。轉載必須包含本聲明，保持本文完整，並以超鏈接形式註明作者後除和本文原始地址：https://blog.mazey.net/2671.html
（完）