Web开发基础之Bootstrap

　　1,Boots介绍

　　简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

　　作用：可以快速搭建响应式的网页，而不需要书写大量的 css

　　中文文档: https://v3.bootcss.com/

　　2,下载和部署

　　下载地址：https://v3.bootcss.com/getting-started/#download

 

 

 　　目录结构

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
[root@localhost bootstrap-3.3.7-dist]# tree
.
├── css
│?? ├── bootstrap.css
│?? ├── bootstrap.css.map
│?? ├── bootstrap.min.css
│?? ├── bootstrap.min.css.map
│?? ├── bootstrap-theme.css
│?? ├── bootstrap-theme.css.map
│?? ├── bootstrap-theme.min.css
│?? └── bootstrap-theme.min.css.map
├── fonts
│?? ├── glyphicons-halflings-regular.eot
│?? ├── glyphicons-halflings-regular.svg
│?? ├── glyphicons-halflings-regular.ttf
│?? ├── glyphicons-halflings-regular.woff
│?? └── glyphicons-halflings-regular.woff2
└── js
    ├── bootstrap.js
    ├── bootstrap.min.js
    └── npm.js

　　基本演示模板

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#1.bootstrap入门.html
<!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"> -->
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>你好，Boostrap！</h1>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> -->
    <script src="./jquery-3.4.1.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> -->
    <script src="./bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>

　　页面显示

 

 　　全局CSS

　　Bootstrap中提供了很多类样式方便编写页面。

　　1，容器类样式

　　.container 类用于固定宽度并支持响应式布局的容器。

　　示例

?
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
#1.bootstarp入门.html
<!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"> -->
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container"><h1>你好，Boostrap！</h1></div>
    <h1>你好，Boostrap！</h1>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> -->
    <script src="./jquery-3.4.1.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> -->
    <script src="./bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>

　　页面显示

 

 　　

　　.container-fluid 类用于 100% 宽度，占据全部视窗口（viewport）的容器。

?
1
2
<div class="container-fluid">
</div>
　　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
#2.按钮类样式.html
<!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"> -->
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>你好，Boostrap！</h1>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> -->
    <script src="./jquery-3.4.1.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> -->
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <a class="btn btn-default" href="#" role="button">（默认样式）Default</a>
    <button class="btn btn-primary" type="submit">（首选项）Primary</button>
    <input class="btn btn-success" type="button" value="（成功）Success">
    <input class="btn btn-info" type="submit" value="（一般信息）Info">
 
    <button class="btn btn-warning" type="submit">（警告）Warning</button>
    <button class="btn btn-danger" type="submit">（危险）Danger</button>
    <button class="btn btn-link" type="submit">（链接）Link</button>
    </body>
</html>

　　页面显示

 

 　　3，表格类样式

　　- .table 

  　　- 为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线

　　- .table-striped

  　　- 通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

　　- .table-bordered

  　　- 添加 .table-bordered 类为表格和其中的每个单元格增加边框。

　　- .table-hover

  　　- 通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

　　表格类样式示例

?
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
#表格类样式.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <script src="./jquery-3.4.1.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <!-- 不使用bootstrap -->
    <table border="1">
        <tr >
            <td >hostname</td>
            <td>ip</td>
            <td >type</td>
            <td >status</td>
        </tr>
        <tr>
            <td >server1</td>
            <td>192.168.1.1</td>
            <td >web</td>
            <td >online</td>
        </tr>
        <tr>
            <td >server1</td>
            <td>192.168.1.1</td>
            <td >web</td>
            <td >online</td>
        </tr>
    </table>
    <!-- 使用bootstarp修饰的表格 -->
    <!-- table-striped斑马条纹样式
    table-bordered加边框 -->
    <table class='table table-striped table-bordered'>
        <tr >
            <td >hostname</td>
            <td>ip</td>
            <td >type</td>
            <td >status</td>
        </tr>
        <tr>
            <td >server1</td>
            <td>192.168.1.1</td>
            <td >web</td>
            <td >online</td>
        </tr>
        <tr>
            <td >server1</td>
            <td>192.168.1.1</td>
            <td >web</td>
            <td >online</td>
        </tr>
    </table>
</body>
</html>

　　页面显示

 

 　　4，表单

　　单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

　　表单样式示例

?
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
#表单样式.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格类样式</title>
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <style>
        form{
            width: 20%;
        }
    </style>
