day 48小结

目录

• jQuery补充
  • each
  • .data()
  • 插件(了解)
• 前端框架Bootstrap
  • bootstrap简介
  • 页面布局
  • 栅格系统
  • 排版
    • 突出显示
    • 对齐
    • 改变大小写
    • 引用
  • 列表
    • 无序列表
    • 有序列表
    • 无样式列表
    • 内联列表
    • 水平排列
  • 表格
    • 条纹状表格
    • 带边框的表格
    • 鼠标悬停
    • 紧缩表格
    • 状态栏
• 组件
  • Glyphicons 字体图标
• 终

jQuery补充

each

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

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

li =[10,20,30,40]
$.each(li,function(i, v){
  console.log(i, v);//index是索引，ele是每次循环的具体元素。
})

输出

010
120
230
340

.each(funcion(index,Element)):

描述: 遍历一个jQuery对象,为每一个元素执行一给函数

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

// 为每一个li标签添加foo
$("li").each(function(){
  $(this).addClass("c1");
});

注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的 .each()方法：

也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：

$("li").addClass("c1");  // 对所有标签做统一操作

注意:

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

终止each循环

return false;

.data()

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

.data(key, value):

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

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

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

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

.removeData(key):
描述: 一处存放在元素上的数据, 不加key参数表示移除所有保存的数据

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

插件(了解)

jQuery.extend(object)
jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。

<script>
jQuery.extend({
  min:function(a, b){return a < b ? a : b;},
  max:function(a, b){return a > b ? a : b;}
});
jQuery.min(2,3);// => 2
jQuery.max(4,5);// => 5
</script>

jQuery.fn.extend(object)
一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法

<script>
  jQuery.fn.extend({
    check:function(){
      return this.each(function(){this.checked =true;});
    },
    uncheck:function(){
      return this.each(function(){this.checked =false;});
    }
  });
// jQuery对象可以使用新添加的check()方法了。
$("input[type='checkbox']").check();
</script>

单独写在文件中的扩展

(function(jq){
  jq.extend({
    funcName:function(){
    ...
    },
  });
})(jQuery);

前端框架Bootstrap

bootstrap简介

​ 下载地址: https://v3.bootcss.com/

​ CDN地址: https://www.bootcdn.cn/

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstraptheme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

​ 前端框架Bootstrap 是基于JQuery的 所以你用框架动态效果的时候 必须确保先导入JQuery
用Bootstrap之前 先导入JQuery

​ 你需要导三个文件:
​ 第一个是jQuery
​ 第二个是css文件
​ 第三个是js文件

页面布局

布局容器
使用前端框架之后 所有标签样式的调整 全部是通过class属性值来的

<div class="container"></div>        左右两边留白
<div class="container-fluid"></div>  全屏显示

栅格系统

​ 默认情况下
​ 一个row就是一行
​ 每个row默认会均分成12份
​ 你可以通过col-md-Num 来选择你想要占几份
​ 注意: 你当前占了几份 还剩几份 不要超过12份,不然多余的会将布局打乱

例如:
<div class="container-fluid">
    <div class="row">
        <div class='col-md-6'>
            ...
        </div>
        <div class='col-md-6'>
            ...
        </div>
    </div>
</div>

栅格参数

	超小屏幕 手机 (<768px)	小屏幕 平板 (≥768px)	中等屏幕 桌面显示器 (≥992px)	大屏幕 大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度	None （自动）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

不同的屏幕设置不同的宽度

<div class="row">
 <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
 <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
 <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
 <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
 <!-- Optional: clear the XS cols if their content doesn't match in height -->
 <div class="clearfix visible-xs-block"></div>
 <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

列位置移动

通过使用.col-md-push-* 和.col-md-pull-* 类就可以很容易改变列(column)的顺序

<div class="row">
    <div class="col-md-9 col-md-push-3"></div>
    <div class="col-md-3 col-md-pull-9"></div>
</div>

排版

HTML中的标题标签,<h1>到<h6>均可以使用 另外还提供了.h1到.h6类 为的是给内联(inline)属性的文本赋予标题的样式

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6><h1>

标题内还可以包含<small>标签或赋予.small类的元素,可以用来标记副标题

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

突出显示

通过添加.lead类可以让段落突出显示

<p class="lead">
    突出显示
</p>

对齐

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p

改变大小写

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

引用

将任何 HTML 元素包裹在 中即可表现为引用样式。对于直接引用，我们建议用 标签

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

多样式引用

命名来源
添加 <footer> 用于标明引用来源。<cite>来源的名称可以包裹进 标签中。

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果

<blockquote class="blockquote-reverse">
  ...
</blockquote>

列表

无序列表

<ul>
  <li>...</li>
</ul>

有序列表

<ol>
  <li>...</li>
</ol>

无样式列表

<ul class="list-unstyled">
  <li>...</li>
</ul>

内联列表

通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行

<ul class="list-inline">
  <li>...</li>
</ul>

水平排列

.dl-horizontal 可以让 内的短语及其描述排在一行。开始是像 的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

表格

为任意 <table> 标签添加 .table类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。

<table class="table">
    <thead>
        <tr>
            <th>...</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>...</td>
        </tr>
    </tbody>
</table>

条纹状表格

通过 .table-striped 类可以给<tbody> 之内的每一行增加斑马条纹样式

<table class="table table-striped">
  ...
</table>

带边框的表格

添加 .table-bordered 类为表格和其中的每个单元格增加边框。

<table class="table table-bordered">
  ...
</table>

鼠标悬停

通过添加 .table-hover 类可以让<tbody> 中的每一行对鼠标悬停状态作出响应。

<table class="table table-hover">
  ...
</table>

紧缩表格

通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。

<table class="table table-condensed">
  ...
</table>

状态栏

通过这些状态类可以为行或单元格设置颜色。

Class	描述
.active	鼠标悬停在行或单元格上时所设置的颜色
.success	标识成功或积极的动作
.info	标识普通的提示信息或动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作

组件

Glyphicons 字体图标

不要和其他组件混合使用

图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <span> 标签，并将图标类应用到这个 <span> 标签上。

只对内容为空的元素起作用

图标类只能应用在不包含任何文本内容或子元素的元素上。

改变图标字体文件的位置

Bootstrap 假定所有的图标字体文件全部位于 ../fonts/ 目录内，相对于预编译版 CSS 文件的目录。如果你修改了图标字体文件的位置，那么，你需要通过下面列出的任何一种方式来更新 CSS 文件：

• 在 Less 源码文件中修改 @icon-font-path 和/或 @icon-font-name 变量。
• 利用 Less 编译器提供的 相对 URL 地址选项。
• 修改预编译 CSS 文件中的 url() 地址。

根据你自身的情况选择一种方式即可

终

更多内容请访问 Bootstrap