第5章WEB05- BootStrap篇

今日任务

使用JQuery完成表单校验
使用BootStrap制作一个响应式页面
使用BootStrap制作网站首页

教学导航

教学目标

掌握什么是响应式及响应式原理

掌握BootStrap的栅格系统

了解BootStrap的其他组件及JS控件

教学方法

案例驱动法

1.1 上次课内容回顾：

JQuery：

* JQuery的概述：是一个轻量级的JavaScript的类库.对JS进行封装.

* 常见的JS的框架：

* JQuery，ExtJS，DWR，Prototype...

* JQuery的使用:

* 引入JQuery的JS.

* window.onload和$(document).ready(function(){});区别?

* onload页面加载完成后才会执行.执行一次

* ready在页面的DOM树绘制完成就会执行.执行多次.

* JS对象与JQuery对象的转换.

* JS-->JQuery: $(JS的对象)

* JQuery-->JS: JQ对象.get(0), JQ对象[0]

* JQuery的选择器：(*****)

* 基本选择器：

* ID选择器，类选择器，元素选择器，通配符选择器，选择器并列.

* 层级选择器：

* 空格 ,> ,+ ,~

* 过滤:

* :first,:last,:eq(),:even,:odd...

* 属性选择器:

* [属性名],[属性名=’属性值’]...

* 表单选择器:

* :input,:text,:password,:radio...

* 可见性:

* hidden

* 表单对象属性：

* :checked,:selected,:enable,:disable

* JQuery实现效果:

* show(),hide(),slideDown(),slideUp(),fadeIn(),fadeOut(),animate()

* JQuery样式操作:

* css();

* JQuery属性操作的方法:

* attr(),removeAttr(),prop(),removeProp(),html(),text(),val(),addClass(),removeClass()

* JQuery文档处理:

* append(),appendTo(),insertBefore(),insertAfter(),remove(),clone(),replaceAll()

* JQuery的事件:

* click(),change(),submit(),dblclick(),keyUp(),keyDown()...

* toggler(),hover() ---进行事件的切换.

1.2 案例一：使用JQuery完成表单校验：

1.2.1 需求：

之前使用JS做过表单的校验,表单校验对于后台的开发人员比较重要的.使用JQ完成一个复杂点表单的校验.

1.2.2 分析：

1.2.2.1 技术分析：

【JQuery的查找】

* find();

* parent();

* children();

【JQuery的事件处理】

* trigger和triggerHandler区别:

1.2.2.2 步骤分析:

【步骤一】：引入注册页面

【步骤二】：引入JQ的js.

【步骤三】：为必填项添加一个 *

【步骤四】：获得表单中的所有的输入项,为所有的输入项添加一个blur事件.

【步骤五】：判断当前输入项是什么(用户名，密码，邮箱)

【步骤六】：为不同的输入项做不同的校验.

【步骤七】：为表单元素添加一个submit事件.

【步骤八】：执行之前的blur函数.查找错误信息的长度,如果长度>0 有错误不能提交.

1.2.3 代码实现：

// 表单校验的操作

$(function(){

// 步骤一：为必填项添加一个 *.

$("form input.required").each(function(){

// 获得他的父元素：

$(this).parent().append("<b class='high'> *</b>");

});

// 步骤二：获得所有的输入项,为输入项添加一个blur事件.

$("form input").blur(function(){

// 获得该元素的父元素：

var $parent = $(this).parent();

// 将原有的信息清除掉.

$parent.find(".formtips").remove();

// 确定点击的输入项是谁?

if($(this).is("#username")){

// 判断用户名是否为空:

if(this.value == ""){

// 向文本框后添加一个错误提示.

$parent.append("<span class='formtips onError'>用户名不能为空</span>");

}else{

// 向文本框后添加一个正确提示.

$parent.append("<span class='formtips onSuccess'>用户名输入正确</span>");

}

if($(this).is("#password")){

// 判断用户名是否为空:

if(this.value == ""){

// 向文本框后添加一个错误提示.

$parent.append("<span class='formtips onError'>密码不能为空</span>");

}else{

// 向文本框后添加一个正确提示.

$parent.append("<span class='formtips onSuccess'>密码输入正确</span>");

}

}).keyup(function(){

$(this).triggerHandler("blur");

}).focus(function(){

$(this).triggerHandler("blur");

});

// 为表单添加一个submit事件.

$("form").submit(function(){

// 执行表单中blur事件.

$("form :input").trigger("blur");

// 获得错误信息的长度.

var errorLength = $(".onError").length;

if(errorLength > 0){

return false;

}

});

1.3 案例二：使用BootStrap设计一个响应式的页面：

1.3.1 需求：

设计一套页面能够通用在不同的设备上,在手机,pad上,电脑上都可以浏览这个网页,而不影响正常的浏览的方式.

1.3.2 分析：

1.3.2.1 技术分析：

【BootStrap的概述】

什么是BootStrap

BootStrap可以在那些地方使用:

BootStrap设计出响应式页面,由它设计页面可以在手机,PAD,PC都可以直接访问.

BootStrap的使用:

下载BootStrap:

http://www.bootcss.com

引入的文件

添加一个<meta>标签：

【BootStrap的全局CSS】

BootStrap的框架提供了一系列的CSS的样式.这些样式可以直接使用.

布局容器：

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

使用.row样式定义栅格的行.

定义列：.col-lg-n .col-md-n .col-sm-n .col-xs-n

排版：

【BootStrap的组件】

【BootStrap的JS的插件】

1.3.3 代码实现

1.4 案例三：使用BootStrap布局首页

1.4.1 需求：

1.4.2 分析：

1.4.2.1 技术分析：

【BootStrap的组件和JS的插件】

1.4.2.2 步骤分析：

【步骤一】：定义一个外层div元素

【步骤二】：定义里层8个div

【步骤三】：为每层中的div添加元素.

1.4.3 代码实现：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</div>

</div>

<span class="sr-only">Toggle navigation</span>

</button>

</div>

<li class="active"><a href="#">手机数码 <span class="sr-only">(current)</span></a></li>

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li><a href="#">Separated link</a></li>

<li><a href="#">One more separated link</a></li>

</ul>

</li>

</ul>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

</div>

</div>

</nav>

</div>

</ol>

</div>

</div>

</div>

</div>

<span class="sr-only">Previous</span>

</a>

</a>

</div>

<div >

</div>

<div >

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div >

</div>

<div >

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

关于我们联系我们招贤纳士法律声明友情链接支付方式配送方式服务声明广告声明 <br/>

</center>

</div>

</body>

</html>

秒客网

web-day5

第5章WEB05- BootStrap篇

1.1 上次课内容回顾：

1.2 案例一：使用JQuery完成表单校验：

1.2.1 需求：

1.2.2 分析：

1.2.2.1 技术分析：

1.2.2.2 步骤分析:

1.2.3 代码实现：

1.3 案例二：使用BootStrap设计一个响应式的页面：

1.3.1 需求：

1.3.2 分析：

1.3.2.1 技术分析：

1.3.3 代码实现

1.4 案例三：使用BootStrap布局首页

1.4.1 需求：

1.4.2 分析：

1.4.2.1 技术分析：

1.4.2.2 步骤分析：

1.4.3 代码实现：