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/

第五模块·WEB开发基础-第3章jQuery&Bootstrap-LMLPHP

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/[email protected]/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/[email protected]/dist/html5shiv.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>

    <![endif]-->

</head>

<body>

<h1>你好，世界！</h1>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>

<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

</body>

</html>

第五模块·WEB开发基础-第3章jQuery&Bootstrap-LMLPHP

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>

第五模块·WEB开发基础-第3章jQuery&Bootstrap-LMLPHP

53-Bootstrap栅格的实现原理

53.1 12栅格系统的实现原理是因为使用了媒体查询；

第五模块·WEB开发基础-第3章jQuery&Bootstrap-LMLPHP

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:#">[email protected]</a>

                </addr>

                <blockquote>

                    <p>这里是Bootstrap中的引用！</p>

                </blockquote>

            </div>

        </div>

    </div>

</body>

</html>

第五模块·WEB开发基础-第3章jQuery&Bootstrap-LMLPHP

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>

第五模块·WEB开发基础-第3章jQuery&Bootstrap-LMLPHP

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>

第五模块·WEB开发基础-第3章jQuery&Bootstrap-LMLPHP

49

第五模块·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-基本的动画