bootstrap

JQuery

动画效果

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])

each

jQuery.each(collection, callback(indexInArray, valueOfElement))：

描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。

.each(function(index, Element))：

描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。

.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。

注意

在遍历过程中可以使用return false来提前结束each循环

.data（）

在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

.data(key, value):

描述：在匹配的元素上存储任意相关数据。

$("div").data("k",100);//给所有div标签都保存一个名为k，值为100

.data(key):

描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。

$("div").data("k");//返回第一个div标签中保存的"k"的值

.removeData(key):

描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。

$("div").removeData("k");  //移除元素上存放k对应的数据

Bootstrap

基于jQuery的，使用框架动态效果的时候必须先导入jQuery

需要导的三个文件：jQuery，css，js

布局容器

使用前端框架之后 所有标签样式的调整 全部是通过class属性值来的
左右两边留白全屏显示

栅格系统

默认情况下：

一个row就是一行
​ 每个row默认会均分成12份
​ 可以通过col-md-Num 来选择想要占几份

栅格参数：

.col-xs-：超小屏幕（手机）

.col-sm-：小屏幕（屏幕）

.col-md-：中等屏幕（桌面显示器）

.col-lg-：大屏幕（大桌面显示器）

写在开头的两句代码：

<div class="container-fluid">
          <div class="row">
            ...
          </div>
        </div>

列偏移

col-md-offset-3

表格

为任意``标签添加.table类可以为其赋予基本的样式

表单

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 、 和 `` 元素都将被默认设置宽度属性为 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

浮动

通过添加一个类，可以将任意元素向左或向右浮动。!important 被用来明确 CSS 样式的优先级。

<div class="pull-left">...</div>   //向左浮动
<div class="pull-right">...</div>  //向右浮动

按钮

为 、 或 `` 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。

如：Button

通过改变btn-default可以改变按钮的颜色

btn-default  默认样式-白色
btn-primary  首选项-深蓝色
btn-success  成功-绿色
btn-info     一般信息-淡蓝色
btn-warning  警告-黄色
btn-danger   危险-红色