Bootstrap使用详解
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>
注：本文章属个人学习总结，部分内容参考互联网上的相关文章。 其中如果发现个人总结有不正确的认知或遗漏的地方请评论告知，欢迎交流。