</head>
<body>
    <!-- 未使用bootstarp -->
    <form action="" method="">
        用户名:<input type="text" name="username" size="20" maxlength="5"/> <br/>
        <!-- 和文本是一致的不过是输入时隐藏 -->
        密码:<input type="password" name="password"/> <br/>
        性别:<input type="radio" name="sex" value="2" checked/> 保密 <input type="radio" name="sex" value="0" id="male"/> <label for="male">男</label> <input type="radio" name="sex" value="1" /> 女 <br/>
        爱好:<input type="checkbox" name="hobby" checked/> 吃饭 <input type="checkbox" name="hobby" checked/> 睡觉 <input type="checkbox" name="hobby"/> 打豆豆 <br/>
        学历：<select name="" id="">
            <option value="0">==请选择==</option>
            <option value="1">初中</option>
            <option value="2">高中</option>
            <option value="3">专科</option>
            <option value="4">本科</option>
            <option value="5">硕士</option>
        </select> <br/>
        自我介绍:<br/>
        <textarea name="" id="" cols="30" rows="10"></textarea><br/>
        <input type="submit" value="注册" /> <input type="reset" value="重置">     
    </form>
    <!-- 使用bootstrap -->
    <form action="" method="">
        <div class="form-group">
            用户名:<input type="text" name="username" class='form-control'/>
        </div>
         
        <div class="form-group">
            密码:<input type="password" name="password" class='form-control'/>
        </div>
 
        <div class="form-group">
            性别:<input type="radio" name="sex" value="2"  checked/> 保密 <input type="radio" name="sex" value="0" id="male"/> <label for="male">男</label> <input type="radio" name="sex" value="1" /> 女
        </div>
 
        <div class="form-group ">
            爱好:<input type="checkbox" name="hobby" checked/> 吃饭 <input type="checkbox" name="hobby" checked/> 睡觉 <input type="checkbox" name="hobby"/> 打豆豆
        </div>
        
        <div class="form-group ">
            学历：<select name="" id="">
                <option value="0">==请选择==</option>
                <option value="1">初中</option>
                <option value="2">高中</option>
                <option value="3">专科</option>
                <option value="4">本科</option>
                <option value="5">硕士</option>
            </select>
        </div>
        <div class="form-group">
            自我介绍:
        </div>
        <div class="form-group">
            <textarea name="" id="" cols="30" rows="5" class="form-control"></textarea>
        </div>
        <div class="form-group">
            <input type="submit" value="注册" /> <input type="reset" value="重置">  
        </div>  
    </form>
</body>
</html>

　　页面显示

 

 　　5，分页

　　示例

?
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
#分页.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页</title>
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <script src="./jquery-3.4.1.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> -->
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <nav aria-label="Page navigation">
        <ul class="pagination">
          <li>
            <a href="#" aria-label="Previous">
              <span aria-hidden="true">«</span>
            </a>
          </li>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li>
</body>
</html>

　　页面显示

 

 　　Bootstrap插件

　　交互的效果要通过 JavaScript 来实现，Bootstrap 的插件在使用前，需要先引用两个 js 文件。

?
1
2
3
4
<script src="./jquery-3.4.1.js"></script>
   <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
   <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> -->
   <script src="./bootstrap/js/bootstrap.min.js"></script>

　　

　　1，模态框

　　第一步获取官方模板

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- 官方模态框模板 -->
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
              <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
              <!-- 此处是在模态框中显示的内容 -->
              <p>One fine body…</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->

　　第二步 点击按钮弹出模态框

?
1
2
3
4
<!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
      Launch demo modal
  </button>

　　　　完整代码

?
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
#模态框.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstart插件</title>
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <script src="./jquery-3.4.1.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> -->
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <!-- 官方模态框模板 -->
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
              <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
              <!-- 此处是在模态框中显示的内容 -->
              <p>One fine body…</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->
     
      <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        Launch demo modal
    </button>
</body>
</html>

　　页面显示

 

 　　第三步 隐藏模态框 

　　Close可以关闭模态框 ，也可以使用按钮隐藏 例如把Save changes设置为隐藏模态框

　　在<body></body>添加以下代码

?
1
2
3
4
5
6
<script>
     // 点击Save changes(id为savebtn)隐藏模态框(id为myModal)
     $('#savebtn').click(function(){
         $('#myModal').modal('hide')
     })
 </script>

　　3,基于bootstarp的案例

　　官方案例模板：

　　https://v3.bootcss.com/getting-started/#examples-framework

　　案例：快速实现一个资产管理，主机列表的页面

 

　　使用examples案例中的dashboard页面

　　第一步 使用模板页面

　　第二步 根据需要修改对应html标签

