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 {
            /* 500px;*/
            height: 100px;
            background-color: orange;
            margin: 0 auto;
        }



        /*屏幕尺寸 >1200px 会激活该响应式分支*/
        @media (min- 1200px) {
            .box {
                 1200px;
            }
        }
        /*992px ~ 1200px*/
        @media (min- 992px) and (max- 1200px) {
            .box {
                 992px;
            }
        }
        /*小于992px*/
         @media (max- 992px) {
            .box {
                 50px;
            }
        }

        /*用来完成响应式布局
        @media (min- 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 {
             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;
             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

未完待续，之后会增加更多实例运用