jQuery笔记

CDN:


<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

jQuery语法


基础语法:

$(selector).action()

通过$符号定义使用jQuery

选择符(selector)查询html元素

jQuery的action执行对元素的操作

jQuery入口函数


$(document).ready(function(){
    
})

$(function(){
    
})

为了防止文档在没有完全加载之前运行了jQuery,对html进行了操作

在所有html标签加载完即会执行

区别于javaScript的所有内容加载完毕才会执行

jQuery选择器

jQuery选择器是基于元素的id、类、属性等值进行查找,基于已存在的css选择器

  • $("*")选取所有html元素
  • $(this)选取当前html元素
  • $("#test")表示通过id获取元素
  • $(".test")表示通过class获取元素
  • $("div")通过元素名称获取元素

所得到的元素可能是一个也可能是多个

jQuery事件


方法描述
bind()向匹配元素附加一个或更多事件处理器
blur()触发、或将函数绑定到指定元素的 blur 事件
change()触发、或将函数绑定到指定元素的 change 事件
click()触发、或将函数绑定到指定元素的 click 事件
dblclick()触发、或将函数绑定到指定元素的 double click 事件
delegate()向匹配元素的当前或未来的子元素附加一个或多个事件处理器
die()移除所有通过 live() 函数添加的事件处理程序。
error()触发、或将函数绑定到指定元素的 error 事件
event.isDefaultPrevented()返回 event 对象上是否调用了 event.preventDefault()。
event.pageX相对于文档左边缘的鼠标位置。
event.pageY相对于文档上边缘的鼠标位置。
event.preventDefault()阻止事件的默认动作。
event.result包含由被指定事件触发的事件处理器返回的最后一个值。
event.target触发该事件的 DOM 元素。
event.timeStamp该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
event.type描述事件的类型。
event.which指示按了哪个键或按钮。
focus()触发、或将函数绑定到指定元素的 focus 事件
keydown()触发、或将函数绑定到指定元素的 key down 事件
keypress()触发、或将函数绑定到指定元素的 key press 事件
keyup()触发、或将函数绑定到指定元素的 key up 事件
live()为当前或未来的匹配元素添加一个或多个事件处理器
load()触发、或将函数绑定到指定元素的 load 事件
mousedown()触发、或将函数绑定到指定元素的 mouse down 事件
mouseenter()触发、或将函数绑定到指定元素的 mouse enter 事件
mouseleave()触发、或将函数绑定到指定元素的 mouse leave 事件
mousemove()触发、或将函数绑定到指定元素的 mouse move 事件
mouseout()触发、或将函数绑定到指定元素的 mouse out 事件
mouseover()触发、或将函数绑定到指定元素的 mouse over 事件
mouseup()触发、或将函数绑定到指定元素的 mouse up 事件
one()向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
ready()文档就绪事件(当 HTML 文档就绪可用时)
resize()触发、或将函数绑定到指定元素的 resize 事件
scroll()触发、或将函数绑定到指定元素的 scroll 事件
select()触发、或将函数绑定到指定元素的 select 事件
submit()触发、或将函数绑定到指定元素的 submit 事件
toggle()绑定两个或多个事件处理器函数,当发生轮流的 click 事件时执行。
trigger()所有匹配元素的指定事件
triggerHandler()第一个被匹配元素的指定事件
unbind()从匹配元素移除一个被添加的事件处理器
undelegate()从匹配元素移除一个被添加的事件处理器,现在或将来
unload()触发、或将函数绑定到指定元素的 unload 事件

食用方式


$("div").click(function(){

})

一个常用方法的速记表格


键盘事件鼠标事件表单事件
keypressclicksubmit
keydowndbclickfocus
keyupmouseenterblur
mouseleavechange

jQuery效果


隐藏和显示元素


hide/show

显示和隐藏元素的方法

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

toggle

将显示和隐藏整合后的方法

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

