第五模块·WEB开发基础-第3章jQuery&Bootstrap
01-jQuery介绍
02-如何使用jQuery
03-jQuery的入口函数
04-jQuery对象和JS对象的相互转换
05-jQuery如何操作DOM
06-底层选择器
07-基本过滤器
08-属性选择器
09-过滤器选择方法
10-siblings选择器方法的基本使用
11-jQuery操作选项卡深入
12-index()索引的选取
13-基本的动画
14-卷帘门的动画效果
15-淡入淡出的自定义动画
16-二级菜单动画的使用
17-jQuery的标签属性操作
18-jQuery对DOM对象属性操作
19-jQuery对类样式的操作
20-jQuery对值的操作
21-父子之间插入操作一
22-父子之间插入操作二
23-兄弟之间插入操作
24-替换操作
25-删除和清空操作
26-操作input的value值
27-jQuery的位置信息
28-JS的事件流
29-事件冒泡的处理
30-抽屉评论简易布局
31-抽屉评论收起操作实现
32-事件对象
33-jQuery的单双击事件
34-jQuery的鼠标移入和移出事件
35-jQuery的移入和移出事件
36-jQuery的表单事件
37-jQuery的聚焦、失焦和键盘事件
38-事件委托
39-BS端那点儿事
40-什么是Ajax
41-MVC思想和jQuery的ajax_GET请求
42-jQuery的POST请求
43-POST请求的Bug修复
44-和风天气API接口文档介绍
45-jQuery插件库介绍
46-jQuery总结和作业分析（必看）
47-响应式介绍
48-@media媒体查询
49-Bootstrap介绍
50-Boostrap的下载和基本使用
51-Bootstrap的布局容器
52-Bootstrap的栅格系统
53-Bootstrap栅格的实现原理
54-Boostrap的列偏移
55-Boostrap的排版
56-Bootstrap的表格
57-Boostrap的表单
58-全局CSS样式
59-导航条
60-面板和下拉菜单
61-按钮组和按钮式的下拉菜单
62-分页、路径导航、徽章
63-警告框和进度条
64-Boostrap的插件
65-个人经历分享
01-jQuery介绍
02-如何使用jQuery
03-jQuery的入口函数
04-jQuery对象和JS对象的相互转换
05-jQuery如何操作DOM
06-底层选择器
07-基本过滤器
08-属性选择器
09-过滤器选择方法
10-siblings选择器方法的基本使用
11-jQuery操作选项卡深入
12-index()索引的选取
13-基本的动画
14-卷帘门的动画效果
15-淡入淡出的自定义动画
16-二级菜单动画的使用
17-jQuery的标签属性操作
18-jQuery对DOM对象属性操作
19-jQuery对类样式的操作
20-jQuery对值的操作
21-父子之间插入操作一
22-父子之间插入操作二
23-兄弟之间插入操作
24-替换操作
25-删除和清空操作
26-操作input的value值
27-jQuery的位置信息
28-JS的事件流
29-事件冒泡的处理
30-抽屉评论简易布局
31-抽屉评论收起操作实现
32-事件对象
33-jQuery的单双击事件
34-jQuery的鼠标移入和移出事件
35-jQuery的移入和移出事件
36-jQuery的表单事件
37-jQuery的聚焦、失焦和键盘事件
38-事件委托
39-BS端那点儿事
40-什么是Ajax
41-MVC思想和jQuery的ajax_GET请求
42-jQuery的POST请求
43-POST请求的Bug修复
44-和风天气API接口文档介绍
45-jQuery插件库介绍
46-jQuery总结和作业分析（必看）
47-响应式介绍
48-@media媒体查询
49-Bootstrap介绍
- 49.1 Boostrap的基本使用
- 49.2 Bootstrap的栅格系统
- 49.3 Boostrap的全局CSS样式
- 49.4 Boostrap的组件
使用Boostrap开发的优秀站点：http://www.youzhan.org/
50-Boostrap的下载和基本使用
50.1 Boostrap的基础介绍及使用；
https://v3.bootcss.com/getting-started/#template
less介绍：http://lesscss.cn/
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--媒体查询，视口设置-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title> <!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
51-Bootstrap的布局容器
51.1 Boostrap中的布局容器初识；
<div class="container">
...
</div>
//几乎是全局的；
<div class="container-fluid">
...
</div>
52-Bootstrap的栅格系统
52.1 栅格系统初识；
52.2 鼻祖是960grid；https://960.gs/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css">
<title>03-栅格系统</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3">
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3
中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap
是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。
</div>
<div class="col-lg-3">
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3
中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap
是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。
</div>
<div class="col-lg-3">
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3
中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap
是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。
</div>
<div class="col-lg-3">
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3
中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap
是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。
</div>
</div>
</div>
</body>
</html>
53-Bootstrap栅格的实现原理
53.1 12栅格系统的实现原理是因为使用了媒体查询；
54-Boostrap的列偏移
54.1 col-md-offset-4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css">
<title>05-栅格系统中的列偏移</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
</div> </body>
</html>
55-Boostrap的排版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css">
<title>05-全局的CSS样式</title>
<style type="text/css">
.thumbnail .project {
/*display: block;*/
/*margin-left: auto;*/
/*margin-right: auto;*/
/*text-align: center;*/
/*max-width: 310px;*/
/*margin-bottom: 30px;*/
/*border-radius: 0;*/
}
</style>
</head>
<body>
<div class="container">
<div class="row project">
<div class="col-md-4">
<div class="thumbnail" style="height: 536px;">
<h1>h1. Bootstrap BootstrapBootstrap</h1>
<h2>h2. Bootstrap</h2>
<h3>h3. Bootstrap</h3>
<!--<h4>h4. Bootstrap</h4>-->
<!--<h5>h5. Bootstrap</h5>-->
<!--<h6>h6. Bootstrap</h6>-->
<p>你是我的眼，<span class="lead">带我找寻<mark>四季</mark>的变化</span>，因为你是我的眼，让我看见幸福就在眼前！</p>
<p class="lead">cuixiaozhao</p>
<p>
<del>我这里是删除线</del>
</p>
<p><s>我这里是无用的文本</s></p>
<p>
<small>我这里是small</small>
</p>
</div> <div class="thumbnail" style="height: 336px;">
<p class="text-left">我这里是左对齐</p>
<p class="text-right">我这里是右对齐</p>
<p class="text-center">我这里是中心对齐</p>
<p class="text-justify">这里是两端对齐，应用于英文！</p>
<p class="text-nowrap">这里是不对齐！</p>
<p class="text-lowercase">LOWERcased,全部变为小写</p>
<p class="text-uppercase">Uppercased,全部变为大写</p>
<p class="text-capitalize">capitalized,首字母大写</p>
</div>
<div class="thumbnail" style="height: 333px;">
<addr>
<strong>北京市朝阳区<br>
崔各庄镇奶东村<br>
11排19号201室<br></strong>
<abbr title="Phone">P:</abbr>138-1122-1893
<a href="mailto:#">tqtl@tqtl.org</a>
</addr>
<blockquote>
<p>这里是Bootstrap中的引用！</p>
</blockquote>
</div>
</div>
</div>
</body>
</html>
56-Bootstrap的表格
56.1 Bootstrap中的表格；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css">
<title>07-Boostrap中的表格</title>
</head>
<body> <div class="container">
<div class="row">
<div class="col-md-4">
<div class="thumbnail table-responsive" style="height: 336px;">
<table class="table table-striped table-bordered table-hover table-condensed ">
<thead>
<tr class="active">
<th>id</th>
<th>name</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>cuixiaozhao</td>
<td>18</td>
</tr>
<tr class="warning">
<td>2</td>
<td>崔工</td>
<td>28</td>
</tr>
<tr class="info">
<td>3</td>
<td>天晴天朗</td>
<td>38</td>
</tr>
<tr class="danger">
<td>4</td>
<td>天晴天朗911天晴天朗911天晴天朗911天晴天朗911天晴天朗911天晴天朗911天晴天朗911天晴天朗911天晴天朗911</td>
<td>58</td>
</tr>
</tbody>
</table> </div> </div> </div> </div>
</body>
</html>
57-Boostrap的表单
57.1 Boostrap中的form表单；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css">
<title>08-Bootstrap中的表单</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="thumbnail" style="height: 336px;">
<form action="">
<div class="form-group">
<label for="user">form表单学习啦</label>
<input class="form-control" type="text" name="user" id="user">
</div>
</form> <form>
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="请输入密码">
</div>
<div class="form-group">
<label for="file">请选择文件</label>
<input type="file" id="file">
<p class="help-block">点击此处可上传文件</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 已阅读
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
<button type="submit" class="btn btn-success">提交</button>
<button type="submit" class="btn btn-info">提交</button>
<button type="submit" class="btn btn-warning">提交</button>
<button type="submit" class="btn btn-danger">提交</button>
</form>
</div> </div>
<div class="col-md-4">
<div class="thumbnail" style="height: 336px;">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-jpy"></span></div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary btn-sm">Transfer cash</button>
</form>
</div> </div>
</div> </div>
</body>
</html>
58-全局CSS样式
58.1 全局CSS样式内容较多，请参考Boostrap官网说明； https://v3.bootcss.com/css/
59-导航条
60-面板和下拉菜单
61-按钮组和按钮式的下拉菜单
62-分页、路径导航、徽章
63-警告框和进度条
64-Boostrap的插件
65-个人经历分享
第五模块·WEB开发基础-第3章jQuery&Bootstrap的更多相关文章
- 第五模块·WEB开发基础-第2章JavaScript基础
第1章 JavaScript基础 01-JavaScript历史介绍 02-JavaScript的组成 03-JavaScript的引入方式 04-变量的使用 05-基本数据类型(一) 06-基本数据 ...
- 第五模块：WEB开发基础 第3章·BootStrap&JQuery开发
01-JQuery介绍 02-jQuery文件引入和加载的区别 03-jQuery的基础选择器 04-jQuery的层级选择器 05-jQuery的基本过滤选择器 06-jQuery的属性选择器 07 ...
- 第五模块：WEB开发基础 第1章·HTML&CSS基础
01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...
- 第五模块：WEB开发基础 第2章·JavaScript基础
01-JavaScript的历史发展过程 02-js的引入方式和输出 03-命名规范和变量的声明定义 04-五种基本数据类型 05-运算符 06-字符串处理 07-数据类型转换 08-流程控制语句if ...
- [置顶] 提高生产力：Web开发基础平台WebCommon的设计和实现
Web开发中,存在着各种各样的重复性的工作.为了提高开发效率,不在当码农,我在思考和实践如何搭建一个Web开发的基础平台. Web开发基础平台的目标和功能 1.提供一套基础的开发环境,整合了常用的框架 ...
- 提高生产力：Web开发基础平台WebCommon的设计和实现
Web开发中,存在着各种各样的重复性的工作.为了提高开发效率,不在当码农,我在思考和实践如何搭建一个Web开发的基础平台. Web开发基础平台的目标和功能 1.提供一套基础的开发环境,整合了常用的框架 ...
- Web 开发人员不能错过的 jQuery 教程和案例
jQuery 把惊喜延续到设计领域,处处带来极大的灵活性,创造了许多体验良好的设计,而且拥有不错的性能.这里分享一组 Web 开发人员不能错过的 jQuery 教程和案例,帮助你更好的掌握 jQuer ...
- PHP 系列：PHP Web 开发基础
PHP是动态类型的Web开发的脚本语言,PHP以页面文件作为加载和运行的单元,PHP现在有了Composer作为开发包管理. 1.使用Composer管理依赖 自从.NET开发用了Nuget管理程序集 ...
- 移动WEB开发基础入门
什么是移动WEB开发,我个人理解就是,将网页更好的显示在移动端的一些设置,简单来说就两点如下: 1.流式布局,即百分比自适应布局 将body下的div容器的样式设置如下: div{ width:100 ...
随机推荐
- async--ajax异步传输
如图:轨迹点组编号依赖所属路口的设置. 所以ajax是异步执行,获取到所属路口还没执行完,就已经执行到根据所述路口获取轨迹点组编号,所以获取不到轨迹点组编号. async:false改成同步执行.就没 ...
- 使用Redis+java（模仿数据库）实现对象存取和读取
实现前要引入Redis架包 maven项目 <dependency> <groupId>redis.clients</groupId> <artifactId ...
- performPeriodicTask
/********************************************************************* * @fn performPeriodicTask 执行 ...
- STM32之定时器输入捕获
1.输入捕获模式可以用来测量脉冲宽度或者测量频率.STM32的定时器,除了TIM6和TIM7,其他定时器都有输入捕获功能.STM32的输入捕获,简单的说就是通过检测TIMx_CHx上的边沿信号,在边沿 ...
- apache Rewrite配置（转）
1.Rewrite规则简介: Rewirte主要的功能就是实现URL的跳转,它的正则表达式是基于Perl语言.可基于服务器级的(httpd.conf)和目录级的 (.htaccess)两种方式.如果要 ...
- 集合异常之Set接口
Set接口,它里面的集合,所存储的元素就是不重复的,通过元素的equals方法,来判断是否为重复元素. HashSet存储JavaAPI中的类型元素 给HashSet中存储JavaAPI中提供的类型元 ...
- 协议类接口 - SPI
一.SPI概述 SPI(Serial Peripheral Interface,串行外设接口)总线系统是一种同步串行外设接口,它可以使CPU与各种外围设备以串行方式进行通信以交换信息.一般主控SoC ...
- Extjs 环境安装【转】
Sencha Cmd安装 在使用前端框架ExtJs前,需对其环境加以部署,对自己的安装过程加以记录. 建议大家在安装时,最好使用VPN,个中缘由,生在跳槽的程序袁应该都懂吧.不然ruby相关命令执行时 ...
- #leetcode刷题之路8-字符串转换整数 (atoi)
请你来实现一个 atoi 函数,使其能将字符串转换成整数.首先,该函数会根据需要丢弃无用的开头空格字符,直到寻找到第一个非空格的字符为止.当我们寻找到的第一个非空字符为正或者负号时,则将该符号与之后面 ...
- Zabbix——部署（agent和proxy安装）
前提条件: 已经完成对Zabbix-server的安装 已经完成对Mysql的安装 并且相互和正常使用和访问 配置agent服务器: rpm -Uvh https://repo.zabbix.com/ ...