bootstrap--模态框

╰半橙微兮° 2022-02-21 07:47 599阅读 0赞

复制即可运行.

小模态框

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
  8. <title>Bootstrap 101 Template</title>
  9. <!-- Bootstrap -->
  10. <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
  11. </head>
  12. <body>
  13. <div class="container">
  14. <!-- Small modal -->
  15. <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">小模态框</button>
  16. <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  17. <div class="modal-dialog modal-sm" role="document">
  18. <div class="modal-content">
  19. <div class="panel panel-warning">
  20. <div class="panel-heading">这里是面板头部标题</div>
  21. <div class="panel-body">这里是面板内容部分这容部分这容部分这容部分这容部分这容部分这容部分这容部分这容部分这容部分这容部分这容部分这容部分这面板内容部分</div>
  22. <div class="panel-footer">这里是面板尾部部分</div>
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. </div>
  28. <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
  29. <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
  30. <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  31. <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  32. </body>
  33. </html>

大模态框

把小模态框里面的

  1. .modal-sm

改成

  1. .modal-lg

即可

别太懒,动动你的小手,赶紧试试

发表评论

表情:
评论列表 (有 0 条评论,599人围观)

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

相关阅读

    相关 bootstrap实例

    模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 实例: 在这里我...