食用方式

hide/show

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

带上了speed参数的

$("button").click(function(){
  $("p").hide(1000);
});

toggle

$("button").click(function(){
  $("p").toggle();
});

淡入淡出效果


原理

渐进调整透明度,当透明度为0的时候,将display设为none

fadeIn()

用于淡入已经隐藏的元素

$(selector).fadeIn(speed,callback)

食用方式

$(function(){
    $("#btn").click(function(){
         $("#box1").fadeIn(2000)
    })
})
fadeOut()

用于淡出元素

$(selector).fadeOut(speed,callback)

食用方式

$(function(){
    $("#btn").click(function(){
         $("#box1").fadeOut(2000)
    })
})
fadeToggle

淡入淡出切换

$(selector).fadeToggle(speed,callback)

食用方式

$(function(){
    $("#btn").click(function(){
         $("#box1").fadeToggle(2000)
    })
})
fadeTo

操作透明度

$(selector).fadeTo(speed, oqacity, callback)

食用方式

$(function(){
    $("#btn").click(function(){
         $("#box1").fadeTo(2000,0.5)
    })
})

滑动效果

slideDown

元素向下滑动

$(selector).slideDown(speed, callback)

食用方式

$(function(){
    $("#btn").click(function(){
         $("#box1").slideDown(2000)
    })
})
slideUp

元素向上滑动

$(selector).slideUp(speed, callback)

食用方式

$(function(){
    $("#btn").click(function(){
         $("#box1").slideUp(2000)
    })
})
slideToggle

元素滑动的切换

$(selector).slideToggle(speed, callback)

食用方式

$(function(){
    $("#btn").click(function(){
         $("#box1").slideToggle(2000)
    })
})

自定义动画

animate

此方法用于创建自定义动画

$(selector).animate({params},speed,callback)

{params},必填参数,定义形成动画的css属性

食用方式

//同步执行
$(function () {
    $("#btn").click(function(){
        $("#box1").animate({
            width: '300px',
            height:'400px'
        },3000)
    })
})

//队列执行
$(function () {
    $("#btn").click(function(){
        $("#box1").animate({width: '300px'},3000)
        $("#box1").animate({height: '300px'},3000)
    })
})

html Dom的操作

获取内容

text

$(selector).text(): 设置或返回元素文本内容 等价于 innerText

赋值:

$(selector).text("moesy")

取值:

var mo = $(selector).text()

html

$(selector).html(): 设置或返回元素的内容 (包含了html标记) 等价于 innerHTML

赋值取值同上

val

$(selector).val(): 设置或返回表单字段的值 等价于 value()

赋值取值同上

attr

$(selector).attr(): 获取属性

赋值:

$(selector).attr("class","box"): 为class属性赋值box

取值

var moe = $(selector).attr("class")

添加html元素

append

在元素内的末尾插入数据

$(selector).append("<h1>内容<h1>")

prepend

在元素内的开头插入数据

$(selector).prepend("<h1>内容<h1>")

after

在元素之后插入数据

$(selector).after("<h1>内容<h1>")

before

在元素之前插入数据

$(selector).before("<h1>内容<h1>")

删除html元素

remove

删除被选元素以及子元素

$(selector).remove()

empty

仅删除子元素

$(selector).empty()

删除元素的方法中,可以追加过滤器

示例

$("#box1").remove(".111")

删除id为box的元素及其子元素,但是不删除class为111的元素

操作css

css

添加元素的css属性

$("box1").css({'font-size','10px'})

多个属性值用逗号分隔

addClass

向元素添加一个或多个类

示例:

$("#p1").addClass("big-font")

一个可以在jQuery中执行的引用类的方式

应用实例:聊天软件中的字体

removeClass

删除元素中指定的类

示例:

$("#p1").removeClass("big-font")

toggleClass

切换元素中类删除和添加

$("#p1").toggleClass("big-font")

