Bootstrap 是基於 HTML，CSS 和 JavaScript 的簡潔靈活的流行前端框架及交互組件集，由微博的先驅 Twitter 在2011年8月開源的整套前端解決解決方案。Bootstrap 有非常完備和詳盡的開發文檔，Web 開發人員能夠輕松搭建出清爽風格的界面以及實現良好的交互效果。與jQuery UI 相識，簡單的調用就可以獲得精美的頁面效果。
Bootstrap 的口號是 Designed for everyone, everywhere.（適用於任何場景，適用於每一個人），主要有以下特色：支持所有主流瀏覽器、12列柵格布局、響應式設計、樣式化的文檔以及常用的定制的 jQuery 插件等等。Bootstrap 已經足夠強大，能夠實現各種形式的 Web 界面。為了能夠充分利用 Bootstrap 的強大功能。
網站主頁有新手教程，可以根據需要選擇相應的模塊學習，容易定制，對於我這種沒有藝術美感的程序猿來說，是居家必備啊
這里僅貼出一個Switch簡單的使用實例供大家產考。
由Bootstrap是基於jQuery類庫，所以這里要用到jQuery。
與jQuery Ui相似，先引用相關的類包。
注：引用順序 先bootstrapSwitch.css（插件樣式）、再jquery-1.8.2.js（jquery類庫）、最后bootstrapSwitch.js（插件所在的類庫）。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="switch.aspx.cs" Inherits="Bootstrap實例._switch" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="stylesheets/bootstrapSwitch.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.8.2.js" type="text/javascript"></script> <script src="js/bootstrapSwitch.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { // $('#switch').bootstrapSwitch('isActive'); $('#btn-is-active-switch').on('click', function () { alert($('#switch').bootstrapSwitch('isActive')); }); }); </script> </head> <body> <form id="form1" runat="server"> <div class="switch" id="btn-is-active-switch" data-on="warning" data-off="danger"> <input type="checkbox" checked /> </div> <div class="switch switch-large"> <input type="checkbox" checked /> </div> <div class="switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>"> <input type="checkbox" checked /> </div> <a href="#" data-trigger="tooltip" data-content="Lorem ipsum dolor">Hover me</a> </form> </body> </html>
注：本文章屬個人學習總結，部分內容參考互聯網上的相關文章。 其中如果發現個人總結有不正確的認知或遺漏的地方請評論告知，歡迎交流。