第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的更多相关文章

day5 liaoxuefeng---访问数据库、web开发、异步IO
一.访问数据库二.web开发三.异步IO
[红日安全]Web安全Day5 - 任意文件上传实战攻防
本文由红日安全成员: MisakiKata 编写,如有不当,还望斧正. 大家好,我们是红日安全-Web安全攻防小组.此项目是关于Web安全的系列文章分享,还包含一个HTB靶场供大家练习,我们给这个项目 ...
Web大前端面试题-Day5
1.写一个深度克隆方法(es5)? /** * 深拷贝 * @param {object}fromObj 拷贝的对象 * @param {object}toObj 目标对象 */ function ...
撩课-Web大前端每天5道面试题-Day5
1.写一个深度克隆方法(es5)? /** * 深拷贝 * @param {object}fromObj 拷贝的对象 * @param {object}toObj 目标对象 */ function d ...
day5 SpringSecurity权限控制jsr250注解不起作用 AOP日志排除不需要织入的方法 web.xml配置错误码页面
[译]36 Days of Web Testing(一)
[前言]最近负责的一次迭代发布中,一个小需求涉及前端JS改动,在测试这个需求的过程中忽略了浏览器兼容性测试,导致了一个线上bug.恶补下web测试,<36Days of web testing& ...
黑盒测试实践--Day5 11.29
黑盒测试实践--Day5 11.29 今天完成任务情况: 分析系统需求,完成场景用例设计小组负责测试的同学学习安装自动测试工具--QTP,并在线学习操作小黄今天的任务是完成场景测试用例的设计.在 ...
java攻城师之路--复习java web之Cookie_Session
Servlet技术用来动态生成网页数据资源Servlet生成HTML 页面数据时,所有内容都是通过 response.getWriter response.getOutputStream 向浏览器 ...
C# Web应用调试开启外部访问
在用C#开发Web应用时有个痛点,就是本机用VS开启Web应用调试时外部机器无法访问此Web应用.这里将会介绍如何通过设置允许局域网和外网机器访问本机的Web应用. 目录 1. 设置内网访问 2. 设 ...
网页提交中文到WEB容器的经历了些什么过程....
先准备一个网页 <html><meta http-equiv="Content-Type" content="text/html; charset=gb ...

随机推荐

Mac Terminal
一.简介二.实用 1)update-apps-using-terminal-mac https://www.maketecheasier.com/update-apps-using-termin ...
opencv中imread第二个参数的意义
文档中是这么写的: Flags specifying the color type of a loaded image: CV_LOAD_IMAGE_ANYDEPTH - If set, return ...
C++中的npos，size_t,size_type
string类提供了6种查找函数,每种函数以不同形式find命名,这些操作全都返回string::size_type类型的值,以下标形式标记查找匹配所发生的位置,或返回一个名为string::npos ...
sFlow-rt安装部署
sFlow技术是一种以设备端口为基本单元的数据流随机采样的流量监控技术,不仅可以提供完整的第二层到第四层甚至全网范围内的实时流量信息,而且可以适应超大网络流量(如大于10Gbit/s)环境下的流量 ...
iOS.UITableView.SectionIndex
1. 为tableview中section建立索引来加速tableview的滚动. http://nshipster.com/uilocalizedindexedcollation/ 2. 获取汉字的 ...
image src base64 svg
1.显示img: 大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如:data:image/png;base64, iVBORw0KGgoAAAANSUhEUgA ...
What is MaxiSys Pro MS908P Software Advantage
The Autel Maxisys Pro Diagnostic Platform is an evolutionary smart solution for specialized automoti ...
[Centos] ERROR: Could not find useradd in chroot, maybe the install failed?
[mockbuild at localhost ~]$ mock -r centos-5-x86_64-testdev.cfg initinitcleanprepThis may take a whi ...
PHP 获取当前所在的类名、方法名等
PHP获取当前类名.方法名 __CLASS__ 获取当前类名 __FUNCTION__ 当前函数名(confirm) __METHOD__ 当前方法名 (bankcard::confirm) _ ...
DataTable表连接
public static System.Data.DataTable TableJoin(System.Data.DataTable dt, System.Data.DataTable dtDeta ...

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 代码实现：

web-day5的更多相关文章

随机推荐

热门专题