Bootstrap4+MySQL前后端综合实训-Day03-AM【折叠、模态框】

本是古典 何须时尚 2022-12-22 06:22 91阅读 0赞

【Bootstrap4前端框架+MySQL数据库】前后端综合实训【10天课程 博客汇总表 详细笔记】

目 录

折叠

菜鸟教程——Bootstrap——折叠

模态框

菜鸟教程——Bootstrap——模态框

折叠

菜鸟教程——Bootstrap——折叠

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <!-- 新 Bootstrap4 核心 CSS 文件 -->
  7.         <link rel="stylesheet" href="bootstrap4/css/bootstrap.min.css">
  8.         <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css" />
  9.         <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  10.         <script src="jquery/jquery.min.js"></script>
  11.         <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
  12.         <script src="js/popper.min.js"></script>
  13.         <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
  14.         <script src="bootstrap4/js/bootstrap.min.js"></script>
  15.         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  16.         <title>手风琴特效</title>
  17.         <style type="text/css">
  18.             .second-nav>li {
  19.                 padding-left: 50px;
  20.             }
  21.         </style>
  22.     </head>
  23.     <body>
  25.         <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">简单的折叠</button>
  26.         <div id="demo" class="collapse">
  27.             Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  28.             sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  29.             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  30.         </div>
  32.         <ul class="list-group first-nav">
  33.             <li class="list-group-item bg-danger" data-toggle="collapse" data-target="#demo1">First item</li>
  34.             <ul class="list-group second-nav collapse" id="demo1">
  35.                 <li class="list-group-item bg-info">First item</li>
  36.                 <li class="list-group-item bg-info">Second item</li>
  37.                 <li class="list-group-item bg-info">Third item</li>
  38.             </ul>
  39.             <li class="list-group-item bg-danger">Second item</li>
  40.             <li class="list-group-item bg-danger" data-toggle="collapse" data-target="#demo2">Third item</li>
  41.             <ul class="list-group second-nav collapse" id="demo2">
  42.                 <li class="list-group-item bg-info">First item</li>
  43.                 <li class="list-group-item bg-info">Second item</li>
  44.                 <li class="list-group-item bg-info">Third item</li>
  45.             </ul>
  46.         </ul>
  47.     </body>
  48. </html>

模态框

菜鸟教程——Bootstrap——模态框

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2 20201118112930906.png

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3 20201118112803803.png 

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <!-- 新 Bootstrap4 核心 CSS 文件 -->
  7.         <link rel="stylesheet" href="bootstrap4/css/bootstrap.min.css">
  8.         <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css" />
  9.         <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  10.         <script src="jquery/jquery.min.js"></script>
  11.         <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
  12.         <script src="js/popper.min.js"></script>
  13.         <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
  14.         <script src="bootstrap4/js/bootstrap.min.js"></script>
  15.         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  16.         <title>bootstrap入门</title>
  17.         <style type="text/css">
  18.         </style>
  19.     </head>
  20.     <body>
  21.         <button class="btn btn-warning" data-toggle="modal" data-target="#editUser">显示模态框</button>
  22.         <!-- 模态框 -->
  23.         <div class="modal fade" id="editUser">
  24.             <div class="modal-dialog">
  25.                 <div class="modal-content">
  27.                     <!-- 模态框头部 -->
  28.                     <div class="modal-header bg-info">
  29.                         <h4 class="modal-title">编辑学生</h4>
  30.                     </div>
  32.                     <!-- 模态框主体 -->
  33.                     <div class="modal-body">
  34.                         111
  35.                     </div>
  37.                     <!-- 模态框底部 -->
  38.                     <div class="modal-footer">
  39.                         <button type="button" class="btn btn-info" data-dismiss="modal">确定</button>
  40.                         <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
  41.                     </div>
  43.                 </div>
  44.             </div>
  45.         </div>
  46.     </body>
  47. </html>

今天上午，老师没讲课——让做昨天布置的两个页面。

发表评论

表情：
评论列表 （有 0 条评论，91人围观）

还没有评论，来说两句吧...

相关阅读