這是我最終處理出我想要的東西。
(以下皆為個人心情&處理過程)
這一切，感覺自已像「瞎子摸象」一樣！
摸看看什麼是「Bootstrap」？？要如何做到「Sidebar Menu」？？如何隱藏之類的......
最有有達到自已所要的結果了。
相關資源Summary：
========================
Simple Sidebar： (找到如何寫Sidebar的呈現方式~且可以縮合)
http://startbootstrap.com/template-overviews/simple-sidebar/
小圖Icon區：
http://getbootstrap.com/components/
有用到的是：
class="glyphicon glyphicon-align-justify" (三條線的圖)
class="glyphicon glyphicon-chevron-right" (向右指標圖)
class="glyphicon glyphicon-chevron-down"(向下指標圖)
縮合的Script邏輯，不用每個都定IDhttp://www.bootply.com/k30Hz23kGv
========================
在套上這一個玩意後，它的重點在Menu的縮合
而當營幕縮小時，它的Menu會自已不見 (所以要有的按鍵可以再把它給按開)
加上這個Script就可以把它給叫出來：
再來就是想它縮合的呈現。
程式的部份是：
讓它的主從關係，讓它可以縮合
再來小圖的部份，就充份的了解「toggleClass」的好處！！ (雙向變換) http://api.jquery.com/toggleClass/
所以，就直接針對這個span，做圖型的切換。
而這樣，就達到我要的效果了！！
這是最終的程式碼：
(以下皆為個人心情&處理過程)
這一切，感覺自已像「瞎子摸象」一樣！
摸看看什麼是「Bootstrap」？？要如何做到「Sidebar Menu」？？如何隱藏之類的......
最有有達到自已所要的結果了。
相關資源Summary：
========================
Simple Sidebar： (找到如何寫Sidebar的呈現方式~且可以縮合)
http://startbootstrap.com/template-overviews/simple-sidebar/
小圖Icon區：
http://getbootstrap.com/components/
有用到的是：
class="glyphicon glyphicon-align-justify" (三條線的圖)
class="glyphicon glyphicon-chevron-right" (向右指標圖)
class="glyphicon glyphicon-chevron-down"(向下指標圖)
縮合的Script邏輯，不用每個都定IDhttp://www.bootply.com/k30Hz23kGv
========================
在套上這一個玩意後，它的重點在Menu的縮合
而當營幕縮小時，它的Menu會自已不見 (所以要有的按鍵可以再把它給按開)
加上這個Script就可以把它給叫出來：
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
再來就是想它縮合的呈現。
程式的部份是：
讓它的主從關係，讓它可以縮合
再來小圖的部份，就充份的了解「toggleClass」的好處！！ (雙向變換) http://api.jquery.com/toggleClass/
所以，就直接針對這個span，做圖型的切換。
而這樣，就達到我要的效果了！！
這是最終的程式碼：
