Bootstrap 小技巧以及相關資源整理，bootstrap相關資源

Bootstrap 小技巧以及相關資源整理，bootstrap相關資源
1， Bootstrap Bundle （http://bootstrapbundle.com/）: 提供了15中不同的MVC  Bootstrap模板。【擴充和更新】中搜尋“Bootstrap Bundle” 下載安裝。建立項目的時候就可以直接選擇模板了。

 

2，Bootswatch (http://bootswatch.com/): 提供了一些不同色調的bootstraps css檔案,可以直接下載所需主題的css檔案覆蓋項目中的css:  

 

3，Bootstrap Snippets(http://bootsnipp.com/): 可以直接在vs中插入bootstraps程式碼片段而不需要從官方文檔Copy。【擴充和更新】中搜尋“bootstrap”即可找到。

 

 安裝完成後重啟vs, view頁面中 右鍵-插入程式碼片段【Ctrl+K,Ctrl+X】，我們就可以選擇bootstrap組件了：

 

4，Web Essentials 2015(http://vswebessentials.com/) : Web Essentials 協助檢查我們寫的class屬性是否有錯誤，如果有誤則會提醒我們錯誤，如下：

 

Web Essential還可以即時把對頁面內容的改變反饋到vs原始碼中（參考：http://www.vswebessentials.com/features/browserlink）：

Web Essential還可以協助調試css ，js，其官網上也都有詳細的介紹以及樣本。

 

5，Bootsnipp(http://bootsnipp.com/) 提供一些美化過或者是封裝好的一些功能模組，我們可以在其網站中搜尋需要的功能模組。下面是他們提供的一種3D Button按鈕：

 

參考bootsnipp中的"Show Dropdown Hover & Caret Up"，把樣本js和css加入到現有項目中，實現了滑鼠經過顯示下拉式功能表的效果：

 6，SideWaffle Template Pack (http://www.sidewaffle.com):提供了一些VS項目功能的模板如：chrome外掛程式項目、CKEditor等。【擴充和更新】中搜尋：sidewaffle ，下載安裝。（下載後開啟檔案選擇Visual Studio Version Selector進行安裝）

項目中【添加】可以選擇SideWaffle預設Template:

 

 

 

 

 網址：

http://getbootstrap.com/

http://glyphicons.com/

http://fontawesome.bootstrapcheatsheets.com/

http://www.sidewaffle.com/

http://vswebessentials.com/

http://lesscss.org/

SPA: single-page applications