Bootstrap 是基于 HTML，CSS 和 JavaScript 的简洁灵活的流行前端框架及交互组件集，由微博的先驱 Twitter 在2011年8月开源的整套前端解决解决方案。Bootstrap 有非常完备和详尽的开发文档，Web 开发人员能够轻松搭建出清爽风格的界面以及实现良好的交互效果。与jQuery UI 相识，简单的调用就可以获得精美的页面效果。

官方网站：http://www.bootcss.com/

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>

 

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

版权声明：本文为robin-zgp原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/robin-zgp/archive/2013/06/09/3128248.html