练习:改变网页字体和颜色


<body>
    <textarea id="txt">Moesy</textarea>
    </br>
    选择颜色
    </br>
    <input id="col" type="color">
    </br>
    选择大小
    </br>
    <select id="siz">
        <option value="8px">8</option>
        <option value="16px">16</option>
        <option value="24px">24</option>
    </select>
    </br>
    <button id="cha">改变字体</button>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        var colo;
        var si;
        $(document).ready(function () {
            $("#cha").click(function () {
                colo = $("#col").val();
                // console.log(colo);
                $("#txt").css({'color':colo});
                si = $("#siz").val();
                // console.log(si)
                $("#txt").css({'font-size':si});
            })
        })
    </script>

</body>

</html>

jQuery Ajax

load

从服务器加载数据并且返回数据放入到被选元素中

语法

$(selector).load(url,data,function(response,status,xhr))
参数描述
url规定要将请求发送到哪个 URL。
data可选。规定连同请求发送到服务器的数据。
function(response,status,xhr)可选。规定当请求完成时运行的函数。额外的参数:response - 包含来自请求的结果数据status - 包含请求的状态("success", "notmodified", "error", "timeout" 或 "parsererror")xhr - 包含 XMLHttpRequest 对象

食用方式

$(function(){
    $("#box1").load("http://10.25.185.76:8080/AjaxServer/TestController")
})

get

get: 从指定的资源上请求数据

get的取值可以传输到它的callback方法的第一个变量上

get() 方法通过远程 HTTP GET 请求载入信息。

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。

语法

$.get(url,data,success(response,status,xhr),dataType)
参数描述
url必需。规定将请求发送的哪个 URL。
data可选。规定连同请求发送到服务器的数据。
success(response,status,xhr)可选。规定当请求成功时运行的函数。额外的参数:response - 包含来自请求的结果数据status - 包含请求的状态xhr - 包含 XMLHttpRequest 对象
dataType可选。规定预计的服务器响应的数据类型。默认地,jQuery 将智能判断。可能的类型:"xml""html""text""script""json""jsonp"

食用方式

$(function(){
    $.get("http://10.25.185.76:8080/AjaxServer/TestController",function (data,status) {  
        $("#box1").text(data)
    })
})

界面格式化

$(function () {
    //get获取到的值可以传到callback匿名方法的第一个变量
    $.get("http://10.25.185.76:8080/AjaxServer/TestController",function (data,status) {  
        $("#box1").text(data)
        var json = JSON.parse(data);
        var html = "";
        $.each(json, function (index, value) {
            html += "<tr><td>" + value.userName + "<td>" + value.userAge + "</td>" + "<td>" + value.userEmail + "</td>" + "<td>" + value.userAddress + "</td>" + "</td></tr>"
        })
        $("#tab").html(html)
    })
})

post

post: 向指定资源提交处理的数据

post() 方法通过 HTTP POST 请求从服务器载入数据。

语法

$.post(url,data,success(data, textStatus, jqXHR),dataType)
参数描述
url必需。规定把请求发送到哪个 URL。
data可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR)可选。请求成功时执行的回调函数。
dataType可选。规定预期的服务器响应的数据类型。默认执行智能判断(xml、json、script 或 html)。

食用方式

var data = $("#form1").serialize();
$.post("http://10.25.185.76:8080/AjaxServer/TestController",data,function () {
})

ajax()

$.ajax([settings])

[setting]方法以如下格式键入

{name:value,name:value}

参数即回调函数速查

参数
options
类型:Object

可选。AJAX 请求设置。所有选项都是可选的。

async
类型:Boolean

默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。

注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。

beforeSend(XHR)
类型:Function

发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。

XMLHttpRequest 对象是唯一的参数。

这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。

cache
类型:Boolean

默认值: true,dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。

jQuery 1.2 新功能。

complete(XHR, TS)
类型:Function

