先來大致看看頁面的顯示效果，如圖所示（節選部分）。
這是頁面的首頁：
第一個內容塊：
第二個內容塊：
第三個內容塊的時間軸：
第四個內容塊：
第五個內容塊：
尾部（底部）：
下面來進行具體分析。
整個網頁被我分成了九個部分（行）。下面來簡單說明一下。
1、導航欄（navbar）
整個放在<nav>標籤中。
一行中分爲兩部分，一部分是標題或是logo圖片（.navbar-header），另一部分是菜單選項欄（.navbar-nav）。
隨着頁面滾動，導航欄固定不動（.navbar-fixed-top），並且其背景顏色與首頁背景一致（.navbar-dark）。
這裏是一個響應式導航欄，當窗口小於768px時，會出現一個漢堡按鈕。
因爲我這裏背景色很淺，所以需要設置這個漢堡按鈕的顏色來更好的顯示它。
在這裏使用的是一個類名爲sr-only的<span>和3個類名爲icon-bar的<span>的標籤實現的，也可以考慮使用fontawesome圖標加文字的方式來實現。
存在的問題：窗口縮小，點擊按鈕後，選項的內容出現在最右端而不是最左側。
待實現的效果：從首頁滾動到其他頁面時，導航欄會有一個高度縮小的動畫。
2、頭部（首頁）（masthead）
整個放在<header>標籤中。
該部分包含有兩句歡迎語和一個按鈕。
其中，兩句歡迎語我分別放在了兩個<p>標籤中，也可以考慮使用<hx>標籤。
按鈕使用<a>標籤加上btn類名來實現。
因爲按鈕點擊後跳轉到第一個內容塊，所以將按鈕<a>中的href指向第一個內容塊的id。
添加背景圖片，設置background-image、background-repeat、background-size屬性。
存在的問題：背景圖片隨窗口大小自適應的問題。窗口縮小後，並沒有顯示完整的背景圖。第五個內容塊的背景也存在該問題。
接下來，有5個內容塊，分別對應導航菜單欄中的5個選項。每個內容塊都放在一個<section>標籤中，並且每個內容塊的第一行都包含一個標題和一個副標題，這一行的樣式也一致的。每個內容塊的背景色交替設置。
3、信息（information）
這是第一個內容塊。
分爲了兩行。
在第二行中，分爲了三列，並且每一列都一樣，都是由圖標、小標題和文字內容組成。
關於圖標使用的是font awesome，在這裏是組合使用。
需要使用fa-stack類作爲父類。關於圖標大小和顏色說明一下，fa-stack-1x是正常比例，fa-inverse類可以切換圖標顏色，或者自己使用CSS設置成想要的顏色。
4、項目（project）
這是第二個內容塊。
分爲了兩行。
在第二行中，分爲了六塊相同的內容。每一塊都是由圖片、小標題和一個簡短信息組成。
關於圖片，考慮到響應式，添加一個img-responsive類。
同時，這裏存在着動畫效果。當鼠標滑到圖片上時會出現一個遮罩，移開時就消失；當鼠標點擊後進入一個模態框。
1）關於遮罩的實現
- 遮罩使用絕對定位。
- 遮罩的長、寬要與圖片的大小一致，考慮到窗口大小會變化，最好使用百分數來表示。
- 首先，我將width和height都設爲100%後，出現了一個問題，就是縮小窗口後，遮罩的寬度多寬。但是我給
<img>的父元素<a>設置了一個max-width屬性便解決了這個問題。 - 鼠標未滑到圖片上時，遮罩透明度opacity爲0；當滑到（懸停）時，opacity爲1。
- 遮罩出現的效果動畫通過設置transition屬性。
2）鼠標點擊後出現的彈框——模態框
模態框中包含有標題、副標題、圖片、文字、列表信息和關閉按鈕這些內容。
出現的問題：模態框的大小設置。通過設置width: 100%; display:inline-block;解決了寬度沒有覆蓋整個窗口的問題，但是高度沒有解決。
5、文章（article）
這是第三個內容塊。
分爲了兩行。
在第二行中，顯示的是一個按時間軸形式的文章列表。
每一個圖片加文字的佈局如下代碼所示：
<div>
<div><!-- 圖片 -->
<img src="#">
</div>
<div><!-- 文字 -->
<div><!-- 時間+標題 -->
<h3>Time</h3>
<h3>TiTle</h3>
</div>
<div><!-- 概述 -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
</div>
</div>
</div>圖片之間的連線用僞元素before/after實現。
當窗口大於768px時，圖片居中，文字內容左右交替顯示；當窗口小於768px時，圖片全部排在左側，文字在右側顯示。所以使用了@media分屏幕大小來設置樣式。
存在的問題：當窗口縮到更小時，文字和圖片會重疊。
6、關於（about）
這是第四個內容塊。
分爲了三行。
第二行，分爲了三個相同的列。每一列由圖片、名字、職位和三個小圖標組成。
第三行是一段文字，並且居中顯示。在這裏添加了類col-lg-8，說明佔了8列，爲了讓其居中顯示，可以添加類col-lg-offset-2右移兩列來實現。
7、圖標（logo）
整個放在一個<section>標籤中。
只有一行，由四張圖片組成。
在這裏，因爲放置的圖片大小不一致，但是爲了不顯得突兀，我將整個div的背景色設置爲與logo圖片背景色一樣的顏色。
8、聯繫（contact）
這是第五個內容塊。
分爲了兩行。
在第二行中是一個form表單。
左側是三個<input>標籤，用於填寫name、email、phone的內容；
右側是一個<textarea>文本標籤，用於填寫一些message。
在底部還有一個提交按鈕。
9、底部（footer）
整個放在<footer>標籤中。
只有一行，分爲了三列。包含的內容分別是版權、圖標和其他鏈接。
最後，使用JS和jQuery來添加一些動畫效果。
1、點擊導航欄菜單選項後滾動到相應頁面
首先，將菜單選項的<a>標籤中的href指向需要跳轉的相應頁面，這樣點擊之後就實現了跳轉。
接下來實現滾動的效果。
使用offset()獲取匹配元素在當前視口的相對偏移，這個方法會返回top和left兩個值，在這裏，我們只需要top值。
我們將對應的5內容塊的偏移距離保存在一個數組中，然後獲取點擊選項的索引值找到對應的偏移地址。
使用delegate()方法爲指定的元素添加一個或多個事件處理程序（在此處是點擊事件），並規定這些事件發生時運行的函數（在此處是滾動到相應頁面）。
在添加/移除樣式時，使用lis[n].children()來獲取子元素時，會報錯。這是因爲lis表示的是獲取的<li>標籤的一個數組，此時的它已經沒有子元素了。但是可以直接使用$(this)來獲取當前點擊的元素。
2、點擊首頁的more按鈕滾動到第一個內容塊頁面
爲了方便，給第一個選項的<a>標籤添加一個first類。獲取該元素併爲該元素添加一個on類（高亮顯示），然後爲其父元素的同輩元素的所有子元素移除on類（移除高亮顯示）。
3、滾動條改變導航欄元素效果
將滾動條滾動的距離和內容塊頁面偏移頂部的距離進行比較，來判斷當前顯示頁面，從而爲相應選項進行高亮顯示。
整個頁面還存在很多不足之處，希望各位批評指正，謝謝！^_^
源碼在github上的地址：https://github.com/FanXuanyi/BootstrapPage.git