Visual Studio 擴充功能 - Bootstraps Snippet Pack

從 Visual Studio 2013 將 ASP.NET MVC 5 與 ASP.NET WebForms 的預設範本使用 Twitter Bootstrap 之後，這個原本就已經被許多網站開發人員所採用的前端 UI Framework 也讓更多的 ASP.NET 開發人員認識並使用它，這對於大多數的 ASP.NET WebForms 的開發人員會感覺有比較大的改變，因為平時所接觸的 UI 都是以 Server Controls 居多，對於 ASP.NET MVC 開發人員來說，使用 Bootstrap 來開發是比 WebForms 的人還早，而且也比較熟悉，畢竟 ASP.NET MVC 沒有那些可以拖拉放的 Server Control。

但使用 Bootstrap 時，不見得會把所有的標籤語法給記起來，當需要某些功能的時候才會到官網去找，或是到 Bootsnipp 或是 Bootply 等網站去找，不過最近有一個 Visual Studio 擴充功能剛好可以解決這項困擾，只要安裝好 Extension 之後，在開發的時候只要使用 code snippet 就可以快速產出 Bootstrap 的功能。

 

---

Bootstraps Snippet Pack

http://visualstudiogallery.msdn.microsoft.com/e82e7862-f731-4183-a27a-3a44b261bfe5

Source Code

https://github.com/elebetsamer/bootstrap-snippets-visual-studio

在 GitHub Repository 上有一份詳細的 Code Snippets 的清單，想要了解有哪些 Code Snippet 可以使用，以及會產出什麼樣的內容，都可以在這一份清單裡找到資訊，

https://github.com/elebetsamer/bootstrap-snippets-visual-studio/blob/master/snippet-listing.md

 

安裝

透過 Visual Studio 的「擴充功能和更新」使用「Bootstrap Snippet Pack」就可以找到並安裝，Visual Studio 2013 與 2012 都有支援，

安裝完成並重新啟動 Visual Studio 之後，可以在「程式碼片段管理員」看到已經安裝的 Bootstrap Code Snippets，

 

使用

先來試試看第一個 Code Snippet，新增一個空白的 View，沒有套用 _Layout.cshtml，然後在空白的 View 裡輸入「bootstrsp」然後按下「Tab」鍵，就會自動產出包含有使用 Bootstrap css 與 javascript 的 HTML code，

 

再來試試看別的，

「bs-accordion」

 

「bs-btn-dropdown」

 

「bs-carousel」

 

「bs-modal」

 

「bs-navbar」

 

「bs-page-header」「bs-pagination」「bs-list-group」「bs-pager」

 

「bs-panel」「bs-progress-bar」「bs-thumbnail」

 

---

使用 Bootstrsp Snippet Pack 並不是就可以不用再去了解 Bootstrap，相反的更應該要去了解，畢竟 Bootstrap Snippet Pack 只是用於輔助，讓我們可以簡化輸入的步驟，我們還是要去了解構成這些 Tag 與功能的細節，就像之前我所介紹過的「jQuery Code Snippets」，我們本身還是要知道怎麼使用 jQuery 才能如何使用 jQuery Code Snippets。

 

延伸閱讀

mrkt 的程式學習筆記: Visual Studio 2012 - jQuery 程式碼片段 (Code Snippets)

 

以上