Bootstrap 使用教程 與jQuery的Ajax方法

jQuery.ajax(url,[settings])

更加詳細的內容參考     jQuery API 中文在線手冊                

概述

通過 HTTP 請求加載遠程數據。

jQuery 底層 AJAX 實現。簡單易用的高層實現見 $.get, $.post 等。$.ajax() 返回其創建的 XMLHttpRequest 對象。大多數情況下你無需直接操作該函數，除非你需要操作不常用的選項，以獲得更多的靈活性。

最簡單的情況下，$.ajax()可以不帶任何參數直接使用。

注意，所有的選項都可以通過$.ajaxSetup()函數來全局設置。

回調函數

如果要處理$.ajax()得到的數據，則需要使用回調函數。beforeSend、error、dataFilter、success、complete。

• beforeSend 在發送請求之前調用，並且傳入一個XMLHttpRequest作為參數。
• error 在請求出錯時調用。傳入XMLHttpRequest對象，描述錯誤類型的字符串以及一個異常對象（如果有的話）
• dataFilter 在請求成功之后調用。傳入返回的數據以及"dataType"參數的值。並且必須返回新的數據（可能是處理過的）傳遞給success回調函數。
• success 當請求之后調用。傳入返回后的數據，以及包含成功代碼的字符串。
• complete 當請求完成之后調用這個函數，無論成功或失敗。傳入XMLHttpRequest對象，以及一個包含成功或錯誤代碼的字符串。

數據類型

$.ajax()函數依賴服務器提供的信息來處理返回的數據。如果服務器報告說返回的數據是XML，那么返回的結果就可以用普通的XML方法或者jQuery的選擇器來遍歷。如果見得到其他類型，比如HTML，則數據就以文本形式來對待。

通過dataType選項還可以指定其他不同數據處理方式。除了單純的XML，還可以指定 html、json、jsonp、script或者text。

其中，text和xml類型返回的數據不會經過處理。數據僅僅簡單的將XMLHttpRequest的responseText或responseHTML屬性傳遞給success回調函數，

'''注意'''，我們必須確保網頁服務器報告的MIME類型與我們選擇的dataType所匹配。比如說，XML的話，服務器端就必須聲明 text/xml 或者 application/xml 來獲得一致的結果。

如果指定為html類型，任何內嵌的JavaScript都會在HTML作為一個字符串返回之前執行。類似的，指定script類型的話，也會先執行服務器端生成JavaScript，然后再把腳本作為一個文本數據返回。

如果指定為json類型，則會把獲取到的數據作為一個JavaScript對象來解析，並且把構建好的對象作為結果返回。為了實現這個目的，他首先嘗試使用JSON.parse()。如果瀏覽器不支持，則使用一個函數來構建。JSON數據是一種能很方便通過JavaScript解析的結構化數據。如果獲取的數據文件存放在遠程服務器上（域名不同，也就是跨域獲取數據），則需要使用jsonp類型。使用這種類型的話，會創建一個查詢字符串參數 callback=? ，這個參數會加在請求的URL后面。服務器端應當在JSON數據前加上回調函數名，以便完成一個有效的JSONP請求。如果要指定回調函數的參數名來取代默認的callback，可以通過設置$.ajax()的jsonp參數。

注意，JSONP是JSON格式的擴展。他要求一些服務器端的代碼來檢測並處理查詢字符串參數。更多信息可以參閱 最初的文章。

如果指定了script或者jsonp類型，那么當從服務器接收到數據時，實際上是用了<script>標簽而不是XMLHttpRequest對象。這種情況下，$.ajax()不再返回一個XMLHttpRequest對象，並且也不會傳遞事件處理函數，比如beforeSend。

發送數據到服務器

默認情況下，Ajax請求使用GET方法。如果要使用POST方法，可以設定type參數值。這個選項也會影響data選項中的內容如何發送到服務器。

