zoukankan html css js c++ java

Web开发基础之Bootstrap

　　1,Boots介绍

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

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

　　2,下载和部署

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

　　目录结构

[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.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.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）的容器。

<div class="container-fluid">
</div>

　　2，按钮类样式

　　示例

#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> 中的每一行对鼠标悬停状态作出响应。

　　表格类样式示例

#表格类样式.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> 元素都将被默认设置宽度属性为 100%;。将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

　　表单样式示例

#表单样式.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{
             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，分页

　　示例

#分页.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 文件。

 <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，模态框

　　第一步获取官方模板

<!-- 官方模态框模板 -->
    <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>

　　　　完整代码

#模态框.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>添加以下代码

   <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标签

#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>内添加以下代码

   <!-- 删除无确认 -->
    <script>
        $('.btn-danger').each(function(index,item){
            $(item).click(function(){
                $(item).parents('tr').hide();
            });
        });
    </script>

　　页面点击删除立即删除

　　方法二使用confirm确认删除

<!-- 删除需要确认 -->
    <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>内加载

<script src="./jquery-3.4.1.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <script src="./layer/layer.js"></script>

　　使用layer插件确认删除

   <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请求

$.ajax({
  type: 'get',
  url: 'xxxxx',
  success: function (res) {
  }
})

　　2.2发送post请求

$.post('/path/to/file', {param1: 'value1'}, function(data, textStatus, xhr) {
      /*optional stuff to do after success */
    });

　　2.3Ajax方法

$.ajax({
  type: 'post',
  url: 'xxxxx',
  data: data,
  success: function (res) { 
  }
});

　　3，实现聊天机器人

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

　　请求方法：POST

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

参数名称	参数值
key	请求权限标识符
info	关键字参数

　　聊天机器人示例

#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

npm install -g json-server

　　编写json文件

#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"
    }	
   ]
}

　　　　启动

json-server --watch jb.json

　　web页面查看

　　4.2动态获取主机列表

#主机列表简单版.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>

　　页面显示

查看全文

相关阅读:
C语言复习---杨辉三角打印
 C语言复习---获取矩阵的对角和
 C语言复习---选择法排序
 C语言复习---用筛选法求100之内的素数
 C语言复习---比赛问题
 C语言复习---打印菱形
 建立一个node.js服务器(使用express搭建第一个Web环境)
nodejs小问题：express不是内部或外部命令
 使用express搭建第一个Web应用【Node.js初学】
Node.js 相关资料网站汇总

原文地址：https://www.cnblogs.com/minseo/p/14031274.html

Web开发基础之Bootstrap

1,Boots介绍

2,下载和部署

基本演示模板

全局CSS

1，容器类样式

2，按钮类样式

3，表格类样式

4，表单

5，分页

Bootstrap插件

1，模态框

3,基于bootstarp的案例

方法一 删除无需确认

方法二 使用confirm确认删除

方法三 使用layer插件

四，Ajax

1，Ajax介绍

2，使用jquery发送Ajax

2.1发送get请求

2.2发送post请求

2.3Ajax方法

3，实现聊天机器人

4,操作主机列表页面

4.1接口服务器搭建

4.2动态获取主机列表

　　1,Boots介绍

　　2,下载和部署

　　基本演示模板

　　全局CSS

　　1，容器类样式

　　2，按钮类样式

　　3，表格类样式

　　4，表单

　　5，分页

　　Bootstrap插件

　　1，模态框

　　3,基于bootstarp的案例

　　方法一删除无需确认

　　方法二使用confirm确认删除

　　方法三使用layer插件

　　四，Ajax

　　1，Ajax介绍

　　2，使用jquery发送Ajax

　　2.1发送get请求

　　2.2发送post请求

　　2.3Ajax方法

　　3，实现聊天机器人

　　4,操作主机列表页面

　　4.1接口服务器搭建

　　4.2动态获取主机列表