一、選擇合適的IDE
一般前端開發選用的都是WebStorm、Brackets等，因為本人對VS比較熟悉，索性就拿VS進行練習了，而且VS練習有些好處，就是通過nuget方式獲取BootStrap可以在進行頁面編寫的時候獲得智能提示。我之前使用了Brackets，學習的時候感覺太難，沒有智能提示都不知道寫什么。
目的仿照這個最簡單的做一個頁面出來
二、創建一個網頁
1.創建一個新的web工程，選擇空白就可以
2.使用nuget方式，獲取BootStrap CSS，方式如下
3.安裝完成后，創建一個新的HTML頁面
4.引入剛剛安裝好的bootstrap.min.css文件到index.html文檔，然后就可以開始寫代碼了。
①先在body中添加一個導航。
<nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand">ProjectName</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">首頁</a></li> <li><a href="#">關於</a></li> </ul> </div> </div></nav>
②再添加頁面的主體
<div class="container"> <div class="maincontent"> <h1>人機大戰：李世石投子認輸</h1> <p class="lead">投子認負！圍棋人機大戰首場比賽中，谷歌計算機圍棋程序“阿爾法圍棋”(AlphaGo)執白中盤戰勝韓國棋手李世石。</p> </div> </div>
運行下效果:
頁面效果如下，可以看到頁面的內容被覆蓋住了，調整一下CSS的樣式
在<head>標簽內添加如下CSS樣式：
<style> .maincontent { padding:50px 20px; text-align:center;
} </style>
最后再把，navbar的樣式改成黑色就行了，navbar-default變成navbar-inverse
最終的效果如下：
備注：遇到了一個小問題，就是navbar不是在body當中么，但是我修改body的padding-top為什么只有內容在移動，而nav並沒有移動呢？我在下面找到了答案。(上面的代碼沒有試驗)