首页

# 表格

菜鸟：http://www.runoob.com/bootstrap4/bootstrap4-tables.html

官网：https://getbootstrap.com/docs/4.5/content/tables/

# 表单

菜鸟：http://www.runoob.com/bootstrap4/bootstrap4-forms.html

官网：https://getbootstrap.com/docs/4.5/components/forms/

# 表单控件

表单控件：
菜鸟：http://www.runoob.com/bootstrap4/bootstrap4-forms-inputs.html
官网：https://getbootstrap.com/docs/4.3/components/input-group/

# 巨幕

菜鸟：http://www.runoob.com/bootstrap4/bootstrap4-jumbotron.html

官网：https://getbootstrap.com/docs/4.3/components/jumbotron/

# 信息提示框

菜鸟：http://www.runoob.com/bootstrap4/bootstrap4-alerts.html

官网：https://getbootstrap.com/docs/4.3/components/alerts/

# 进度条

菜鸟：http://www.runoob.com/bootstrap4/bootstrap4-progressbars.html

官网：https://getbootstrap.com/docs/4.3/components/progress/

# 卡片

菜鸟：http://www.runoob.com/bootstrap4/bootstrap4-cards.html

官网：https://getbootstrap.com/docs/4.3/components/card/

# 实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业1</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-beta2/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .row:nth-last-of-type(1){
            height: 60px;
            line-height: 60px;
            align-items: center;
        }

    </style>
</head>
<body>
    <div class="container-fluid">
        <!-- 头部栅格栏 -->
        <div class="row bg-dark px-2">
                <div class="col-lg-12 px-6">
                    <!-- 标题 -->
                    <h4 class="float-left">Project name</h4>
                    <!-- 登录表单 -->
                    <form class="form-inline float-right">
                        <input type="email" class="form-control mr-1" id="email" placeholder=" email">
                        <input type="password" class="form-control mr-1" id="pwd" placeholder="password">
                        <button type="submit" class="btn btn-primary">Submit</button>
                      </form>
                </div>
        </div>

        <!-- 巨幕 -->
       <div class="row ">
           <div class="col-lg-12 p-0 ">
            <div class="jumbotron">
            <h1 class="display-4">Hello, world!</h1>
            <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
            <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
            <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
          </div>
           </div>
       </div>

       <!-- 卡片 -->
       <div class="row">
           <div class="col-lg-4">
            <div class="card" style="width: 18rem;border: 0;">
                <div class="card-body">
                  <h5 class="card-title">Heading</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-outline-dark">View detail</a>
                </div>
              </div>
           </div>

           <div class="col-lg-4">
            <div class="card" style="width: 18rem; border: 0;">
                <div class="card-body">
                  <h5 class="card-title">Heading</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-outline-dark">View detail</a>
                </div>
              </div>
           </div>

           <div class="col-lg-4">
            <div class="card" style="width: 18rem;border: 0;">
                <div class="card-body">
                  <h5 class="card-title">Heading</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-outline-dark">View detail</a>
                </div>
              </div>
           </div>
       </div>

       <div class="row">
           <div class="col-lg-12">
            <hr>
           </div>
       </div>
       <div class="row">
           <div class="col-lg-12">
               <span>&copy; Computer 2014</span>
           </div>
       </div>
    </div>
</body>
</html>

# 导航 - tab 切换页

页面内部模块的导航，比如选项框

https://getbootstrap.com/docs/4.3/components/navs/

# 导航条

https://getbootstrap.com/docs/4.3/components/navbar/

# 按钮组

https://getbootstrap.com/docs/4.3/components/button-group/

# 面包屑

https://getbootstrap.com/docs/4.3/components/breadcrumb/

# 分页

https://getbootstrap.com/docs/4.3/components/pagination/

注意：要实现下拉菜单、弹出框、模态框、提示框等效果，需要引入 jquery 库，然后引入 popper.min.js 或 bootstrap.bundle.js 再引入 bootstrap.min.js 才能生效。

# 下拉菜单

https://getbootstrap.com/docs/4.3/components/dropdowns/

# tooltips

https://getbootstrap.com/docs/4.3/components/tooltips/

# 弹出来框

https://getbootstrap.com/docs/4.3/components/popovers/

# 模态框

https://getbootstrap.com/docs/4.3/components/modal/

# 手风琴效果

https://getbootstrap.com/docs/4.3/components/collapse/

# 轮播图

https://getbootstrap.com/docs/4.3/components/carousel/

# 单页导航地址