请求完成后回调函数 (请求成功或失败之后均调用)。

参数: XMLHttpRequest 对象和一个描述请求类型的字符串。

这是一个 Ajax 事件。

contentType
类型:String

默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。

默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器(即使没有数据要发送)。

context
类型:Object

这个对象用于设置 Ajax 相关回调函数的上下文。也就是说,让回调函数内 this 指向这个对象(如果不设定这个参数,那么 this 就指向调用本次 AJAX 请求时传递的 options 参数)。比如指定一个 DOM 元素作为 context 参数,这样就设置了 success 回调函数的上下文为这个 DOM 元素。

就像这样:

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

发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

dataFilter
类型:Function

给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数:data 是 Ajax 返回的原始数据,type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。

dataType
类型:String

预期服务器返回的数据类型。如果不指定,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": 返回纯文本字符串
error
类型:Function

默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。

有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。

如果发生了错误,错误信息(第二个参数)除了得到 null 之外,还可能是 "timeout", "error", "notmodified" 和 "parsererror"。

这是一个 Ajax 事件。

global
类型:Boolean

是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。

ifModified
类型:Boolean

仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中,它也会检查服务器指定的 'etag' 来确定数据没有被修改过。

jsonp
类型:String

在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数里的 "callback" 部分,比如 {jsonp:'onJsonPLoad'} 会导致将 "onJsonPLoad=?" 传给服务器。

jsonpCallback
类型:String

为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候,指定这个回调函数名。

password
类型:String

用于响应 HTTP 访问认证请求的密码

processData
类型:Boolean

默认值: true。默认情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。

scriptCharset
类型:String

只有当请求时 dataType 为 "jsonp" 或 "script",并且 type 是 "GET" 才会用于强制修改 charset。通常只在本地和远程的内容编码不同时使用。

success
类型:Function

请求成功后的回调函数。

参数:由服务器返回,并根据 dataType 参数进行处理后的数据;描述状态的字符串。

这是一个 Ajax 事件。

traditional
类型:Boolean

如果你想要用传统的方式来序列化数据,那么就设置为 true。请参考工具分类下面的 jQuery.param 方法。

timeout
类型:Number

设置请求超时时间(毫秒)。此设置将覆盖全局设置。

type
类型:String

默认值: "GET")。请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。

url
类型:String

默认值: 当前页地址。发送请求的地址。

username
类型:String

用于响应 HTTP 访问认证请求的用户名。

xhr
类型:Function

需要返回一个 XMLHttpRequest 对象。默认在 IE 下是 ActiveXObject 而其他情况下是 XMLHttpRequest 。用于重写或者提供一个增强的 XMLHttpRequest 对象。这个参数在 jQuery 1.3 以前不可用。

回调函数
如果要处理 $.ajax() 得到的数据,则需要使用回调函数:beforeSend、error、dataFilter、success、complete。

beforeSend
在发送请求之前调用,并且传入一个 XMLHttpRequest 作为参数。

error
在请求出错时调用。传入 XMLHttpRequest 对象,描述错误类型的字符串以及一个异常对象(如果有的话)

dataFilter
在请求成功之后调用。传入返回的数据以及 "dataType" 参数的值。并且必须返回新的数据(可能是处理过的)传递给 success 回调函数。

success
当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。

complete
当请求完成之后调用这个函数,无论成功或失败。传入 XMLHttpRequest 对象,以及一个包含成功或错误代码的字符串。

食用方式

//获取表单数据
//serialize序列化方法,将数据组装为一个键值对模式
var data = $("#form1").serialize();
$.ajax({
    //String类型,默认值为"get",用于切换请求方式
    type:"post",
    //String类型,默认值为当前页地址
    url:"http://10.25.185.76:8080/AjaxServer/TestController",
    //布尔类型,默认为true,规定异步或同步,true为异步,false为同步
    async:true,
    //String类型,发送到服务器的数据将自动转换为请求字符串格式
    data:data,
        success:function(){
            showData()
        }
})

