• Bootstrap主页面搭建（十四）

    创建主页面：index.jsp：

    引入bootstrap依赖：

    首先写导航条，复制代码更改：

    1. <!--导航条-->
    2. <nav class="navbar navbar-inverse">
    3.     <div class="container-fluid">
    4.         <!-- Brand and toggle get grouped for better mobile display -->
    5.         <div class="navbar-header">
    6.             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    7.                 <span class="sr-only">Toggle navigation</span>
    8.                 <span class="icon-bar"></span>
    9.                 <span class="icon-bar"></span>
    10.                 <span class="icon-bar"></span>
    11.             </button>
    12.             <a class="navbar-brand" href="#">学生管理系统<span class="badge"> V1.0</span></a>
    13.         </div>
    14.  
    15.         <!-- Collect the nav links, forms, and other content for toggling -->
    16.         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    17.  
    18.             <ul class="nav navbar-nav navbar-right">
    19.                 <li><a href="#">欢迎：<span class="text-danger">小黑</span></a></li>
    20.                 <li class="dropdown">
    21.                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">用户中心 <span class="caret"></span></a>
    22.                     <ul class="dropdown-menu">
    23.                         <li><a href="#">修改密码</a></li>
    24.                         <li role="separator" class="divider"></li>
    25.                         <li><a href="#">我的订单</a></li>
    26.                         <li role="separator" class="divider"></li>
    27.                         <li><a href="#">退出登录</a></li>
    28.                         <li role="separator" class="divider"></li>
    29.                     </ul>
    30.                 </li>
    31.             </ul>
    32.         </div>
    33.     </div>
    34. </nav>

    使用栅格布局：

     菜单栏使用手风琴组件，复制代码：

    修改手风琴代码：

    手风琴嵌套列表组

    1. <!--页面主体内容-->
    2. <div class="container-fluid">
    3.     <!--栅格系统布局-->
    4.     <div class="row">
    5.         <!--菜单：使用手风琴组件-->
    6.         <div class="col-sm-2">
    7.             <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    8.  
    9.                 <div class="panel panel-default">
    10.                     <div class="panel-heading" role="tab" id="headingOne">
    11.                         <h4 class="panel-title">
    12.                             <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
    13.                                 <span class="glyphicon glyphicon-apple"></span> 系统管理
    14.                             </a>
    15.                         </h4>
    16.                     </div>
    17.                     <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
    18.                         <div class="panel-body">
    19.                             <!--使用列表组-->
    20.                             <ul class="list-group">
    21.                                 <li class="list-group-item"><a href="">数据备份</a></li>
    22.                                 <li class="list-group-item"><a href="">系统状态</a></li>
    23.                                 <li class="list-group-item"><a href="">系统状态</a></li>
    24.                             </ul>
    25.                         </div>
    26.                     </div>
    27.                 </div>
    28.  
    29.                 <div class="panel panel-default">
    30.                     <div class="panel-heading" role="tab" id="headingTwo">
    31.                         <h4 class="panel-title">
    32.                             <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
    33.                                 <span class="glyphicon glyphicon-user"></span> 用户管理
    34.                             </a>
    35.                         </h4>
    36.                     </div>
    37.                     <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
    38.                         <div class="panel-body">
    39.                             <!--使用列表组-->
    40.                             <ul class="list-group">
    41.                                 <li class="list-group-item"><a href="">用户列表</a></li>
    42.                             </ul>
    43.                         </div>
    44.                     </div>
    45.                 </div>
    46.                 <div class="panel panel-default">
    47.                     <div class="panel-heading" role="tab" id="headingThree">
    48.                         <h4 class="panel-title">
    49.                             <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
    50.                                 <span class="glyphicon glyphicon-bishop"></span> 学生管理
    51.                             </a>
    52.                         </h4>
    53.                     </div>
    54.                     <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
    55.                         <div class="panel-body">
    56.                             <!--使用列表组-->
    57.                             <ul class="list-group">
    58.                                 <li class="list-group-item"><a href="">学生列表</a></li>
    59.                             </ul>
    60.                         </div>
    61.                     </div>
    62.                 </div>
    63.             </div>
    64.         </div>
    65.         <!--页面中心内容-->
    66.         <div class="col-sm-10">
    67.  
    68.         </div>
    69.     </div>
    70. </div>

     

     用户管理页面跟主页面，导航栏，菜单栏都相同，不同的是页面中心内容部分，所以复制index主页面代码，修改页面中心内容部分的代码：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>用户列表</title>
    6.     <!--引入bootstrap的css-->
    7.     <link rel="stylesheet" href="../../static/css/bootstrap.min.css">
    8.     <!--引入jQuery的文件-->
    9.     <script src="../../static/jq/jquery-3.6.0.js"></script>
    10.     <!--引入bootstrap的js文件-->
    11.     <script src="../../static/js/bootstrap.min.js"></script>
    12. </head>
    13. <body>
    14. <!--导航条-->
    15. <nav class="navbar navbar-inverse">
    16.     <div class="container-fluid">
    17.         <!-- Brand and toggle get grouped for better mobile display -->
    18.         <div class="navbar-header">
    19.             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    20.                 <span class="sr-only">Toggle navigation</span>
    21.                 <span class="icon-bar"></span>
    22.                 <span class="icon-bar"></span>
    23.                 <span class="icon-bar"></span>
    24.             </button>
    25.             <a class="navbar-brand" href="#">学生管理系统<span class="badge"> V1.0</span></a>
    26.         </div>
    27.  
    28.         <!-- Collect the nav links, forms, and other content for toggling -->
    29.         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    30.  
    31.             <ul class="nav navbar-nav navbar-right">
    32.                 <li><a href="#">欢迎：<span class="text-danger">小黑</span></a></li>
    33.                 <li class="dropdown">
    34.                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">用户中心 <span class="caret"></span></a>
    35.                     <ul class="dropdown-menu">
    36.                         <li><a href="#">修改密码</a></li>
    37.                         <li role="separator" class="divider"></li>
    38.                         <li><a href="#">我的订单</a></li>
    39.                         <li role="separator" class="divider"></li>
    40.                         <li><a href="#">退出登录</a></li>
    41.                         <li role="separator" class="divider"></li>
    42.                     </ul>
    43.                 </li>
    44.             </ul>
    45.         </div>
    46.     </div>
    47. </nav>
    48. <!--页面主体内容-->
    49. <div class="container-fluid">
    50.     <!--栅格系统布局-->
    51.     <div class="row">
    52.         <!--菜单：使用手风琴组件-->
    53.         <div class="col-sm-2">
    54.             <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    55.                 <!--第一个面板-->
    56.                 <div class="panel panel-default">
    57.                     <div class="panel-heading" role="tab" id="headingOne">
    58.                         <h4 class="panel-title">
    59.                             <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
    60.                                 <span class="glyphicon glyphicon-apple"></span> 系统管理
    61.                             </a>
    62.                         </h4>
    63.                     </div>
    64.                     <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
    65.                         <div class="panel-body">
    66.                             <!--使用列表组-->
    67.                             <ul class="list-group">
    68.                                 <li class="list-group-item"><a href="">数据备份</a></li>
    69.                                 <li class="list-group-item"><a href="">系统状态</a></li>
    70.                                 <li class="list-group-item"><a href="">系统状态</a></li>
    71.                             </ul>
    72.                         </div>
    73.                     </div>
    74.                 </div>
    75.                 <!--第二个面板-->
    76.                 <div class="panel panel-default">
    77.                     <div class="panel-heading" role="tab" id="headingTwo">
    78.                         <h4 class="panel-title">
    79.                             <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
    80.                                 <span class="glyphicon glyphicon-user"></span> 用户管理
    81.                             </a>
    82.                         </h4>
    83.                     </div>
    84.                     <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
    85.                         <div class="panel-body">
    86.                             <!--使用列表组-->
    87.                             <ul class="list-group">
    88.                                 <li class="list-group-item"><a href="">用户列表</a></li>
    89.                             </ul>
    90.                         </div>
    91.                     </div>
    92.                 </div>
    93.                 <!--第三个面板-->
    94.                 <div class="panel panel-default">
    95.                     <div class="panel-heading" role="tab" id="headingThree">
    96.                         <h4 class="panel-title">
    97.                             <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
    98.                                 <span class="glyphicon glyphicon-bishop"></span> 学生管理
    99.                             </a>
    100.                         </h4>
    101.                     </div>
    102.                     <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
    103.                         <div class="panel-body">
    104.                             <!--使用列表组-->
    105.                             <ul class="list-group">
    106.                                 <li class="list-group-item"><a href="">学生列表</a></li>
    107.                             </ul>
    108.                         </div>
    109.                     </div>
    110.                 </div>
    111.             </div>
    112.         </div>
    113.  
    114.         <!--页面中心内容-->
    115.         <div class="col-sm-10">
    116.             <!--页头-->
    117.             <div class="page-header" style="margin-top: -20px;margin-bottom: 5px">
    118.                 <h1>用户管理</h1>
    119.             </div>
    120.             <!--标签页-->
    121.             <div>
    122.  
    123.                 <!-- Nav tabs -->
    124.                 <ul class="nav nav-tabs" role="tablist">
    125.                     <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">用户列表</a></li>
    126.                     <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">添加用户</a></li>
    127.                 </ul>
    128.  
    129.                 <!-- Tab panes -->
    130.                 <div class="tab-content">
    131.                     <div role="tabpanel" class="tab-pane active" id="home">
    132.                         <!--嵌套基础面板：处理用户列表面板-->
    133.                         <div class="panel panel-default">
    134.                             <div class="panel-body text-center">
    135.                                 <!--内联表单-->
    136.                                 <form class="form-inline">
    137.                                     <div class="form-group">
    138.                                         <label for="exampleInputName2">Name</label>
    139.                                         <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
    140.                                     </div>
    141.                                     <div class="form-group">
    142.                                         <label for="exampleInputEmail2">Email</label>
    143.                                         <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
    144.                                     </div>
    145.                                     <button type="submit" class="btn btn-default">Send invitation</button>
    146.                                 </form>
    147.                             </div>
    148.                             <!--栅格布局-->
    149.                             <div class="row">
    150.                                 <div class="col-sm-10 col-sm-offset-1">
    151.                                     <!--表格-->
    152.                                     <table class="table">
    153.                                         <thead>
    154.                                         <tr>
    155.                                             <th>#</th>
    156.                                             <th>id</th>
    157.                                             <th>名称</th>
    158.                                             <th>用户名</th>
    159.                                             <th>操作</th>
    160.                                         </tr>
    161.                                         </thead>
    162.                                         <tbody>
    163.                                         <tr>
    164.                                             <th scope="row">1</th>
    165.                                             <td>Mark</td>
    166.                                             <td>Otto</td>
    167.                                             <td>@mdo</td>
    168.                                             <td>
    169.                                                 <a href="" class="btn btn-danger btn-sm">删除</a>
    170.                                                 <a href="" class="btn btn-info btn-sm">修改</a>
    171.                                             </td>
    172.                                         </tr>
    173.                                         <tr>
    174.                                             <th scope="row">2</th>
    175.                                             <td>Jacob</td>
    176.                                             <td>Thornton</td>
    177.                                             <td>@fat</td>
    178.                                             <td>
    179.                                                 <a href="" class="btn btn-danger btn-sm">删除</a>
    180.                                                 <a href="" class="btn btn-info btn-sm">修改</a>
    181.                                             </td>
    182.                                         </tr>
    183.                                         <tr>
    184.                                             <th scope="row">3</th>
    185.                                             <td>Larry</td>
    186.                                             <td>the Bird</td>
    187.                                             <td>@twitter</td>
    188.                                             <td>
    189.                                                 <a href="" class="btn btn-danger btn-sm">删除</a>
    190.                                                 <a href="" class="btn btn-info btn-sm">修改</a>
    191.                                             </td>
    192.                                         </tr>
    193.                                         </tbody>
    194.                                     </table>
    195.                                 </div>
    196.                             </div>
    197.  
    198.                         </div>
    199.                     </div>
    200.                     <div role="tabpanel" class="tab-pane" id="profile">
    201.                         用户添加
    202.                     </div>
    203.                 </div>
    204.  
    205.             </div>
    206.         </div>
    207.     </div>
    208. </div>
    209. </body>
    210. </html>

     

    1.  <!--页头-->
    2.             <div class="page-header" style="margin-top: -20px;margin-bottom: 5px">
    3.                 <h1>用户管理</h1>
    4.             </div>
    5. <!--标签页-->
    6.             <div>
    7.  
    8.                 <!-- Nav tabs -->
    9.                 <ul class="nav nav-tabs" role="tablist">
    10.                     <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">用户列表</a></li>
    11.                     <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">添加用户</a></li>
    12.                 </ul>
    13.  
    14.                 <!-- Tab panes -->
    15.                 <div class="tab-content">
    16.                     <div role="tabpanel" class="tab-pane active" id="home">
    17.                         <!--嵌套基础面板：处理用户列表面板-->
    18.                         <div class="panel panel-default">
    19.                             <div class="panel-body text-center">
    20.                                 <!--内联表单-->
    21.                                 <form class="form-inline">
    22.                                     <div class="form-group">
    23.                                         <label for="exampleInputName2">Name</label>
    24.                                         <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
    25.                                     </div>
    26.                                     <div class="form-group">
    27.                                         <label for="exampleInputEmail2">Email</label>
    28.                                         <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
    29.                                     </div>
    30.                                     <button type="submit" class="btn btn-default">Send invitation</button>
    31.                                 </form>
    32.                             </div>
    33.                             <!--栅格布局-->
    34.                             <div class="row">
    35.                                 <div class="col-sm-10 col-sm-offset-1">
    36.                                     <!--表格-->
    37.                                     <table class="table">
    38.                                         <thead>
    39.                                         <tr>
    40.                                             <th>#</th>
    41.                                             <th>id</th>
    42.                                             <th>名称</th>
    43.                                             <th>用户名</th>
    44.                                             <th>操作</th>
    45.                                         </tr>
    46.                                         </thead>
    47.                                         <tbody>
    48.                                         <tr>
    49.                                             <th scope="row">1</th>
    50.                                             <td>Mark</td>
    51.                                             <td>Otto</td>
    52.                                             <td>@mdo</td>
    53.                                             <td>
    54.                                                 <a href="" class="btn btn-danger btn-sm">删除</a>
    55.                                                 <a href="" class="btn btn-info btn-sm">修改</a>
    56.                                             </td>
    57.                                         </tr>
    58.                                         <tr>
    59.                                             <th scope="row">2</th>
    60.                                             <td>Jacob</td>
    61.                                             <td>Thornton</td>
    62.                                             <td>@fat</td>
    63.                                             <td>
    64.                                                 <a href="" class="btn btn-danger btn-sm">删除</a>
    65.                                                 <a href="" class="btn btn-info btn-sm">修改</a>
    66.                                             </td>
    67.                                         </tr>
    68.                                         <tr>
    69.                                             <th scope="row">3</th>
    70.                                             <td>Larry</td>
    71.                                             <td>the Bird</td>
    72.                                             <td>@twitter</td>
    73.                                             <td>
    74.                                                 <a href="" class="btn btn-danger btn-sm">删除</a>
    75.                                                 <a href="" class="btn btn-info btn-sm">修改</a>
    76.                                             </td>
    77.                                         </tr>
    78.                                         </tbody>
    79.                                     </table>
    80.                                 </div>
    81.                             </div>
    82.  
    83.                         </div>
    84.                     </div>
    85.                     <div role="tabpanel" class="tab-pane" id="profile">
    86.                         用户添加
    87.                     </div>
    88.                 </div>
    89.  
    90.             </div>

     

    添加分页、消息提示警告框：

     

     

     

    第二个面板：

     

     

     

     

     点击修改：

    用户列表页list.html面详细代码：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>用户列表</title>
    6.     <!--引入bootstrap的css-->
    7.     <link rel="stylesheet" href="../../static/css/bootstrap.min.css">
    8.     <!--引入jQuery的文件-->
    9.     <script src="../../static/jq/jquery-3.6.0.js"></script>
    10.     <!--引入bootstrap的js文件-->
    11.     <script src="../../static/js/bootstrap.min.js"></script>
    12. </head>
    13. <body>
    14. <!--导航条-->
    15. <nav class="navbar navbar-inverse">
    16.     <div class="container-fluid">
    17.         <!-- Brand and toggle get grouped for better mobile display -->
    18.         <div class="navbar-header">
    19.             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    20.                 <span class="sr-only">Toggle navigation</span>
    21.                 <span class="icon-bar"></span>
    22.                 <span class="icon-bar"></span>
    23.                 <span class="icon-bar"></span>
    24.             </button>
    25.             <a class="navbar-brand" href="#">学生管理系统<span class="badge"> V1.0</span></a>
    26.         </div>
    27.  
    28.         <!-- Collect the nav links, forms, and other content for toggling -->
    29.         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    30.  
    31.             <ul class="nav navbar-nav navbar-right">
    32.                 <li><a href="#">欢迎：<span class="text-danger">小黑</span></a></li>
    33.                 <li class="dropdown">
    34.                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">用户中心 <span class="caret"></span></a>
    35.                     <ul class="dropdown-menu">
    36.                         <li><a href="#">修改密码</a></li>
    37.                         <li role="separator" class="divider"></li>
    38.                         <li><a href="#">我的订单</a></li>
    39.                         <li role="separator" class="divider"></li>
    40.                         <li><a href="#">退出登录</a></li>
    41.                         <li role="separator" class="divider"></li>
    42.                     </ul>
    43.                 </li>
    44.             </ul>
    45.         </div>
    46.     </div>
    47. </nav>
    48. <!--页面主体内容-->
    49. <div class="container-fluid">
    50.     <!--栅格系统布局-->
    51.     <div class="row">
    52.         <!--菜单：使用手风琴组件-->
    53.         <div class="col-sm-2">
    54.             <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    55.                 <!--第一个面板-->
    56.                 <div class="panel panel-default">
    57.                     <div class="panel-heading" role="tab" id="headingOne">
    58.                         <h4 class="panel-title">
    59.                             <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
    60.                                 <span class="glyphicon glyphicon-apple"></span> 系统管理
    61.                             </a>
    62.                         </h4>
    63.                     </div>
    64.                     <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
    65.                         <div class="panel-body">
    66.                             <!--使用列表组-->
    67.                             <ul class="list-group">
    68.                                 <li class="list-group-item"><a href="">数据备份</a></li>
    69.                                 <li class="list-group-item"><a href="">系统状态</a></li>
    70.                                 <li class="list-group-item"><a href="">系统状态</a></li>
    71.                             </ul>
    72.                         </div>
    73.                     </div>
    74.                 </div>
    75.                 <!--第二个面板-->
    76.                 <div class="panel panel-default">
    77.                     <div class="panel-heading" role="tab" id="headingTwo">
    78.                         <h4 class="panel-title">
    79.                             <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
    80.                                 <span class="glyphicon glyphicon-user"></span> 用户管理
    81.                             </a>
    82.                         </h4>
    83.                     </div>
    84.                     <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
    85.                         <div class="panel-body">
    86.                             <!--使用列表组-->
    87.                             <ul class="list-group">
    88.                                 <li class="list-group-item"><a href="">用户列表</a></li>
    89.                             </ul>
    90.                         </div>
    91.                     </div>
    92.                 </div>
    93.                 <!--第三个面板-->
    94.                 <div class="panel panel-default">
    95.                     <div class="panel-heading" role="tab" id="headingThree">
    96.                         <h4 class="panel-title">
    97.                             <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
    98.                                 <span class="glyphicon glyphicon-bishop"></span> 学生管理
    99.                             </a>
    100.                         </h4>
    101.                     </div>
    102.                     <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
    103.                         <div class="panel-body">
    104.                             <!--使用列表组-->
    105.                             <ul class="list-group">
    106.                                 <li class="list-group-item"><a href="">学生列表</a></li>
    107.                             </ul>
    108.                         </div>
    109.                     </div>
    110.                 </div>
    111.             </div>
    112.         </div>
    113.  
    114.         <!--页面中心内容-->
    115.         <div class="col-sm-10">
    116.             <!--页头-->
    117.             <div class="page-header" style="margin-top: -20px;margin-bottom: 5px">
    118.                 <h1>用户管理</h1>
    119.             </div>
    120.             <!--标签页组件-->
    121.             <div>
    122.                 <!-- Nav tabs -->
    123.                 <ul class="nav nav-tabs" role="tablist">
    124.                     <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">用户列表</a></li>
    125.                     <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">添加用户</a></li>
    126.                 </ul>
    127.  
    128.                 <!-- Tab panes -->
    129.                 <div class="tab-content">
    130.                     <div role="tabpanel" class="tab-pane active" id="home">
    131.                         <!--嵌套基础面板：处理用户列表面板-->
    132.                         <div class="panel panel-default">
    133.                             <div class="panel-body text-center">
    134.                                 <!--内联表单-->
    135.                                 <form class="form-inline">
    136.                                     <div class="form-group">
    137.                                         <label for="exampleInputName2">Name</label>
    138.                                         <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
    139.                                     </div>
    140.                                     <div class="form-group">
    141.                                         <label for="exampleInputEmail2">Email</label>
    142.                                         <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
    143.                                     </div>
    144.                                     <button type="submit" class="btn btn-default">Send invitation</button>
    145.                                 </form>
    146.                             </div>
    147.                             <!--栅格布局-->
    148.                             <div class="row">
    149.                                 <div class="col-sm-10 col-sm-offset-1">
    150.                                     <ul class="list-unstyled">
    151.                                         <li>
    152.                                             <button class="btn btn-success btn-sm">添加用户信息</button>
    153.                                         </li>
    154.                                     </ul>
    155.                                     <!--表格-->
    156.                                     <table class="table">
    157.                                         <thead>
    158.                                         <tr>
    159.                                             <th>#</th>
    160.                                             <th>姓名</th>
    161.                                             <th>名称</th>
    162.                                             <th>用户名</th>
    163.                                             <th>操作</th>
    164.                                         </tr>
    165.                                         </thead>
    166.                                         <tbody>
    167.                                         <tr>
    168.                                             <th scope="row">1</th>
    169.                                             <td>Mark</td>
    170.                                             <td>Otto</td>
    171.                                             <td>@mdo</td>
    172.                                             <td>
    173.                                                 <a href="" class="btn btn-danger btn-sm">删除</a>
    174.                                                 <a href="" class="btn btn-info btn-sm" data-toggle="modal" data-target="#editUserModal">修改</a>
    175.                                             </td>
    176.                                         </tr>
    177.                                         <tr>
    178.                                             <th scope="row">2</th>
    179.                                             <td>Jacob</td>
    180.                                             <td>Thornton</td>
    181.                                             <td>@fat</td>
    182.                                             <td>
    183.                                                 <a href="" class="btn btn-danger btn-sm">删除</a>
    184.                                                 <a href="" class="btn btn-info btn-sm" data-toggle="modal" data-target="#editUserModal">修改</a>
    185.                                             </td>
    186.                                         </tr>
    187.                                         <tr>
    188.                                             <th scope="row">3</th>
    189.                                             <td>Larry</td>
    190.                                             <td>the Bird</td>
    191.                                             <td>@twitter</td>
    192.                                             <td>
    193.                                                 <a href="" class="btn btn-danger btn-sm">删除</a>
    194.                                                 <a href="" class="btn btn-info btn-sm" data-toggle="modal" data-target="#editUserModal">修改</a>
    195.                                             </td>
    196.                                         </tr>
    197.                                         </tbody>
    198.                                     </table>
    199.  
    200.                                     <!--分页  class="pull-right"在右边显示-->
    201.                                     <div class="pull-right">
    202.                                         <nav aria-label="Page navigation">
    203.                                             <ul class="pagination">
    204.                                                 <li class="disabled">
    205.                                                     <a href="#" aria-label="Previous">
    206.                                                         <span aria-hidden="true">&laquo;</span>
    207.                                                     </a>
    208.                                                 </li>
    209.                                                 <li><a href="#" class="active">1</a></li>
    210.                                                 <li><a href="#">2</a></li>
    211.                                                 <li><a href="#">3</a></li>
    212.                                                 <li><a href="#">4</a></li>
    213.                                                 <li><a href="#">5</a></li>
    214.                                                 <li>
    215.                                                     <a href="#" aria-label="Next">
    216.                                                         <span aria-hidden="true">&raquo;</span>
    217.                                                     </a>
    218.                                                 </li>
    219.                                             </ul>
    220.                                         </nav>
    221.                                     </div>
    222.                                 </div>
    223.                             </div>
    224.  
    225.                         </div>
    226.                         <!--处理消息提示-->
    227.                         <div class="alert alert-success alert-dismissible" role="alert">
    228.                             <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    229.                             <strong>删除成功：</strong> 当前数据已被删除！
    230.                         </div>
    231.                         <div class="alert alert-danger alert-dismissible" role="alert">
    232.                             <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    233.                             <strong>删除失败：</strong> 删除数据失败！
    234.                         </div>
    235.                     </div>
    236.                     <!--第二个面板-->
    237.                     <div role="tabpanel" class="tab-pane" id="profile">
    238.                         <!--添加用户的表单-->
    239.                         <!--使用面板-->
    240.                         <div class="panel panel-default">
    241.                             <div class="panel-body">
    242.                                 <!--栅格布局-->
    243.                                 <div class="row">
    244.                                     <div class="col-sm-10 col-sm-offset-1">
    245.                                         <!--表单-->
    246.                                         <form>
    247.                                             <div class="form-group">
    248.                                                 <label for="name1">Email address</label>
    249.                                                 <input type="email" class="form-control" id="name1" placeholder="Email">
    250.                                             </div>
    251.                                             <div class="form-group">
    252.                                                 <label for="name">Password</label>
    253.                                                 <input type="password" class="form-control" id="name" placeholder="Password">
    254.                                             </div>
    255.                                             <div class="form-group">
    256.                                                 <label for="exampleInputFile">File input</label>
    257.                                                 <input type="file" id="exampleInputFile1">
    258.                                                 <p class="help-block">Example block-level help text here.</p>
    259.                                             </div>
    260.                                             <div class="checkbox">
    261.                                                 <label>
    262.                                                     <input type="checkbox"> Check me out
    263.                                                 </label>
    264.                                             </div>
    265.                                             <button type="submit" class="btn btn-info btn-block">Submit</button>
    266.                                         </form>
    267.                                     </div>
    268.                                 </div>
    269.                             </div>
    270.                         </div>
    271.                     </div>
    272.                 </div>
    273.  
    274.             </div>
    275.         </div>
    276.     </div>
    277. </div>
    278.  
    279. <!--模态框-->
    280. <div class="modal fade" id="editUserModal" tabindex="-1" role="dialog">
    281.     <div class="modal-dialog" role="document">
    282.         <div class="modal-content">
    283.             <div class="modal-header">
    284.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    285.                 <h4 class="modal-title">Modal title</h4>
    286.             </div>
    287.             <div class="modal-body">
    288.                 <!--表单-->
    289.                 <form>
    290.                     <div class="form-group">
    291.                         <label for="exampleInputEmail1">Email address</label>
    292.                         <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    293.                     </div>
    294.                     <div class="form-group">
    295.                         <label for="exampleInputPassword1">Password</label>
    296.                         <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    297.                     </div>
    298.                     <div class="form-group">
    299.                         <label for="exampleInputFile">File input</label>
    300.                         <input type="file" id="exampleInputFile">
    301.                         <p class="help-block">Example block-level help text here.</p>
    302.                     </div>
    303.                     <div class="checkbox">
    304.                         <label>
    305.                             <input type="checkbox"> Check me out
    306.                         </label>
    307.                     </div>
    308.                     <button type="submit" class="btn btn-default">Submit</button>
    309.                 </form>
    310.             </div>
    311.             <div class="modal-footer">
    312.                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    313.                 <button type="button" class="btn btn-primary">Save changes</button>
    314.             </div>
    315.         </div>
    316.     </div>
    317. </div>
    318. </body>
    319. </html>

     

    页面联合搭建： 

     下面分被创建分模块：主页面引用：

    分别复制list1，list1页面只剩下中心内容和模态框，其余内容删去，然后再主页面的按钮点击引入

    student/list1.html中心内容部分：

     

    1.  
    2. <!--页面中心内容-->
    3. <div class="col-sm-10">
    4.             <!--页头-->
    5.             <div class="page-header" style="margin-top: -20px;margin-bottom: 5px">
    6.                 <h1>学生管理</h1>
    7.             </div>
    8.             <!--标签页组件-->
    9.             <div>
    10.                 <!-- Nav tabs -->
    11.                 <ul class="nav nav-tabs" role="tablist">
    12.                     <li role="presentation" class="active"><a href="#home1" aria-controls="home" role="tab" data-toggle="tab">学生列表</a></li>
    13.                     <li role="presentation"><a href="#profile1" aria-controls="profile" role="tab" data-toggle="tab">添加学生</a></li>
    14.                 </ul>
    15.  
    16.                 <!-- Tab panes -->
    17.                 <div class="tab-content">
    18.                     <div role="tabpanel" class="tab-pane active" id="home1">
    19.                         <!--嵌套基础面板：处理用户列表面板-->
    20.                         <div class="panel panel-default">
    21.                             <div class="panel-body text-center">
    22.                                 <!--内联表单-->
    23.                                 <form class="form-inline">
    24.                                     <div class="form-group">
    25.                                         <label for="exampleInputName1">Name</label>
    26.                                         <input type="text" class="form-control" id="exampleInputName1" placeholder="Jane Doe">
    27.                                     </div>
    28.                                     <div class="form-group">
    29.                                         <label for="exampleInputEmail3">Email</label>
    30.                                         <input type="email" class="form-control" id="exampleInputEmail3" placeholder="jane.doe@example.com">
    31.                                     </div>
    32.                                     <button type="submit" class="btn btn-default">Send invitation</button>
    33.                                 </form>
    34.                             </div>
    35.                             <!--栅格布局-->
    36.                             <div class="row">
    37.                                 <div class="col-sm-10 col-sm-offset-1">
    38.                                     <ul class="list-unstyled">
    39.                                         <li>
    40.                                             <button class="btn btn-success btn-sm">添加用户信息</button>
    41.                                         </li>
    42.                                     </ul>
    43.                                     <!--表格-->
    44.                                     <table class="table">
    45.                                         <thead>
    46.                                         <tr>
    47.                                             <th>#</th>
    48.                                             <th>姓名</th>
    49.                                             <th>名称</th>
    50.                                             <th>用户名</th>
    51.                                             <th>操作</th>
    52.                                         </tr>
    53.                                         </thead>
    54.                                         <tbody>
    55.                                         <tr>
    56.                                             <th scope="row">1</th>
    57.                                             <td>Mark</td>
    58.                                             <td>Otto</td>
    59.                                             <td>@mdo</td>
    60.                                             <td>
    61.                                                 <a href="" class="btn btn-danger btn-sm">删除</a>
    62.                                                 <a href="" class="btn btn-info btn-sm" data-toggle="modal" data-target="#editUserModal">修改</a>
    63.                                             </td>
    64.                                         </tr>
    65.                                         <tr>
    66.                                             <th scope="row">2</th>
    67.                                             <td>Jacob</td>
    68.                                             <td>Thornton</td>
    69.                                             <td>@fat</td>
    70.                                             <td>
    71.                                                 <a href="" class="btn btn-danger btn-sm">删除</a>
    72.                                                 <a href="" class="btn btn-info btn-sm" data-toggle="modal" data-target="#editUserModal">修改</a>
    73.                                             </td>
    74.                                         </tr>
    75.                                         <tr>
    76.                                             <th scope="row">3</th>
    77.                                             <td>Larry</td>
    78.                                             <td>the Bird</td>
    79.                                             <td>@twitter</td>
    80.                                             <td>
    81.                                                 <a href="" class="btn btn-danger btn-sm">删除</a>
    82.                                                 <a href="" class="btn btn-info btn-sm" data-toggle="modal" data-target="#editUserModal">修改</a>
    83.                                             </td>
    84.                                         </tr>
    85.                                         </tbody>
    86.                                     </table>
    87.  
    88.                                     <!--分页  class="pull-right"在右边显示-->
    89.                                     <div class="pull-right">
    90.                                         <nav aria-label="Page navigation">
    91.                                             <ul class="pagination">
    92.                                                 <li class="disabled">
    93.                                                     <a href="#" aria-label="Previous">
    94.                                                         <span aria-hidden="true">&laquo;</span>
    95.                                                     </a>
    96.                                                 </li>
    97.                                                 <li><a href="#" class="active">1</a></li>
    98.                                                 <li><a href="#">2</a></li>
    99.                                                 <li><a href="#">3</a></li>
    100.                                                 <li><a href="#">4</a></li>
    101.                                                 <li><a href="#">5</a></li>
    102.                                                 <li>
    103.                                                     <a href="#" aria-label="Next">
    104.                                                         <span aria-hidden="true">&raquo;</span>
    105.                                                     </a>
    106.                                                 </li>
    107.                                             </ul>
    108.                                         </nav>
    109.                                     </div>
    110.                                 </div>
    111.                             </div>
    112.  
    113.                         </div>
    114.                         <!--处理消息提示-->
    115.                         <div class="alert alert-success alert-dismissible" role="alert">
    116.                             <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    117.                             <strong>删除成功：</strong> 当前数据已被删除！
    118.                         </div>
    119.                         <div class="alert alert-danger alert-dismissible" role="alert">
    120.                             <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    121.                             <strong>删除失败：</strong> 删除数据失败！
    122.                         </div>
    123.                     </div>
    124.                     <!--第二个面板-->
    125.                     <div role="tabpanel" class="tab-pane" id="profile1">
    126.                         <!--添加用户的表单-->
    127.                         <!--使用面板-->
    128.                         <div class="panel panel-default">
    129.                             <div class="panel-body">
    130.                                 <!--栅格布局-->
    131.                                 <div class="row">
    132.                                     <div class="col-sm-10 col-sm-offset-1">
    133.                                         <!--表单-->
    134.                                         <form>
    135.                                             <div class="form-group">
    136.                                                 <label for="name">Email address</label>
    137.                                                 <input type="email" class="form-control" id="name" placeholder="Email">
    138.                                             </div>
    139.                                             <div class="form-group">
    140.                                                 <label for="password">Password</label>
    141.                                                 <input type="password" class="form-control" id="password" placeholder="Password">
    142.                                             </div>
    143.                                             <div class="form-group">
    144.                                                 <label for="exampleInputFile">File input</label>
    145.                                                 <input type="file" id="exampleInputFile1">
    146.                                                 <p class="help-block">Example block-level help text here.</p>
    147.                                             </div>
    148.                                             <div class="checkbox">
    149.                                                 <label>
    150.                                                     <input type="checkbox"> Check me out
    151.                                                 </label>
    152.                                             </div>
    153.                                             <button type="submit" class="btn btn-info btn-block">Submit</button>
    154.                                         </form>
    155.                                     </div>
    156.                                 </div>
    157.                             </div>
    158.                         </div>
    159.                     </div>
    160.                 </div>
    161.  
    162.             </div>
    163.         </div>
    164.  
    165. <!--模态框-->
    166. <div class="modal fade" id="editUserModal" tabindex="-1" role="dialog">
    167.     <div class="modal-dialog" role="document">
    168.         <div class="modal-content">
    169.             <div class="modal-header">
    170.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    171.                 <h4 class="modal-title">Modal title</h4>
    172.             </div>
    173.             <div class="modal-body">
    174.                 <!--表单-->
    175.                 <form>
    176.                     <div class="form-group">
    177.                         <label for="exampleInputEmail1">Email address</label>
    178.                         <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    179.                     </div>
    180.                     <div class="form-group">
    181.                         <label for="exampleInputPassword1">Password</label>
    182.                         <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    183.                     </div>
    184.                     <div class="form-group">
    185.                         <label for="exampleInputFile">File input</label>
    186.                         <input type="file" id="exampleInputFile">
    187.                         <p class="help-block">Example block-level help text here.</p>
    188.                     </div>
    189.                     <div class="checkbox">
    190.                         <label>
    191.                             <input type="checkbox"> Check me out
    192.                         </label>
    193.                     </div>
    194.                     <button type="submit" class="btn btn-default">Submit</button>
    195.                 </form>
    196.             </div>
    197.             <div class="modal-footer">
    198.                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    199.                 <button type="button" class="btn btn-primary">Save changes</button>
    200.             </div>
    201.         </div>
    202.     </div>
    203. </div>

    user/ list1.html:

    主页面引入index.html：

     简化js：

     

     全部主页面代码：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>系统主页</title>
    6.     <!--引入bootstrap的css-->
    7.     <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    8.     <!--引入jQuery的文件-->
    9.     <script src="../static/jq/jquery-3.6.0.js"></script>
    10.     <!--引入bootstrap的js文件-->
    11.     <script src="../static/js/bootstrap.min.js"></script>
    12. </head>
    13. <body>
    14. <!--导航条-->
    15. <nav class="navbar navbar-inverse">
    16.     <div class="container-fluid">
    17.         <!-- Brand and toggle get grouped for better mobile display -->
    18.         <div class="navbar-header">
    19.             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    20.                 <span class="sr-only">Toggle navigation</span>
    21.                 <span class="icon-bar"></span>
    22.                 <span class="icon-bar"></span>
    23.                 <span class="icon-bar"></span>
    24.             </button>
    25.             <a class="navbar-brand" href="#">学生管理系统<span class="badge"> V1.0</span></a>
    26.         </div>
    27.  
    28.         <!-- Collect the nav links, forms, and other content for toggling -->
    29.         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    30.  
    31.             <ul class="nav navbar-nav navbar-right">
    32.                 <li><a href="#">欢迎：<span class="text-danger">小黑</span></a></li>
    33.                 <li class="dropdown">
    34.                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">用户中心 <span class="caret"></span></a>
    35.                     <ul class="dropdown-menu">
    36.                         <li><a href="#">修改密码</a></li>
    37.                         <li role="separator" class="divider"></li>
    38.                         <li><a href="#">我的订单</a></li>
    39.                         <li role="separator" class="divider"></li>
    40.                         <li><a href="#">退出登录</a></li>
    41.                         <li role="separator" class="divider"></li>
    42.                     </ul>
    43.                 </li>
    44.             </ul>
    45.         </div>
    46.     </div>
    47. </nav>
    48. <!--页面主体内容-->
    49. <div class="container-fluid">
    50.     <!--栅格系统布局-->
    51.     <div class="row">
    52.         <!--菜单：使用手风琴组件-->
    53.         <div class="col-sm-2">
    54.             <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    55.  
    56.                 <div class="panel panel-default">
    57.                     <div class="panel-heading" role="tab" id="headingOne">
    58.                         <h4 class="panel-title">
    59.                             <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
    60.                                 <span class="glyphicon glyphicon-apple"></span> 系统管理
    61.                             </a>
    62.                         </h4>
    63.                     </div>
    64.                     <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
    65.                         <div class="panel-body">
    66.                             <!--使用列表组-->
    67.                             <ul class="list-group">
    68.                                 <li class="list-group-item"><a href="">数据备份</a></li>
    69.                                 <li class="list-group-item"><a href="">系统状态</a></li>
    70.                                 <li class="list-group-item"><a href="">系统状态</a></li>
    71.                             </ul>
    72.                         </div>
    73.                     </div>
    74.                 </div>
    75.  
    76.                 <div class="panel panel-default">
    77.                     <div class="panel-heading" role="tab" id="headingTwo">
    78.                         <h4 class="panel-title">
    79.                             <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
    80.                                 <span class="glyphicon glyphicon-user"></span> 用户管理
    81.                             </a>
    82.                         </h4>
    83.                     </div>
    84.                     <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
    85.                         <div class="panel-body">
    86.                             <!--使用列表组-->
    87.                             <ul class="list-group">
    88.                                 <li class="list-group-item"><a href="javascript:;" id="btn">用户列表</a></li>
    89.                                 <script>
    90.                                     $(function(){
    91.                                        $("#btn").click(function () {
    92.                                            //动态更换中心内容  load 将远程url对应的页面(原码包含)到指定选择器中  注意是原码包含 注意id冲突
    93.                                            //url可以是springmvc的控制器  控制器也是跳转一个页面，以原码的形式替换这个内容
    94.                                            $("#content").load("./user/list1.html");
    95.                                        })
    96.                                     });
    97.                                 </script>
    98.                             </ul>
    99.                         </div>
    100.                     </div>
    101.                 </div>
    102.                 <div class="panel panel-default">
    103.                     <div class="panel-heading" role="tab" id="headingThree">
    104.                         <h4 class="panel-title">
    105.                             <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
    106.                                 <span class="glyphicon glyphicon-bishop"></span> 学生管理
    107.                             </a>
    108.                         </h4>
    109.                     </div>
    110.                     <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
    111.                         <div class="panel-body">
    112.                             <!--使用列表组-->
    113.                             <ul class="list-group">
    114.                                 <li class="list-group-item"><a href="javascript:$('#content').load('./student/list1.html');" id="stubtn">学生列表</a></li>
    115.                                 <!--<script>
    116.                                     $(function(){
    117.                                         $("#stubtn").click(function () {
    118.                                             //动态更换中心内容  load 将远程url对应的页面(原码包含)到指定选择器中  注意是原码包含
    119.                                             $("#content").load("./student/list1.html");
    120.                                         })
    121.                                     });
    122.                                 </script>-->
    123.                             </ul>
    124.                         </div>
    125.                     </div>
    126.                 </div>
    127.             </div>
    128.         </div>
    129.  
    130.  
    131.         <div id="content">
    132.             <!--页面中心内容-->
    133.             <div class="col-sm-10">
    134.                 <!--巨幕-->
    135.                 <div class="jumbotron">
    136.                     <h1>Hello, world!</h1>
    137.                     <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    138.                     <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    139.                 </div>
    140.                 <!--关闭的警告框-->
    141.                 <div class="alert alert-danger alert-dismissible" role="alert">
    142.                     <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    143.                     <h4>网站程序漏洞，请继续修复!</h4>
    144.                     <p>当前版本程序(V1.0)出现严重安全问题，请尽快进行<a href="" class="alert-link"></a>修复！！</p>
    145.                 </div>
    146.                 <p>
    147.                     <button class="btn btn-danger">立即修复</button>
    148.                     <button class="btn btn-default">稍后处理</button>
    149.                 </p>
    150.                 <!--面板-->
    151.                 <div class="panel panel-default">
    152.                     <div class="panel-heading"><span class="glyphicon glyphicon-wrench"></span> 系统状态</div>
    153.                     <div class="panel-body">
    154.                         <!--进度条-->
    155.                         <label>内存使用率：（40%）</label>
    156.                         <div class="progress">
    157.                             <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    158.                                 40%<span class="sr-only"> Complete (success)</span>
    159.                             </div>
    160.                         </div>
    161.                         <label>CPU使用率：（20%）</label>
    162.                         <div class="progress">
    163.                             <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    164.                                 20%<span class="sr-only"> Complete</span>
    165.                             </div>
    166.                         </div>
    167.                         <label>磁盘使用率：（60%）</label>
    168.                         <div class="progress">
    169.                             <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    170.                                 60%<span class="sr-only"> Complete (warning)</span>
    171.                             </div>
    172.                         </div>
    173.                         <label>数据库使用率：（80%）</label>
    174.                         <div class="progress">
    175.                             <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    176.                                 80%<span class="sr-only"> Complete (danger)</span>
    177.                             </div>
    178.                         </div>
    179.                     </div>
    180.                 </div>
    181.             </div>
    182.         </div>
    183.  
    184.     </div>
    185. </div>
    186. </body>
    187. </html>

     

     

     点击用户列表：

    点击学生列表：

     

     

  • 相关阅读:
    5个汇编考察问题
    01- Java概述
    【中间件】redis持久化方式
    全球商务办公解决方案巨头:CRM强助攻, 覆盖1000+伙伴的售后服务网络
    【数字IC验证快速入门】4、熟悉数字IC验证中常用的Linux基本操作
    初识网络原理
    【Jenkins系列】-Pipeline语法全集
    【C/自定义类型详解】——结构体（struct）、位段、枚举(enum)、联合(union)
    网友咨询：手机卡套餐可以换成流量卡套餐吗？说一说改套餐的问题！
    摆脱障碍，通过技术实现企业财务数字化新高度
  • 原文地址：https://blog.csdn.net/dengfengling999/article/details/128167710