?
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
#8.主机列表.html
<!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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="./favicon.ico">
 
    <title>CMDB管理平台</title>
 
    <!-- Bootstrap core CSS -->
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
 
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <!-- <link href="./bcss/ie10-viewport-bug-workaround.css" rel="stylesheet"> -->
 
    <!-- Custom styles for this template -->
    <link href="./dashboard.css" rel="stylesheet">
    <link href="./layer.css" rel="stylesheet">
     
  </head>
 
  <body>
 
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">CMDB管理平台系统</a>
      
    </nav>
 
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li class="active"><a href="#">主机列表 <span class="sr-only">(current)</span></a></li>
            <li><a href="#">用户列表</a></li>
            <!-- <li><a href="#">Analytics</a></li>
            <li><a href="#">Export</a></li> -->
          </ul>
          <!-- <ul class="nav nav-sidebar">
            <li><a href="">Nav item</a></li>
            <li><a href="">Nav item again</a></li>
            <li><a href="">One more nav</a></li>
            <li><a href="">Another nav item</a></li>
            <li><a href="">More navigation</a></li>
          </ul>
          <ul class="nav nav-sidebar">
            <li><a href="">Nav item again</a></li>
            <li><a href="">One more nav</a></li>
            <li><a href="">Another nav item</a></li>
          </ul> -->
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          <h1 class="page-header">主机列表</h1>
          <a class="btn btn-info btn-lg" data-toggle="modal" data-target="#mybox">添加主机</a>
          <!-- <div class="row placeholders">
            <div class="col-xs-6 col-sm-3 placeholder">
              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
              <h4>Label</h4>
              <span class="text-muted">Something else</span>
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
              <h4>Label</h4>
              <span class="text-muted">Something else</span>
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
              <h4>Label</h4>
              <span class="text-muted">Something else</span>
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
              <h4>Label</h4>
              <span class="text-muted">Something else</span>
            </div>
          </div> -->
          <!-- <h2 class="sub-header">Section title</h2> -->
          <table class="table table-striped  table-hover">
            <tr >
                <th>ID</th>
                <th >hostname</th>
                <th>ip</th>
                <th >type</th>
                <th >status</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>1</td>
                <td >server1</td>
                <td>192.168.1.1</td>
                <td >web</td>
                <td >online</td>
                <td><a class="btn btn-success btn-sm">修改</a><a class="btn btn-danger btn-sm">删除</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td >server1</td>
                <td>192.168.1.1</td>
                <td >web</td>
                <td >online</td>
                <td><a class="btn btn-success btn-sm">修改</a><a class="btn btn-danger btn-sm">删除</a></td>
            </tr>
        </table>
        </div>
      </div>
    </div>
    <div class="modal fade" id="mybox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">×</span></button>
                    <h1 class="modal-title" id="myModalLabel">主机添加</h1>
                </div>
                <div class="modal-body">
                    <form action="" method="">
                        <div class="form-group">
                            主机名称<input type="text" name="username" class="form-control" size="100" id="hostname" />
                        </div>
                        <div class="form-group">
                            IP: <input type="text" name="ip" class="form-control" />
                        </div>
                        <div class="form-group">
                            主机类型:<select name="type" id="" class="form-control">
                                <option value="0">===请选择===</option>
                                <option value="1">db</option>
                                <option value="2" selected>web</option>
                                <option value="3">redis</option>
                                <option value="4">mongodb</option>
                                <option value="5">tomcat</option>
                            </select>
                        </div>
                        <div class="form-group">
                            主机状态:<select name="status" id="" class="form-control">
                                <option value="0">===请选择===</option>
                                <option value="1">在线</option>
                                <option value="2" selected>下载</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="savebtn">保存</button>
                </div>
            </div>
        </div>
    </div>
     
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="./jquery-3.4.1.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <script src="./layer/layer.js"></script>
 
     
  </body>
</html>

　　页面显示

 

 　　实现模拟删除主机

　　方法一 删除无需确认

　　在标签<body>内添加以下代码

?
1
2
3
4
5
6
7
8
<!-- 删除无确认 -->
 <script>
     $('.btn-danger').each(function(index,item){
         $(item).click(function(){
             $(item).parents('tr').hide();
         });
     });
 </script>

　　页面点击删除立即删除

 

 　　方法二 使用confirm确认删除

?
1
2
3
4
5
6
7
8
9
10
<!-- 删除需要确认 -->
    <script>
        $('.btn-danger').each(function(index,item){
            $(item).click(function(){
                if(confirm('真的要删除吗？')){
                    $(item).parents('tr').hide();
                }
            });
        });
    </script>