​ jquery.singlePageNav.min.js，https://github.com/jeroenweustink/single-page-nav

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <!-- <link rel="stylesheet" href="basic.css"> -->
    <style>
        section{
            height: 300px;
            background-color: red;
            margin-bottom: 30px;
        }
    </style>
</head>
<body>

    <div>
        <ul class="menu">
            <li><a href="#home">Home</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#who-are-we">Who we are</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#contact2">Contact</a></li>

        </ul>
    </div>

    <div style="clear:both"></div>

    <section id="home">
        Home or go to <a href="#contact">Contact</a>
    </section>
    <section id="projects">
        Projects
    </section>
    <section id="who-are-we">
        Who are we
    </section>
    <section id="contact">
        Contact
    </section>

    <section id="contact2">
        Contact2
    </section>

    <script type="application/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="application/javascript" src="js/jquery.singlePageNav.min.js"></script>
    <script type="application/javascript">
        jQuery(function(){
            jQuery('.menu').singlePageNav({
            offset: 50,                  // 距离浏览器顶部的偏移量
            currentClass: 'current',    // 修改默认的导航的高亮样式
            currentThreshold: 0,        // Threshold for triggering current section action
            duration: 500,              // 动画速度：默认是500毫秒 
            effect: 'swing',            // 动画效果。默认是swing，可以是linear
            started: function (){},     // Callback at start of animation
            finished: function (){}     // Callback after animation is finished
        });
        });
    </script>



</body>
</html>

# 滚动滚动条或窗口发生变化时，可视区域内的模块有动画效果（wow.js 插件 + animate.css）

 1. wow.js  (JS插件)
    https://github.com/matthieua/WOW 教程
    http://www.jq22.com/yanshi1705
    https://www.delac.io/wow/ 教程
    
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wow{
            visibility: hidden;
            height: 300px;
            background-color:red;
            margin-bottom: 20px;
        }
    </style>
    <!-- 导入动画调用JS -->
    <script src="js/wow.min.js"> </script>
    <!-- 导入样式 -->
    <link rel="stylesheet" type="text/css" href="css/animate.css">
</head>
<body>
    <!-- 使用该wow.js需要指定wowclass和效果样式 
        效果样式就是可以在animate.css中配置的那些class
    -->
    <div class="box1 wow slideInLeft">
        
    </div>

    <div class="box2 wow slideInRight">
        
    </div>

    <div class="box3 wow shake">
        
    </div>

    <!-- 启用该插件 -->
    <script>
        new WOW().init();
    </script>
</body>
</html>


    
    wow配置：
    
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .mywow{
            visibility: hidden;
            height: 300px;
            background-color:red;
            margin-bottom: 20px;
        }
    </style>
    <!-- 导入动画调用JS -->
    <script src="js/wow.min.js"> </script>
    <!-- 导入样式 -->
    <link rel="stylesheet" type="text/css" href="css/animate.css">
</head>
<body>
    <!-- 使用该wow.js需要指定wowclass和效果样式 
        效果样式就是可以在animate.css中配置的那些class

        data-wow-duration="2s"   设置动画持续时间

        data-wow-delay="5s"  设置动画是否延迟执行

        data-wow-offset="10"  设置视觉偏移量，即设置用户的可视距离

        data-wow-iteration="10"  动画的重复次数
    -->
    <div class="box1 mywow slideInLeft" data-wow-duration="2s" data-wow-delay="1s" data-wow-iteration="5">
        
    </div>

    <div class="box2 mywow slideInRight">
        
    </div>

    <div class="box3 mywow shake" data-wow-offset="100">
        
    </div>

    <!-- 启用该插件 -->
    <script>
        var wow=new WOW({
            boxClass: 'mywow',
            // 设置全局的视觉偏移量
            offset:       0,   
            // 回调，指的是当前区域的动画结束后是否需要执行对应的函数
            // box指的是那个正在进行动画的元素
            callback:function(box){
                console.log(box)
            }
        })
        //调用实例方法init
        wow.init();
    </script>
</body>
</html>
  1. animated.css
    官方教程与下载地址：
    https://github.com/daneden/animate.css
    演示：https://daneden.github.io/animate.css/

# 雪碧图

