Bootstrap 使用教程 與jQuery的Ajax方法
jQuery.ajax(url,[settings])
更加詳細的內容參考 jQuery API 中文在線手冊 javascript
概述
經過 HTTP 請求加載遠程數據。css
jQuery 底層 AJAX 實現。簡單易用的高層實現見 $.get, $.post 等。$.ajax() 返回其建立的 XMLHttpRequest 對象。大多數狀況下你無需直接操做該函數，除非你須要操做不經常使用的選項，以得到更多的靈活性。html
最簡單的狀況下，$.ajax()能夠不帶任何參數直接使用。前端
注意，全部的選項均可以經過$.ajaxSetup()函數來全局設置。java
回調函數
若是要處理$.ajax()獲得的數據，則須要使用回調函數。beforeSend、error、dataFilter、success、complete。python
- beforeSend 在發送請求以前調用，而且傳入一個XMLHttpRequest做爲參數。
- error 在請求出錯時調用。傳入XMLHttpRequest對象，描述錯誤類型的字符串以及一個異常對象（若是有的話）
- dataFilter 在請求成功以後調用。傳入返回的數據以及"dataType"參數的值。而且必須返回新的數據（多是處理過的）傳遞給success回調函數。
- success 當請求以後調用。傳入返回後的數據，以及包含成功代碼的字符串。
- complete 當請求完成以後調用這個函數，不管成功或失敗。傳入XMLHttpRequest對象，以及一個包含成功或錯誤代碼的字符串。
數據類型
$.ajax()函數依賴服務器提供的信息來處理返回的數據。若是服務器報告說返回的數據是XML，那麼返回的結果就能夠用普通的XML方法或者jQuery的選擇器來遍歷。若是見獲得其餘類型，好比HTML，則數據就以文本形式來對待。jquery
經過dataType選項還能夠指定其餘不一樣數據處理方式。除了單純的XML，還能夠指定 html、json、jsonp、script或者text。git
其中，text和xml類型返回的數據不會通過處理。數據僅僅簡單的將XMLHttpRequest的responseText或responseHTML屬性傳遞給success回調函數，github
'''注意'''，咱們必須確保網頁服務器報告的MIME類型與咱們選擇的dataType所匹配。好比說，XML的話，服務器端就必須聲明 text/xml 或者 application/xml 來得到一致的結果。ajax
若是指定爲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
未完待續，以後會增長更多實例運用
- 1. jQuery ajax使用方法
- 2. bootstrap modal ajax方式與jquery validate使用失效解決
- 3. Jquery+ajax+bootstrap
- 4. jQuery ajax - ajax() 方法
- 5. Jquery AJAX 框架的使用方法
- 6. jQuery 封裝 ajax 的使用方法
- 7. jquery+ajax+ashx。ashx的使用方法
- 8. jquery的ajax方法
- 9. jQuery ajax() 方法
- 10. JQuery的AJAX調用（二）——AJAX方法
- 更多相關文章...
- • TortoiseSVN 使用教程 - SVN 教程
- • MySQL Workbench使用教程 - MySQL教程
- • Git可視化極簡易教程 — Git GUI使用方法
- • Composer 安裝與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。