　　页面显示

 

 

　　方法三 使用layer插件

　　需要加载layer插件 官方文档地址：https://layer.layui.com/

　　加载layer前需要加载jQuery插件

　　在<body>内加载

?
1
2
3
<script src="./jquery-3.4.1.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <script src="./layer/layer.js"></script>

　　使用layer插件确认删除

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
 $('.btn-danger').each(function (index, item) {
     $(item).click(function () {
         layer.confirm('真的要删除吗？', {
             btn: ['是的', '不是'] //按钮
         }, function () {
             // 点击第一个按钮
             $(item).parents('tr').hide();
             layer.msg('删除成功', { icon: 1 });
         }, function () {
             // 点击第二个按钮
             layer.msg('删除失败', {
                 time: 20000, //20s后自动关闭
                 btn: ['明白了', '知道了']
             });
         });
     });
 });
 </script>

　　页面显示

 

 

 

 

 

 

 　　四，Ajax

　　1，Ajax介绍

　　Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）

　　创建交互式网页应用的网页开发的一组技术。

　　作用：异步发送请求，提升了用户体验。

　　2，使用jquery发送Ajax

　　2.1发送get请求
?
1
2
3
4
5
6
$.ajax({
  type: 'get',
  url: 'xxxxx',
  success: function (res) {
  }
})
　　2.2发送post请求
?
1
2
3
$.post('/path/to/file', {param1: 'value1'}, function(data, textStatus, xhr) {
      /*optional stuff to do after success */
    });
　　2.3Ajax方法
?
1
2
3
4
5
6
7
$.ajax({
  type: 'post',
  url: 'xxxxx',
  data: data,
  success: function (res) {
  }
});

　　3，实现聊天机器人

　　API：http://www.tuling123.com/openapi/api

　　请求方法：POST

　　请求参数：key=d7c82ebd8b304abeacc73b366e42b9ed&info=你好

参数名称

参数值

key

请求权限标识符

info

关键字参数

　　聊天机器人示例

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#9聊天机器人.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天机器人</title>
</head>
<body>
    <script src="./jquery-3.4.1.js"></script>
    <script>
        var data = {key:'d7c82ebd8b304abeacc73b366e42b9ed',info:'你好'}
        $.post("http://www.tuling123.com/openapi/api",data,
            function(data,textStatys,jqXHR){
                console.log(data);
            }
        )
    </script>
</body>
</html>

 

 　　

　　4,操作主机列表页面

　　4.1接口服务器搭建

　　使用json-server启动一个接口服务器，借助node进行开发的。安装node系统环境。

 

 　　安装json-server

?
1
npm install -g json-server

　　编写json文件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#db.json
{
  "hosts": [
    {
      "id": 2,
      "hostname": "server02",
      "ip": "192.168.17.101",
      "type": "db",
      "status": "up"
    },
  {
      "id": 3,
      "hostname": "server03",
      "ip": "192.168.17.103",
      "type": "web",
      "status": "up"
    }  
   ]
}

　　　　启动

?
1
json-server --watch jb.json

 

 　　web页面查看

 

 　　4.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
#主机列表简单版.html
<!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">
    <title>主机列表简单版</title>
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <table  class="table table-striped  table-hover">
        <tr >
            <th>ID</th>
            <th>hostname</th>
            <th>ip</th>
            <th>type</th>
            <th>status</th>
            <th>操作</th>
    </table>
   
    <script src="./jquery-3.4.1.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <script>
        var str = '';
        $.ajax({
          type: "get",
          url: "http://localhost:3000/hosts",
          data: "",
          dataType: "json",
          success: function (res) {
              // 打印res是一个元素
              console.log(typeof(res));
              // 遍历元素拼接成一个字符串，字符串即对应的表格tabel
              for (var index = 0; index < res.length; index++) {
                  str += '<tr><td>'+res[index].id+'</td><td>'+res[index].hostname+'</td><td>'+res[index].ip+'</td><td>'+res[index].type+'</td><td>'+res[index].status+'</td><td><a class="btn btn-success btn-sm">修改</a><a class="btn btn-danger btn-sm">删除</a></td></tr>';
              }
              // 打印拼接的字符串
              console.log(str);
              // 把拼接的字符串最佳到表格内 即增加了几行主机
              $('tbody').append(str);
          }
      });
    </script>
</body>
</html>

　　页面显示

 

posted @   minseo  阅读(372)  评论(0)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
点击右上角即可分享
微信分享提示
AI IDE Trae