• Bootstrap页面整合（十二）

    首先引入bootstrap： 

     复制导航条代码：

    修改导航条：

     删除

     改完的导航条：

    1. <!--导航条-->
    2. <nav class="navbar navbar-inverse">
    3.     <div class="container-fluid">
    4.         <!--屏幕自适应的-->
    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="#">员工管理系统<small>V1.0</small></a>
    13.         </div>
    14.  
    15.         <!-- 导航条中加的组件-->
    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.                     </ul>
    29.                 </li>
    30.             </ul>
    31.         </div>
    32.     </div>
    33. </nav>

     使用列表组或者手风琴来实现左侧菜单：复制手风琴代码

    首先使用栅格布局2分写菜单，10写主要内容 

     把手风琴的代码复制到2分的div内：

    就出现手风琴效果 

     手风琴里嵌套列表组：

    修改代码：

    1. <!--页面中心内容-->
    2. <div class="row">
    3.     <div class="col-sm-2">
    4.         <!--菜单组件：手风琴 panel-group容器-->
    5.         <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    6.             <!--面板-->
    7.             <div class="panel panel-default">
    8.                 <div class="panel-heading" role="tab" id="headingOne">
    9.                     <h4 class="panel-title">
    10.                         <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
    11.                             用户管理
    12.                         </a>
    13.                     </h4>
    14.                 </div>
    15.                 <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
    16.                     <div class="panel-body">
    17.                       <!--嵌套列表组-->
    18.                         <ul class="list-group">
    19.                             <li class="list-group-item"><a href="">用户列表</a></li>
    20.                             <li class="list-group-item"><a href="">添加用户</a></li>
    21.  
    22.                         </ul>
    23.                     </div>
    24.                 </div>
    25.             </div>
    26.  
    27.             <!--面板-->
    28.             <div class="panel panel-default">
    29.                 <div class="panel-heading" role="tab" id="empTitle">
    30.                     <h4 class="panel-title">
    31.                         <a role="button" data-toggle="collapse" data-parent="#accordion" href="#empContent" aria-expanded="true" aria-controls="collapseOne">
    32.                             员工管理
    33.                         </a>
    34.                     </h4>
    35.                 </div>
    36.                 <div id="empContent" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
    37.                     <div class="panel-body">
    38.                         <!--嵌套列表组-->
    39.                         <ul class="list-group">
    40.                             <li class="list-group-item"><a href="">员工列表</a></li>
    41.                             <li class="list-group-item"><a href="">添加员工</a></li>
    42.  
    43.                         </ul>
    44.                     </div>
    45.                 </div>
    46.             </div>
    47.         </div>
    48.     </div>

     

     带上 in默认展开的：去掉in

     在10分的中心内容做一个标签页：

     修改代码：

    1.  <!--中心内容-->
    2.     <div class="col-sm-10">
    3.         <!--标签页-->
    4.         <div>
    5.             <!-- Nav tabs -->
    6.             <ul class="nav nav-tabs" role="tablist">
    7.                 <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">用户列表</a></li>
    8.                 <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">添加用户</a></li>
    9.             </ul>
    10.  
    11.             <!-- Tab panes -->
    12.             <div class="tab-content">
    13.                 <div role="tabpanel" class="tab-pane active" id="home">
    14.                     <!--栅格布局-->
    15.                     <!--用户表格-->
    16.                     <div class="row" style="margin-top: 70px">
    17.                         <div class="col-sm-10 col-sm-offset-1">
    18.                             <table class="table table-bordered table-hover table-striped">
    19.                                 <tr>
    20.                                     <th>编号</th>
    21.                                     <th>姓名</th>
    22.                                     <th>年龄</th>
    23.                                     <th>生日</th>
    24.                                     <th>工资</th>
    25.                                     <th>操作</th>
    26.                                 </tr>
    27.                                 <tr>
    28.                                     <td>21</td>
    29.                                     <td>张三</td>
    30.                                     <td>23</td>
    31.                                     <td>2021-03-03</td>
    32.                                     <td>2100</td>
    33.                                     <td><a href="" class="btn btn-danger btn-sm">删除</a> <a href="" class="btn btn-info btn-sm">修改</a></td>
    34.                                 </tr>
    35.                                 <tr>
    36.                                     <td>21</td>
    37.                                     <td>李四</td>
    38.                                     <td>23</td>
    39.                                     <td>2022-03-03</td>
    40.                                     <td>3100</td>
    41.                                     <td><a href="" class="btn btn-danger btn-sm">删除</a> <a href="" class="btn btn-info btn-sm">修改</a></td>
    42.                                 </tr>
    43.                                 <tr>
    44.                                     <td>21</td>
    45.                                     <td>王五</td>
    46.                                     <td>23</td>
    47.                                     <td>2023-03-03</td>
    48.                                     <td>4100</td>
    49.                                     <td><a href="" class="btn btn-danger btn-sm">删除</a> <a href="" class="btn btn-info btn-sm">修改</a></td>
    50.                                 </tr>
    51.                             </table>
    52.                             <ul class="list-unstyled">
    53.                                 <li><button class="btn btn-success btn-sm">添加用户信息</button></li>
    54.                             </ul>
    55.                         </div>
    56.                     </div>
    57.  
    58.                 </div>
    59.                 <div role="tabpanel" class="tab-pane" id="profile">...</div>
    60.             </div>
    61.  
    62.         </div>
    63.     </div>

     

     

    在中心内容添加分页：

    1.   <!--中心内容-->
    2.     <div class="col-sm-10">
    3.         <!--标签页-->
    4.         <div>
    5.             <!-- Nav tabs -->
    6.             <ul class="nav nav-tabs" role="tablist">
    7.                 <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">用户列表</a></li>
    8.                 <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">添加用户</a></li>
    9.             </ul>
    10.  
    11.             <!-- Tab panes -->
    12.             <div class="tab-content">
    13.  
    14.                 <div role="tabpanel" class="tab-pane active" id="home">
    15.                     <!--栅格布局-->
    16.                     <!--用户表格-->
    17.                     <div class="row" style="margin-top: 70px">
    18.                         <div class="col-sm-10 col-sm-offset-1">
    19.                             <table class="table table-bordered table-hover table-striped">
    20.                                 <tr>
    21.                                     <th>编号</th>
    22.                                     <th>姓名</th>
    23.                                     <th>年龄</th>
    24.                                     <th>生日</th>
    25.                                     <th>工资</th>
    26.                                     <th>操作</th>
    27.                                 </tr>
    28.                                 <tr>
    29.                                     <td>21</td>
    30.                                     <td>张三</td>
    31.                                     <td>23</td>
    32.                                     <td>2021-03-03</td>
    33.                                     <td>2100</td>
    34.                                     <td><a href="" class="btn btn-danger btn-sm">删除</a> <a href="" class="btn btn-info btn-sm">修改</a></td>
    35.                                 </tr>
    36.                                 <tr>
    37.                                     <td>21</td>
    38.                                     <td>李四</td>
    39.                                     <td>23</td>
    40.                                     <td>2022-03-03</td>
    41.                                     <td>3100</td>
    42.                                     <td><a href="" class="btn btn-danger btn-sm">删除</a> <a href="" class="btn btn-info btn-sm">修改</a></td>
    43.                                 </tr>
    44.                                 <tr>
    45.                                     <td>21</td>
    46.                                     <td>王五</td>
    47.                                     <td>23</td>
    48.                                     <td>2023-03-03</td>
    49.                                     <td>4100</td>
    50.                                     <td><a href="" class="btn btn-danger btn-sm">删除</a> <a href="" class="btn btn-info btn-sm">修改</a></td>
    51.                                 </tr>
    52.                             </table>
    53.                             <!--添加按钮-->
    54.                             <ul class="list-unstyled">
    55.                                 <li><button class="btn btn-success btn-sm">添加用户信息</button></li>
    56.                             </ul>
    57.                             <!--分页工具栏-->
    58.                             <div class="pull-right">
    59.                                 <nav aria-label="Page navigation">
    60.                                     <ul class="pagination">
    61.                                         <li class="disabled">
    62.                                             <a href="#" aria-label="Previous">
    63.                                                 <span aria-hidden="true">&laquo;</span>
    64.                                             </a>
    65.                                         </li>
    66.                                         <li class="active"><a href="#">1</a></li>
    67.                                         <li><a href="#">2</a></li>
    68.                                         <li><a href="#">3</a></li>
    69.                                         <li><a href="#">4</a></li>
    70.                                         <li><a href="#">5</a></li>
    71.                                         <li>
    72.                                             <a href="#" aria-label="Next">
    73.                                                 <span aria-hidden="true">&raquo;</span>
    74.                                             </a>
    75.                                         </li>
    76.                                     </ul>
    77.                                 </nav>
    78.                             </div>
    79.                         </div>
    80.                     </div>
    81.  
    82.                 </div>
    83.  
    84.                 <div role="tabpanel" class="tab-pane" id="profile">
    85.                     添加用户
    86.                 </div>
    87.             </div>
    88.  
    89.         </div>
    90.     </div>

     

     

     给添加按钮添加弹出的模态框：

    1. <!--添加用户模态框 在body的里面 模态框默认是不展示的需要利用js进行展示-->
    2. <div class="modal fade" id="saveUserModel" tabindex="-1" role="dialog">
    3.     <div class="modal-dialog" role="document">
    4.         <div class="modal-content">
    5.             <div class="modal-header">
    6.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    7.                 <h4 class="modal-title">保存用户信息</h4>
    8.             </div>
    9.             <div class="modal-body">
    10.                 <!--模态框内容加表单-->
    11.                 <form>
    12.                     <div class="form-group">
    13.                         <label for="exampleInputEmail1">Email address</label>
    14.                         <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    15.                     </div>
    16.                     <div class="form-group">
    17.                         <label for="exampleInputPassword1">Password</label>
    18.                         <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    19.                     </div>
    20.                     <div class="form-group">
    21.                         <label for="exampleInputFile">File input</label>
    22.                         <input type="file" id="exampleInputFile">
    23.                         <p class="help-block">Example block-level help text here.</p>
    24.                     </div>
    25.                     <div class="checkbox">
    26.                         <label>
    27.                             <input type="checkbox"> Check me out
    28.                         </label>
    29.                     </div>
    30.                 </form>
    31.             </div>
    32.             <div class="modal-footer">
    33.                 <button type="button" class="btn btn-default" data-dismiss="modal">取消添加</button>
    34.                 <button type="button" class="btn btn-primary">确认添加</button>
    35.             </div>
    36.         </div>
    37.     </div>
    38. </div>

     js：

    1.  <script>
    2.         $(function(){
    3.             $("#saveBtn").click(function(){
    4.                $("#saveUserModel").modal({
    5.                    show:true
    6.                })
    7.             });
    8.             $("#saveBtn1").click(function(){
    9.                 $("#saveUserModel").modal({
    10.                     show:true
    11.                 })
    12.             });
    13.         });
    14.     script>

    点击添加用户按钮：

     给删除按钮添加模态框：

    首先复制一份模态框：

    1. <!--修改用户模态框 在body的里面 模态框默认是不展示的需要利用js进行展示-->
    2. <div class="modal fade" id="updateUserModel" tabindex="-1" role="dialog">
    3.     <div class="modal-dialog" role="document">
    4.         <div class="modal-content">
    5.             <div class="modal-header">
    6.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    7.                 <h4 class="modal-title">编辑用户信息</h4>
    8.             </div>
    9.             <div class="modal-body">
    10.                 <!--模态框内容加表单-->
    11.                 <form>
    12.                     <div class="form-group">
    13.                         <label for="exampleInputEmail1">Email address</label>
    14.                         <input type="email" class="form-control" id="exampleInputEmail11" placeholder="Email">
    15.                     </div>
    16.                     <div class="form-group">
    17.                         <label for="exampleInputPassword1">Password</label>
    18.                         <input type="password" class="form-control" id="exampleInputPassword11" placeholder="Password">
    19.                     </div>
    20.                     <div class="form-group">
    21.                         <label for="exampleInputFile">File input</label>
    22.                         <input type="file" id="exampleInputFile1">
    23.                         <p class="help-block">Example block-level help text here.</p>
    24.                     </div>
    25.                     <div class="checkbox">
    26.                         <label>
    27.                             <input type="checkbox"> Check me out
    28.                         </label>
    29.                     </div>
    30.                 </form>
    31.             </div>
    32.             <div class="modal-footer">
    33.                 <button type="button" class="btn btn-default" data-dismiss="modal">取消添加</button>
    34.                 <button type="button" class="btn btn-primary">确认添加</button>
    35.             </div>
    36.         </div>
    37.     </div>
    38. </div>

     js显示：

    1.  $("#updateBtn").click(function(){
    2.                 $("#updateUserModel").modal({
    3.                     show:true
    4.                 })
    5.             });

     这样每个删除按钮需要加js事件来出发模态框，比较麻烦：

    可以通过

    可以添加属性不用通过js来显示模态框 ：

    这样只要给删除按钮添加属性就可以显示模态框：

     

    点击修改：

     

     

  • 相关阅读:
    Rust中的宏：声明宏和过程宏
    Day21力扣打卡
    动规算法-地下城游戏
    【云原生--Kubernetes】kubectl命令详解
    c++无条件转移语句goto的介绍
    使用uniapp写小程序，真机调试的时候不显示log
    爬取任意百度贴吧评论（可直接Copy）
    解析器模式（Parser Pattern）
    企业园区办公室无线覆盖部署案例
    C++ Reference: Standard C++ Library reference: C Library: cwctype: iswcntrl
  • 原文地址：https://blog.csdn.net/dengfengling999/article/details/128155578