扩展

jquery.validate

validate是jquery的一个验证插件,整合了常用的验证输入内容的正则表达式,可以用作前端的数据过滤。

在标签中加入对应属性,即可调用该插件

cdn

//中文包
https://libs.cdnjs.net/jquery-validate/1.9.0/localization/messages_cn.min.js

//本体
https://libs.cdnjs.net/jquery-validate/1.9.0/jquery.validate.min.js

默认校验规则

required:true               必输字段
remote:"remote-valid.jsp"   使用ajax方法调用remote-valid.jsp验证输入值
email:true                  必须输入正确格式的电子邮件
url:true                    必须输入正确格式的网址
date:true                   必须输入正确格式的日期,日期校验ie6出错,慎用
dateISO:true                必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
number:true                 必须输入合法的数字(负数,小数)
digits:true                 必须输入整数
creditcard:true             必须输入合法的信用卡号
equalTo:"#password"        输入值必须和#password相同
accept:                    输入拥有合法后缀名的字符串(上传文件的后缀)
maxlength:5                输入长度最多是5的字符串(汉字算一个字符)
minlength:10               输入长度最小是10的字符串(汉字算一个字符)
rangelength:[5,10]         输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
range:[5,10]               输入值必须介于 5 和 10 之间
max:5                      输入值不能大于5
min:10                     输入值不能小于10

示例

<form action="http://blogyin.top" id="form1" method="get">
        <fieldset>
            <div>
                <label for="cname">用户名:(必填,最少两个字)</label>
                <input id="cname" name="username" minlength="5" maxlength="10" type="text" required>
            </div>
            <div>
                <label for="cage">年龄:(必填)</label>
                <input id="cage" name="userage" type="number" max="200" required>
            </div>
            <div>
                <label for="cemail">邮箱:(必填)</label>
                <input id="cemail" name="useremail" type="email" required>
            </div>
            <div>
                <label for="caddress">地址:(必填)</label>
                <input id="caddress" type="text" name="useraddress" maxlength="20" required>
            </div>
            <div>
                <input type="submit" value="点击查看涩图">
            </div>
        </fieldset>
    </form>
    <script>
        $(function(){
            $("#form1").validate();
        })
    </script>

自定义示例

    <body>
        <form id="form1">
            <div>
                <label for="username">用戶</label>
                <input id="username" name="username" type="text" />
            </div>
            <div>
                <label for="password">密码</label>
                <input id="password" name="password" type="password" />
            </div>
            <div>
                <label for="confirm_password">验证密码</label>
                <input id="confirm_password" name="confirm_password" type="password" />
            </div>
            <div>
                <label for="email">邮箱</label>
                <input id="email" name="email" type="email" />
            </div>
            <div>
                <label for="agree">同意声明</label>
                <input id="agree" name="agree" type="checkbox" />
            </div>
            <div>
                <input type="submit" value="注册" />
            </div>
        </form>
        <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="js/jquery.validate.js"></script>
        <script type="text/javascript" src="js/messages_zh.js"></script>
        <script>
            $.validator.setDefaults({
                submitHandler: function() {
                    alert("提交数据")
                }
            })

            $(function() {
                $("#form1").validate({
                    rules: {
                        username: "required",
                        password: {
                            required: true,
                            minlength: 5
                        },
                        email: {
                            required: true,
                            email: true
                        },
                        confirm_password: {
                            required: true,
                            minlength: 5,
                            equalTo: "#password"
                        },
                        agree: "required"
                        
                    },
                    messages: {
                        username: "得莫,没有账号,就只能呆在无聊的三次元desu",
                        password: {
                            required: "呐呐,没有密码不行的啦,人家可不想让没有获得许可的坏人混进来",
                            minlength: "长度限制啦 最小5个哟"
                        },
                        confirm_password: {
                            required: "兄嘚 不就是在输入一次密码么 你倒是写啊?",
                            minlengナャテth: "长度限制啦 最小5个哟",
                            equalTo: "兄嘚 不就是在输入一次密码么 怎么还错了?"
                        },
                        agree:"呐呐,米娜桑都不愿意同意人家的要求吗"
                    }
                })
            })
        </script>
    </body>

