Bootstrap實戰 - 單頁面網站
一、介紹
單頁面結構簡單、佈局清晰，常常用來做手機 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
（完）
GitHub:mazeyqianBlog:blog.mazey.net