zoukankan html css js c++ java

第五模块·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- 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-个人经历分享

查看全文

相关阅读:
[MacOS]Sublime text3 安装(一)
[RHEL8]开启BBR
PAT Advanced 1136 A Delayed Palindrome (20分)
PAT Advanced 1144 The Missing Number (20分)
PAT Advanced 1041 Be Unique (20分)
PAT Advanced 1025 PAT Ranking (25分)
PAT Advanced 1022 Digital Library (30分)
PAT Advanced 1019 General Palindromic Number (20分)
PAT Advanced 1011 World Cup Betting (20分)
PAT Advanced 1102 Invert a Binary Tree (25分)

原文地址：https://www.cnblogs.com/tqtl911/p/10027973.html