a. 引用： <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件（一般不用引入） --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> b. 使用： <!DOCTYPE html> <html lang="zh-CN"> ... </html> c. 明细： i. 表格：用法 1) 表格：class="table" 2) 条纹状表格： class="table table-striped" 3) 框线表格： class="table table-bordered" 4) 紧缩表格： class="table table-condensed" ii. 响应式表格： <div class="table-responsive"> <table class="table"> ... </table> </div> iii. 表单： <div class="form-group"> <label class="col-sm-2 control-label">会议类型:</label> <div class="col-sm-10"> <input type="radio" name="meettype" value="1" checked="checked" id="yb"/> <label for="yb">一般</label> <input type="radio" name="meettype" value="2" id="ts" /> <label for="ts">特殊</label> </div> </div> iv. 栅格布局： <div class="container-fluid"> <div class="row"> <div class="col-md-4"> </div> </div> </div> v. tab布局： <ul class="nav nav-tabs"> <li class="active"><a href="#log_tab" data-toggle="tab">日志</a></li> <li><a href="#statistics_tab" data-toggle="tab">统计</a></li> </ul> <!-- END PAGE HEADER--> <!-- BEGIN PAGE CONTENT--> <!--日志--> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="log_tab"></div> <div class="tab-pane fade" id="statistics_tab"></div> </div> vi. modal中显示datepicker: .datepicker {z-index:999999; top: 0; left: 0; padding: 4px; margin-top: 1px; -webkit-border-radius: vii. 隐藏model: $('#qclist_dialog').modal('hide'); viii. 图标显示： <span class="icon-time" style="color:red;"></span> ix. Tab显示： <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 标签页（Tab）插件</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <ul id="myTab" class="nav nav-tabs"> <li class="active"> <a href="#home" data-toggle="tab"> W3Cschool Home </a> </li> <li><a href="#ios" data-toggle="tab">iOS</a></li> <li class="dropdown"> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li> <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li> </ul> </li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="home"> <p>W3Cschoool菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p> </div> <div class="tab-pane fade" id="ios"> <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p> </div> <div class="tab-pane fade" id="jmeter"> <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p> </div> <div class="tab-pane fade" id="ejb"> <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。 </p> </div> </div> </body> </html> x. img显示原图大小： $("#ShowImage_Form").find("#img_show").html("<image src='"+source+"' class='carousel-inner img-responsive img-rounded' />");