例 1：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=0" />
    <title>Document</title>
    <script>
        (function(){
            // 获取HTML根对象
            var html=document.documentElement;
            var whtml=html.getBoundingClientRect().width;
            // 设计图为640/6.4=100
            // 意味着100px=1rem
            // 所以如果你量出的盒子的尺寸为20*30px 转为rem==>  0.2rem ,0.3rem
            // 88px ===>  0.88 rem
            html.style.fontSize=whtml/7.5+"px";
        })();
    </script>
    <style>
        .father{
            display: flex;
            width:4rem;
            height: 1rem;
        }
        .son{
            background-color:pink;
            margin: 1px;
            flex-grow:1;
            flex-shrink: 0;
            background: url(sprite/demo.jpg);
            /*关键,让背景的background-size设置为原先背景的大小*/
            background-size: 4rem 1rem;
        }
        .father .son:nth-child(2){
            /*像之前那样进行背景图偏移*/
            background-position: -1rem 0;
        }
        .father .son:nth-child(3){
            background-position: -2rem 0;
        }
        .father .son:nth-child(4){
            background-position: -3rem 0;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>
</body>
</html>

例 2：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=0" />
    <title>Document</title>
    <script>
        (function(){
            // 获取HTML根对象
            var html=document.documentElement;
            var whtml=html.getBoundingClientRect().width;
            // 设计图为640/6.4=100
            // 意味着100px=1rem
            // 所以如果你量出的盒子的尺寸为20*30px 转为rem==>  0.2rem ,0.3rem
            // 88px ===>  0.88 rem
            html.style.fontSize=whtml/7.5+"px";
        })();
    </script>
    <style>
        .father{
            display: flex;
            width: 7.5rem;
            flex-wrap: wrap;
        }
        .father a{
            display: block;
            width: 20%;
            font-size: 0.16rem;
            flex-grow: 1;
            background-color: #f2f2f2;
            text-align: center;
        }
        /*使用伪元素添加背景*/
        .father a:before{
            display: block;
            margin: 0 auto;
            content: ' ';
            width: 0.9rem;
            height: 0.9rem;
            background: pink url(sprite/tsprite.png) no-repeat;
            /*放雪碧图*/
            background-size: 4.5rem 1.8rem;

        }
        /*给每一个盒子设置background-position*/
        .father a:nth-child(1):before{
            background-position: 0 0;
        }
        .father a:nth-child(2):before{
            background-position: -0.9rem 0;
        }
        .father a:nth-child(3):before{
            background-position: -1.8rem 0;
        }
        .father a:nth-child(4):before{
            background-position: -2.7rem 0;
        }
        .father a:nth-child(5):before{
            background-position: -3.6rem 0;
        }
        .father a:nth-child(6):before{
            background-position: 0rem -0.9rem;
        }
        .father a:nth-child(7):before{
            background-position: -0.9rem -0.9rem;
        }
        .father a:nth-child(8):before{
            background-position: -1.8rem -0.9rem;
        }
        .father a:nth-child(9):before{
            background-position: -2.7rem -0.9rem;
        }
         .father a:nth-child(10):before{
            background-position: -3.6rem -0.9rem;
        }
    </style>
</head>
<body>
    <div class="father">
        <a href="#">

            天猫商城
        </a>
        <a href="#">
            聚划算
        </a>
        <a href="#">
            进口
        </a>
        <a href="#">
            外卖
        </a>
        <a href="#">
            超市
        </a>
        <!-- 第二行 -->
        <a href="#">
            充值
        </a>
        <a href="#">
            拍卖
        </a>
        <a href="#">
            进口
        </a>
        <a href="#">
            外卖
        </a>
        <a href="#">
            超市
        </a>
    </div>
</body>
</html>

例 3：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=0" />
    <title>Document</title>
    <script>
        (function(){
            // 获取HTML根对象
            var html=document.documentElement;
            var whtml=html.getBoundingClientRect().width;
            // 设计图为640/6.4=100
            // 意味着100px=1rem
            // 所以如果你量出的盒子的尺寸为20*30px 转为rem==>  0.2rem ,0.3rem
            // 88px ===>  0.88 rem
            html.style.fontSize=whtml/7.5+"px";
        })();
    </script>
    <style>
        .father{
            display: flex;
            width:4rem;
            height: 1rem;
        }
        .son{
            background-color:pink;
            margin: 1px;
            flex-grow:1;
            flex-shrink: 0;
            background: url(sprite/demo.jpg);
            /*关键,100%,此时每一个格子就是整个雪碧图，那可以放到到原图的4倍*/
            background-size:400%;
        }
        .father .son:nth-child(2){
            /*像之前那样进行背景图偏移*/
            background-position: 33.3% 0%;
        }
        .father .son:nth-child(3){
            background-position: 66.6% 0%;
        }
        .father .son:nth-child(4){
            /*第4个格子的背景是100%*/
            background-position: 100% 0;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>
</body>
</html>

更新于 阅读次数 次

请我喝[茶]~(￣▽￣)~*

tz 微信支付

微信支付

tz 支付宝

支付宝