Bootstrap經常使用代碼1

時間 2019-12-20
原文原文鏈接
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' />");