BootStrap

用于响应式布局以及移动设备优先的前端框架

www.bootstrap.com

cdn

<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.1/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.1/js/bootstrap.js"></script>

布局容器

container

支持响应式的布局容器,其表现形式为左右留空间

container-fluid

100%宽度的布局容器

栅格系统

    <div class="container">
        <div class="row">
            <div class="col-md-4 col-xs-4">4</div>
            <div class="col-md-4 col-xs-4">4</div>
            <div class="col-md-4 col-xs-4">4</div>
        </div>
        <div class="row">
            <div class="col-md-4 col-sm-2">2</div>
            <div class="col-md-4 col-sm-8">8</div>
            <div class="col-md-4 col-sm-2">2</div>
        </div>
        <div class="row">
            <div class="col-md-2 col-xs-2">2</div>
            <div class="col-md-10 col-xs-10">10</div>
        </div>
    </div>
超小屏幕(<768px)小屏幕 平板(>=768px)中等屏幕 笔记本显示器(>=992px)超大屏幕(>=1200px)
前缀.col-xs-.col-sm-.col-md-.col-lg-

列偏移

col-md-offse-(number)

<div class="col-md-offse-4 col-sm-offse-8"></div>

表格样式

                    <table class="table table-striped table-bordered table-hover">
                        <tr>
                            <th>Header</th>
                            <th>Header</th>
                            <th>Header</th>
                        </tr>
                        <tr>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                        </tr>
                        <tr>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                        </tr>
                        <tr>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                        </tr>
                        <tr>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                        </tr>
                    </table>

表单

            <div class="row">
                <div class="col-md-4 col-md-offset-2">
                    <form>
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input id="email" type="email" class="form-control" placeholder="email">
                        </div>
                        <div class="form-group">
                            <label for="password">password</label>
                            <input id="password" type="password" class="form-control" placeholder="password">
                        </div>
                        <button class="btn btn-default">提交</button>
                    </form>
                </div>
            </div>
            <br>
            <br>
            <br>
            <br>
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <form class="form-inline">
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input id="email" type="email" class="form-control" placeholder="email">
                        </div>
                        <div class="form-group">
                            <label for="password">password</label>
                            <input id="password" type="password" class="form-control" placeholder="password">
                        </div>
                        <button class="btn btn-default">提交</button>
                    </form>
                </div>
            </div>
            <br>
            <br>
            <br>
            <br>
            <div class="row">
                <div class="col-md-6 col-md-offset-2">
                    <form class="form-horizontal" action="http://blogyin.top">
                        <div class="form-group">
                            <label for="email" class="col-md-2">Email</label>
                            <div class="col-md-10">
                                <input id="email" type="email" class="form-control" placeholder="email">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="password" class="col-md-2">password</label>
                            <div class="col-md-10">
                                <input id="password" type="password" class="form-control" placeholder="password">
                            </div>
                            <textarea class="form-control" rows="3"></textarea>
                        </div>
                        <button class="btn btn-default">提交</button>
                    </form>
                </div>
            </div>
            <br>
            <br>
            <br>
            <br>
            <div class="row">
                <div class="col-md-5 col-md-offset-2">
                    <form class="form-inline">
                        <div class="form-group">
                            <div class="input-group-addon">
                                ¥
                            </div>
                            <input type="text" class="form-control">
                            <div class="input-group-addon">.00</div>
                        </div>
                        
                    </form>
                </div>
            </div>
        </div>
Last modification:November 25th, 2020 at 01:57 pm