用於Visual Studio的Bootstrap代碼片段擴展插件實現智能提示/提醒--Bootstrap Snippet Pack
我們知道，Bootstrap是Twitter前端開發成員開發的一款移動為先的前端組件。Visual Studio開發團隊也將Bootstrap作為了Visual Studio各Web基架的默認前端組件。 Bootstrap的優點在於： 1.移動為先（這是我在這篇文章的開篇就涉及到的） 2.學習成本低（只需要學習Bootstrap的整體書寫框架以及類和組件等） 3.界面相對美觀（不需要你有太多美術設計基礎就可以組建美觀的Web界面） 4.學習交流社區較為成熟（Bootstrap的需多問題在各大社區和開源網站都有解決方案） 5.豐富的各種組件 說了這么多Bootstrap的優點，好處。那么我們來一款在Visual Studio提高Bootstrap開發效率的擴展插件--Bootstrap Snippet Pack。 此插件集成了Bootstrap的各種組件的代碼片段，同時支持Visual Studio 2012/2013/2015，Bootstrap Snippet Pack擴展插件的下載地址為：https://visualstudiogallery.msdn.microsoft.com/e82e7862-f731-4183-a27a-3a44b261bfe5。 示例，比如我們需要寫一段Bootstrap模態彈窗(Modal)代碼片段：
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> 以上的代碼片段，如果在Visual Studio中不用這個擴展插件，我們就得手工一個個div地寫（或者去Bootstrap復制對應的代碼片段），這樣的開發效率顯然不是最高的。 但有了Bootstrap Snippet Pack，我們只需要使用Visual Studio的快捷鍵Ctrl+k,x喚出已安裝的代碼片段菜單，如圖：
然后選擇“Bootstrap”選項，再在彈出的代碼片段菜單中選擇我們本示例需要的Modal：
Bootstrap的模態彈窗代碼片段就自動生成好了。再貼個Bootstrap Snippet Pack的管理界面：
怎么樣，是不是很高效的Bootstrap片段代碼插件呢？如果喜歡，請為本文點個贊吧！
------------恢復內容開始------------
用於Visual Studio的Bootstrap代碼片段擴展插件實現智能提示/提醒--Bootstrap Snippet Pack
我們知道，Bootstrap是Twitter前端開發成員開發的一款移動為先的前端組件。Visual Studio開發團隊也將Bootstrap作為了Visual Studio各Web基架的默認前端組件。 Bootstrap的優點在於： 1.移動為先（這是我在這篇文章的開篇就涉及到的） 2.學習成本低（只需要學習Bootstrap的整體書寫框架以及類和組件等） 3.界面相對美觀（不需要你有太多美術設計基礎就可以組建美觀的Web界面） 4.學習交流社區較為成熟（Bootstrap的需多問題在各大社區和開源網站都有解決方案） 5.豐富的各種組件 說了這么多Bootstrap的優點，好處。那么我們來一款在Visual Studio提高Bootstrap開發效率的擴展插件--Bootstrap Snippet Pack。 此插件集成了Bootstrap的各種組件的代碼片段，同時支持Visual Studio 2012/2013/2015，Bootstrap Snippet Pack擴展插件的下載地址為：https://visualstudiogallery.msdn.microsoft.com/e82e7862-f731-4183-a27a-3a44b261bfe5。 示例，比如我們需要寫一段Bootstrap模態彈窗(Modal)代碼片段：
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> 以上的代碼片段，如果在Visual Studio中不用這個擴展插件，我們就得手工一個個div地寫（或者去Bootstrap復制對應的代碼片段），這樣的開發效率顯然不是最高的。 但有了Bootstrap Snippet Pack，我們只需要使用Visual Studio的快捷鍵Ctrl+k,x喚出已安裝的代碼片段菜單，如圖：
然后選擇“Bootstrap”選項，再在彈出的代碼片段菜單中選擇我們本示例需要的Modal：
Bootstrap的模態彈窗代碼片段就自動生成好了。再貼個Bootstrap Snippet Pack的管理界面：
怎么樣，是不是很高效的Bootstrap片段代碼插件呢？如果喜歡，請為本文點個贊吧！
------------恢復內容結束------------