data選項既可以包含一個查詢字符串，比如 key1=value1&key2=value2 ，也可以是一個映射，比如 {key1: 'value1', key2: 'value2'} 。如果使用了后者的形式，則數據再發送器會被轉換成查詢字符串。這個處理過程也可以通過設置processData選項為false來回避。如果我們希望發送一個XML對象給服務器時，這種處理可能並不合適。並且在這種情況下，我們也應當改變contentType選項的值，用其他合適的MIME類型來取代默認的 application/x-www-form-urlencoded 。

高級選項

global選項用於阻止響應注冊的回調函數，比如.ajaxSend，或者ajaxError，以及類似的方法。這在有些時候很有用，比如發送的請求非常頻繁且簡短的時候，就可以在ajaxSend里禁用這個。更多關於這些方法的詳細信息，請參閱下面的內容。

如果服務器需要HTTP認證，可以使用用戶名和密碼可以通過username和password選項來設置。

Ajax請求是限時的，所以錯誤警告被捕獲並處理后，可以用來提升用戶體驗。請求超時這個參數通常就保留其默認值，要不就通過jQuery.ajaxSetup來全局設定，很少為特定的請求重新設置timeout選項。

默認情況下，請求總會被發出去，但瀏覽器有可能從他的緩存中調取數據。要禁止使用緩存的結果，可以設置cache參數為false。如果希望判斷數據自從上次請求后沒有更改過就報告出錯的話，可以設置ifModified為true。

scriptCharset允許給<script>標簽的請求設定一個特定的字符集，用於script或者jsonp類似的數據。當腳本和頁面字符集不同時，這特別好用。

Ajax的第一個字母是asynchronous的開頭字母，這意味着所有的操作都是並行的，完成的順序沒有前后關系。$.ajax()的async參數總是設置成true，這標志着在請求開始后，其他代碼依然能夠執行。強烈不建議把這個選項設置成false，這意味着所有的請求都不再是異步的了，這也會導致瀏覽器被鎖死。

$.ajax函數返回他創建的XMLHttpRequest對象。通常jQuery只在內部處理並創建這個對象，但用戶也可以通過xhr選項來傳遞一個自己創建的xhr對象。返回的對象通常已經被丟棄了，但依然提供一個底層接口來觀察和操控請求。比如說，調用對象上的.abort()可以在請求完成前掛起請求。

參數

url,[settings]ObjectV1.5

url:一個用來包含發送請求的URL字符串。

settings:AJAX 請求設置。所有選項都是可選的。

V1.0settings:選項

acceptsMap

默認： 取決於數據類型。

內容類型發送請求頭，告訴服務器什么樣的響應會接受返回。如果accepts設置需要修改，推薦在$.ajaxSetup()方法中做一次。

asyncBoolean

(默認: true) 默認設置下，所有請求均為異步請求。如果需要發送同步請求，請將此選項設置為 false。注意，同步請求將鎖住瀏覽器，用戶其它操作必須等待請求完成才可以執行。

beforeSend(XHR)Function

發送請求前可修改 XMLHttpRequest 對象的函數，如添加自定義 HTTP 頭。XMLHttpRequest 對象是唯一的參數。這是一個 Ajax 事件。如果返回false可以取消本次ajax請求。

function (XMLHttpRequest) {
    this; // 調用本次AJAX請求時傳遞的options參數
}

cacheBoolean

(默認: true,dataType為script和jsonp時默認為false) jQuery 1.2 新功能，設置為 false 將不緩存此頁面。

complete(XHR, TS)Function

請求完成后回調函數 (請求成功或失敗之后均調用)。參數： XMLHttpRequest 對象和一個描述成功請求類型的字符串。 Ajax 事件。

function (XMLHttpRequest, textStatus) {
    this; // 調用本次AJAX請求時傳遞的options參數
}

contentsMapV1.5

一個以"{字符串:正則表達式}"配對的對象，用來確定jQuery將如何解析響應，給定其內容類型。

contentTypeString

(默認: "application/x-www-form-urlencoded") 發送信息至服務器時內容編碼類型。默認值適合大多數情況。如果你明確地傳遞了一個content-type給 $.ajax() 那么他必定會發送給服務器（即使沒有數據要發送）

