<!doctype html>
<html lang="zh-CN">
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css"/>

    <title>{% block title %}default{% endblock %}</title>
    <style>
        body {
            -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
        }

        @media print {
            a[href]:after {
                content: none !important;
            }
        }
    </style>
</head>
  <body>
  <div class="content-wrapper">
      <section class="content-header">
          {% block content-header %}<h1>页面头部 <small> 页面描述</small></h1>{% endblock %}
      </section>
      <section class="content">
          {% if messages %}
              {% for message in messages %}
                  <div style="padding:10px; margin-bottom:15px;"
                       class="alert alert-{% if message.tags %}{{ message.tags }}{% endif %} no-print">
                      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                      <b>{{ message }}</b>
                  </div>
              {% endfor %}
          {% endif %}
          {% block main-content %}{% endblock %}
          <div class="modal fade" id="modal-lg" role="dialog" aria-labelledby="modal-lg" aria-hidden="true"
               tabindex="-1">
              <div class="modal-dialog modal-lg">
                  <div class="modal-content">
                      <!-- link to object detail -->
                  </div>
              </div>
          </div>
          <div class="modal fade" id="modal-lg-static" tabindex="-1" role="dialog" data-keyboard="false"
               data-backdrop="static" aria-labelledby="modal-lg-static" aria-hidden="true" style="z-index: 1060;">
              <div class="modal-dialog modal-lg">
                  <div class="modal-content">
                      <!-- link to object detail -->
                  </div>
              </div>
          </div>
          <div class="modal fade" id="modal-static" tabindex="-1" role="dialog" data-keyboard="false"
               data-backdrop="static" aria-labelledby="modal-static" aria-hidden="true" style="z-index: 1060;">
              <div class="modal-dialog">
                  <div class="modal-content">
                      <!-- link to object detail -->
                  </div>
              </div>
          </div>
      </section>
  </div>

    <!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->

    <!-- 选项 1：包含 Popper 的 Bootstrap 集成包 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.min.js"></script>
    <!-- 选项 2：Popper 和 Bootstrap 的 JS 插件各自独立 -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.2/dist/umd/popper.min.js" integrity="sha384-q9CRHqZndzlxGLOj+xrdLDJa9ittGte1NksRmgJKeCV9DrM7Kz868XYqsKWPpAmn" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-YSu1vEueMOXZYSSiTgjRD6egOBAdWrKI6AQBdHjTtvftX42GZLCVzwlxm0RJuipa" crossorigin="anonymous"></script>
    -->
  {% block extra-js %}{% endblock %}
  </body>
</html>