利用angular cli與bootstrap製作簡單的網頁，本人小白一個，大牛看到可忽略。不喜勿噴！
大大大前提：基本工具要備好
先在電腦上裝一個linux系統，我裝的是Ubuntu 14.04，裝完系統後你首先要下一個搜狗輸入法；安裝sublime text以及需要的插件；其次你得裝個Google瀏覽器，npm，node，angualr cli，bootstrap
以下開始做實驗：
1創建項目my-app，利用sublime text來打開。
在終端打上命令:
$ ng new my-app
創建成功後，再運行項目：
$ ng serve
在終端上敲上subl，然後將項目文件夾拖進去
2在app.component.html上編輯html5，確認網頁的組成部分
提示：此處弄的只是靜態網頁！
在對一個網頁編輯之前，需要知道你想要做的網頁由幾部分構成，然後針對對象來寫代碼。
例如：我想要做的網頁由側邊欄，底部，正文組成，實現基本功能：
1側邊欄的點贊，分享
2底部的輪播，點贊，分享，收藏，評論，返回頂部
如果你還有能力，可以弄導航，動態動畫嵌入等一些....
然後開始在app.component.html 上寫代碼。
3編輯中遇到的問題及解決方法
a、實現側邊欄的點贊收藏功能
調用bootstrap中的字體圖標來實現
詳細看鏈接http://www.runoob.com/bootstrap/bootstrap-glyphicons.html
b、正文的導入
在正文中輸入圖片時小心圖片的所在路徑表達，相對路徑和絕對路徑的表達
其次圖片建議保存在asset/imgs 文件夾中
c、底部輪播項
調用bootstrap中的輪播即可
詳細看連接：http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html
d、返回頂部的功能
在<head>中寫上<header class="bs-docs-nav navbar navbar-static-top" id="top">
在<body>中寫上
<div style="position:fixed; bottom:0; right:0; width:100px;
color:#282828">
<a href="#top" class="back-to-top"> 返回頂部
</a>
</div>
即可
e、如何在圖片上寫上文字
添加如下
<style type="text/css">
#div1{
position: relative;
width: 265px;
height: 100px;
}
#img1{
width: 100%;
height: 100%;
}
#span1{
position: absolute;
width: 100%;
bottom: 0px;
left: 0px;
text-align: center;
font-size: 18px;
color: #272822;
}
</style>
在<body>中加入對應的標籤即可，例如
<div id="div1">
<span id="span1" ><strong>流川楓</strong> </span>
<img id="img1" src ="assets/imgs/cdd5a18ef1607fc90f6086bb4897bd8b.jpg" alt="First slide" class="img-thumbnail" >
</div>
4保存好改動，重新運行，即可看到自己製作的網頁