contextObject

這個對象用於設置Ajax相關回調函數的上下文。也就是說，讓回調函數內this指向這個對象（如果不設定這個參數，那么this就指向調用本次AJAX請求時傳遞的options參數）。比如指定一個DOM元素作為context參數，這樣就設置了success回調函數的上下文為這個DOM元素。就像這樣：

$.ajax({ url: "test.html", context: document.body, success: function(){
    $(this).addClass("done");
}});

convertersmapV1.5

默認： {"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML}

一個數據類型對數據類型轉換器的對象。每個轉換器的值是一個函數，返回響應的轉化值

crossDomainmapV1.5

默認： 同域請求為false

跨域請求為true如果你想強制跨域請求（如JSONP形式）同一域，設置crossDomain為true。這使得例如，服務器端重定向到另一個域

dataObject,String

發送到服務器的數據。將自動轉換為請求字符串格式。GET 請求中將附加在 URL 后。查看 processData 選項說明以禁止此自動轉換。必須為 Key/Value 格式。如果為數組，jQuery 將自動為不同值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換為 "&foo=bar1&foo=bar2"。

dataFilterFunction

給Ajax返回的原始數據的進行預處理的函數。提供data和type兩個參數：data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。

function (data, type) {
    // 對Ajax返回的原始數據進行預處理
    return data  // 返回處理后的數據
}

dataTypeString

預期服務器返回的數據類型。如果不指定，jQuery 將自動根據 HTTP 包 MIME 信息來智能判斷，比如XML MIME類型就被識別為XML。在1.4中，JSON就會生成一個JavaScript對象，而script則會執行這個腳本。隨后服務器端返回的數據會根據這個值解析后，傳遞給回調函數。可用值:

"xml": 返回 XML 文檔，可用 jQuery 處理。

"html": 返回純文本 HTML 信息；包含的script標簽會在插入dom時執行。

"script": 返回純文本 JavaScript 代碼。不會自動緩存結果。除非設置了"cache"參數。'''注意：'''在遠程請求時(不在同一個域下)，所有POST請求都將轉為GET請求。(因為將使用DOM的script標簽來加載)

"json": 返回 JSON 數據 。

"jsonp": JSONP 格式。使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數名，以執行回調函數。

"text": 返回純文本字符串

errorFunction

(默認: 自動判斷 (xml 或 html)) 請求失敗時調用此函數。有以下三個參數：XMLHttpRequest 對象、錯誤信息、（可選）捕獲的異常對象。如果發生了錯誤，錯誤信息（第二個參數）除了得到null之外，還可能是"timeout", "error", "notmodified" 和 "parsererror"。Ajax 事件。

function (XMLHttpRequest, textStatus, errorThrown) {
    // 通常 textStatus 和 errorThrown 之中
    // 只有一個會包含信息
    this; // 調用本次AJAX請求時傳遞的options參數
}

globalBoolean

(默認: true) 是否觸發全局 AJAX 事件。設置為 false 將不會觸發全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用於控制不同的 Ajax 事件。

headersmapV1.5

Default: {}

一個額外的"{鍵:值}"對映射到請求一起發送。此設置被設置之前beforeSend函數被調用;因此，消息頭中的值設置可以在覆蓋beforeSend函數范圍內的任何設置。

ifModifiedBoolean

(默認: false) 僅在服務器數據改變時獲取新數據。使用 HTTP 包 Last-Modified 頭信息判斷。在jQuery 1.4中，他也會檢查服務器指定的'etag'來確定數據沒有被修改過。

isLocalmapV1.5.1

默認: 取決於當前的位置協議

允許當前環境被認定為“本地”，（如文件系統），即使jQuery默認情況下不會承認它。以下協議目前公認為本地：file, *-extension, and widget。如果isLocal設置需要修改，建議在$.ajaxSetup()方法中這樣做一次。

jsonpString

在一個jsonp請求中重寫回調函數的名字。這個值用來替代在"callback=?"這種GET或POST請求中URL參數里的"callback"部分，比如{jsonp:'onJsonPLoad'}會導致將"onJsonPLoad=?"傳給服務器。

jsonpCallbackString

為jsonp請求指定一個回調函數名。這個值將用來取代jQuery自動生成的隨機函數名。這主要用來讓jQuery生成度獨特的函數名，這樣管理請求更容易，也能方便地提供回調函數和錯誤處理。你也可以在想讓瀏覽器緩存GET請求的時候，指定這個回調函數名。

mimeTypeStringV1.5.1

一個mime類型用來覆蓋XHR的 MIME類型。

passwordString

用於響應HTTP訪問認證請求的密碼

processDataBoolean

(默認: true) 默認情況下，通過data選項傳遞進來的數據，如果是一個對象(技術上講只要不是字符串)，都會處理轉化成一個查詢字符串，以配合默認內容類型 "application/x-www-form-urlencoded"。如果要發送 DOM 樹信息或其它不希望轉換的信息，請設置為 false。

scriptCharsetString

只有當請求時dataType為"jsonp"或"script"，並且type是"GET"才會用於強制修改charset。通常只在本地和遠程的內容編碼不同時使用。

statusCodemapV1.5

默認: {}

一組數值的HTTP代碼和函數對象，當響應時調用了相應的代碼。例如，如果響應狀態是404，將觸發以下警報：

$.ajax({
  statusCode: {404: function() {
    alert('page not found');
  }
});

success(data, textStatus, jqXHR)Function,Array

請求成功后的回調函數。參數：由服務器返回，並根據dataType參數進行處理后的數據；描述狀態的字符串。還有 jqXHR（在jQuery 1.4.x的中，XMLHttpRequest） 對象 。在jQuery 1.5， 成功設置可以接受一個函數數組。每個函數將被依次調用。 Ajax 事件。

function (data, textStatus) {
    // data 可能是 xmlDoc, jsonObj, html, text, 等等...
    this; // 調用本次AJAX請求時傳遞的options參數
}

traditionalBoolean

如果你想要用傳統的方式來序列化數據，那么就設置為true。請參考工具分類下面的jQuery.param 方法。

timeoutNumber

設置請求超時時間（毫秒）。此設置將覆蓋全局設置。

typeString

(默認: "GET") 請求方式 ("POST" 或 "GET")， 默認為 "GET"。注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支持。

urlString

(默認: 當前頁地址) 發送請求的地址。

usernameString

用於響應HTTP訪問認證請求的用戶名

xhrFunction

需要返回一個XMLHttpRequest 對象。默認在IE下是ActiveXObject 而其他情況下是XMLHttpRequest 。用於重寫或者提供一個增強的XMLHttpRequest 對象。這個參數在jQuery 1.3以前不可用。

xhrFieldsmapV1.5

一對“文件名-文件值”在本機設置XHR對象。例如，如果需要的話，你可以用它來設置withCredentials為true的跨域請求。

jquery Ajax()請求運用實例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
</head>
<body>
<h1>請登錄</h1>
<form class="fm">
    <input id="user" type="text" name="user" placeholder="請輸入用戶名">
    <input id="pwd" type="password" name="pwd" placeholder="請輸入密碼">

    <input class="sbm" type="submit" value="提交...">
</form>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(function () {

    // form表單請求: 完成前后台數據交互,
    //      為后台提供數據, 后台反饋響應結果, 前台會發生頁面轉跳
    $('.fm').submit(function () { return false; })

    // ajax請求: 完成前后台數據交互,
    //      為后台提供數據, 后台反饋響應結果, 前台不需要頁面轉跳,
    //      可以完成頁面局部刷新內容
    $('.sbm').click(function () {
        // 前提: 准備發送的數據
        var user = $('#user').val();
        var pwd = $('#pwd').val();


        // 1.通過ajax發生請求, 獲得后台響應的結果
        // 2.用得到的結果來局部渲染頁面內容

        // 1.
        $.ajax({
            url: "http://127.0.0.1:8888/login",
            data: {
                user: user,
                pwd: pwd
            },
            success: function (data) {
                // 2.
                doSomething(data);
            }
        })
    });

    function doSomething(data) {
        // console.log(data)
        $('h1').text(data)
    }
})
</script>
</html>

server.py

# 通過flask框架搭建后台

from flask import Flask, request
# 創建一個服務器對象
app = Flask(__name__)

# 解決ajax請求的跨域問題
from flask_cors import CORS
CORS(app, supports_credentials=True)

# 設置處理請求的功能(路由route => 接口)

# 設置一個主頁路由, 對應一個處理主頁的功能方法, 返回主頁信息
@app.route('/')
def home_action():
    return '<h1 style="color: red">主頁</h1>'

# 為ajax登錄請求配置一個處理登錄的功能
@app.route('/login')
def login_action():
    # 拿到前台數據, 進一步判斷處理
    # 需要: 需要賬號與密碼, 匹配成功與否決定返回結果
    user = request.args['user'] # 'user'是規定前台需要傳入數據的key
    pwd = request.args['pwd']
    # print(user)
    if user == 'abc' and pwd == '123':
        return "登錄成功"
    return "登錄失敗"


# 啟動服務(該文件作為自啟文件)
if __name__ == '__main__':
    app.run(port="8888")

本地測試產生了跨域問題，如果在公網就不會出現ajax的跨域問題，后面的博文會專門討論一下跨域問題

Bootstrap簡介

Bootstrap是美國Twitter公司的設計師Mark Otto和Jacob Thornton合作基於HTML、CSS、JavaScript 開發的簡潔、直觀、強悍的前端開發框架，使得 Web 開發更加快捷

官方文檔參考   https://v3.bootcss.com/

安裝

本地鏈接

[官網下載](https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip)

CDN

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可選的 Bootstrap 主題文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Bootstrap引入

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>bs引入</title>

    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <!--可以在bs基礎上進行樣式修改, 一般修改樣式要出現在引入bs之后-->
    <style>
        .btn {
            outline: none !important;
        }

        h1 {
            font-size: 100px;
        }
    </style>
</head>
<body>
<h1>一級標題</h1>
<button class="btn">按鈕</button>

<div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-default">1</button>
    <button type="button" class="btn btn-default">2</button>

    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="false">
            Dropdown
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
        </ul>
    </div>
</div>

</body>
<!--bs的腳本依賴於jq, 所以要提前導入jq-->
<!--腳本邏輯盡量放在html結構之下-->
<script src="js/jquery-3.3.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</html>

全局 CSS 樣式

官方文檔鏈接 

概覽    柵格系統    排版    代碼     表格      表單       按鈕    圖片      輔助類         響應式工具      使用 Less       使用 Sass

容器與響應式運用實例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>容器於響應式</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        .box {
            /*width: 500px;*/
            height: 100px;
            background-color: orange;
            margin: 0 auto;
        }



        /*屏幕尺寸 >1200px 會激活該響應式分支*/
        @media (min-width: 1200px) {
            .box {
                width: 1200px;
            }
        }
        /*992px ~ 1200px*/
        @media (min-width: 992px) and (max-width: 1200px) {
            .box {
                width: 992px;
            }
        }
        /*小於992px*/
         @media (max-width: 992px) {
            .box {
                width: 50px;
            }
        }

        /*用來完成響應式布局
        @media (min-width: 768px) {

        }
        */
    </style>
</head>
<body>
    <!--響應式布局-->
    <div class="box"></div>



    <!--固定寬度容器(采用響應式布局)-->
    <div class="container">
        <!--縮放屏幕尺寸,發現寬度有四種狀態存在 => 響應式布局-->
        <h1 class="bg-pink">標題</h1>

        <div class="container">
            <h1 class="bg-pink">子標題</h1>
        </div>
    </div>
    <!--動態寬度布局(采用流式布局)-->
    <div class="container-fluid">
        <h1 class="bg-pink">標題</h1>
    </div>
    <!--總結; 兩種容器默認都有左右15px padding-->

    <!-- 行: .row, 可以取消容器的默認左右15px padding-->
    <div class="container">
        <div class="row">
            <h1 class="bg-info">標題</h1>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <h1 class="bg-info">標題</h1>
        </div>
    </div>
    <!--行row就是配合容器來使用, 可以抵消容器默認padding, 且可以給內容按行分組-->
    <div class="container">
        <div class="row">
            ...
        </div>
        <div class="row">
            ...
        </div>
    </div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</html>

刪格系統

概念

將父級可用寬度(content)均分為12等份

列比

超小屏幕：.col-xs-*
小屏幕：.col-sm-*
中等屏幕：.col-md-*
大屏幕：.col-lg-*
v-hint：只設置小屏列比會影響大屏列比；只設置大屏列比小屏時會撐滿屏幕

行

<div class="row"></div>
<div class="row"></div>

列偏移

超小屏幕：.col-xs-offset-*
小屏幕：.col-sm-offset-*
中等屏幕：.col-md-offset-*
大屏幕：.col-lg-offset-*

輔助類

情境背景色
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
快速浮動
<div class="pull-left">...</div>
<div class="pull-right">...</div>
快速清浮動
<div class="clearfix">...</div>
顯隱
<div class="show">...</div>
<div class="hidden">...</div>

柵格使用實例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>柵格系統</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        .row div {
            height: 60px;
        }
        .box {
            width: 800px;
            height: 60px;
            /*margin: 0 auto;*/
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row bg-pink">
            <!--柵格系統-->
            <!--1.將父級的width等分為12等分, 子級占父級寬度的多少等分-->
            <!--2.子級們的總占比不要超過12等分-->
            <!--3.在12等分內,子級同行顯示-->
            <div class="bg-danger col-md-4"></div>
            <div class="bg-info col-md-9"></div>
        </div>
        <div class="row box bg-warning">
            <!--4.總占比小於12等分,偏移通過col-?-offset-?來偏移-->
            <!--5.設置一個平面寬度下的柵格, 大於該屏幕尺寸,可以運用此套css
            小於該屏幕尺寸,不適用, 但可以接着設置更小屏幕尺寸的柵格-->
            <div class="bg-danger col-md-4 col-sm-6 col-xs-10"></div>
            <div class="bg-info col-md-7 col-md-offset-1 col-sm-6 col-xs-12"></div>
        </div>
    </div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</html>


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        .row {
            /*background-color: yellow;*/
        }
        .box {
            height: 60px;
            /*margin: 0 -15px;*/
        }
        .left {
            margin-right: 25px;
        }
        .right {
            margin-left: 25px;
        }
    </style>
</head>
<body>
<!--需求1-->
<!--兩個盒子之間間距為30px-->
<div class="container">
    <div class="row">
        <div class="container col-md-6">
            <div class="box bg-warning"></div>
        </div>
        <div class="container col-md-6">
            <div class="box bg-danger"></div>
        </div>
    </div>
</div>
<!--兩個盒子之間間距50px, 且左右沒有留白-->
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="row">
                <div class="box bg-warning left"></div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="box bg-danger right"></div>
            </div>
        </div>
    </div>
</div>
<!--重點: 在任何結構下, 需要容器就可以設置容器來嵌套顯示內容,
需要row來配個容器布局,就可以在容器內部設置row-->
</body>

</html>

表格

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        .row {
            /*border: 1px solid #333;*/
        }
        th {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <table class="table table-striped table-bordered table-hover">
            <tr>
                <th>標題</th>
                <th>標題</th>
                <th>標題</th>
            </tr>
            <tr>
                <td>單元格</td>
                <td>單元格</td>
                <td>單元格</td>
            </tr>
            <tr class="success">
                <td>單元格</td>
                <td>單元格</td>
                <td>單元格</td>
            </tr>
            <tr>
                <td>單元格</td>
                <td class="danger">單元格</td>
                <td>單元格</td>
            </tr>
            <tr>
                <td>單元格</td>
                <td class="info" colspan="2" style="text-align: center">單元格</td>
                <!--<td>單元格</td>-->
            </tr>
        </table>

    </div>
</div>

</body>
<script src="js/jquery-3.3.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</html>

表單

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表單</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        .form-group {
            /*margin-bottom: 0;*/
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">

        <form action="">
            <div class="form-group">
                <!--label的for是關聯匹配的input的id, 當label點擊時會讓input獲取焦點-->
                <label for="usr">用戶名:</label>
                <input class="form-control" type="text" name="usr" id="usr">
            </div>
            <div class="form-group">
                <label for="pwd">密碼:</label>
                <input class="form-control" type="password" name="pwd" id="pwd">
            </div>
            <div class="form-group checkbox">
                <!--復選框-->
                <label>
                    <input type="checkbox" value="reading" name="sk">請閱讀
                </label>
            </div>
        </form>
        <!--總結: form中分行用form-group, 采用bs的js處理,input添加form-control-->


    </div>
    <hr>
    <div class="row">
        <form class="form-inline">
            <!--<div class="row">-->
            <div class="form-group">
                <label for="usr1">用戶名:</label>
                <input type="text" class="form-control" name="usr1" id="usr1" placeholder="請輸入用戶名">
            </div>
            <!--</div>-->
            <!--<div class="row">-->
            <div class="form-group">
                <label for="pwd1">密碼:</label>
                <input type="password" class="form-control" name="pwd1" id="pwd1">
            </div>
            <!--</div>-->
            <button type="submit" class="btn btn-default">提交</button>
        </form>
    </div>
    <hr>
    <div class="row">
        <div class="col-sm-6">
            <form action="" class="form-horizontal">
                <div class="form-group has-warning">
                    <label for="usr2" class="col-sm-2 control-label">用戶名:</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="usr2" id="usr2" placeholder="請輸入用戶名">
                    </div>
                </div>
                <div class="form-group has-success">
                    <label for="pwd2" class="col-sm-2 control-label">密碼:</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" name="pwd2" id="pwd2">
                    </div>
                </div>
                <div class="form">
                    <div class="col-sm-6 col-sm-offset-6">
                        <div class="row">
                            <button type="submit" class="btn-block">提交</button>
                        </div>
                    </div>
                </div>

            </form>

        </div>


    </div>

    <div class="row">
        <div class="row">
            <button type="button" class="btn">按鈕</button>
        </div>
        <button class="btn btn-danger">按鈕</button>
        <div class="row">
            <button class="btn btn-block">按鈕</button>
        </div>
        <div class="row">
            <button disabled class="my-btn btn btn-lg btn-warning" style="outline: none">按鈕按鈕按鈕按鈕按鈕</button>
        </div>

    </div>

    <div class="row">
        <i class="glyphicon glyphicon-step-backward" style="font-size: 100px"></i>
    </div>

</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script>
    $('.my-btn').click(function () {
        alert(123)
    })
</script>
</html>

移動端適配

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>移動端適配</title>
    <!--注: 當頁面沒有適配移動端設備-->
    <!--注; 移動端設備不再以屏幕像素px作為布局寬度, 以屏幕像素點作為屏幕布局寬度-->
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <!--<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">-->


    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">

    <style>
        .row.bg-pink {
            height: 60px;
            width: 375px;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div>
<div class="container">
    <div class="row bg-pink">

    </div>
</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</html>

組件

官方文檔鏈接 

Glyphicons 字體圖標    下拉菜單    按鈕組     按鈕式下拉菜單     輸入框組    導航    導航條     路徑導航     分頁    標簽      徽章    巨幕    頁頭     縮略圖     警告框     進度條     媒體對象     列表組     面板具有響應式特性的嵌入內容      Well

。。。。

JavaScript 插件

官方文檔鏈接 

概覽    過渡效果     模態框    下拉菜單     滾動監聽     標簽頁     工具提示     彈出框      警告框   按鈕    Collapse   Carousel      Affix

未完待續，之后會增加更多實例運用