<!DOCTYPE html>
<html lang="en" backgound="">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="../public/plugins/bootstrap-5.1.3/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../public/plugins/bootstrap-icons-1.9.1/bootstrap-icons.css" rel="stylesheet" />
    <link rel="stylesheet" href="../public/plugins/fontawesome-free/css/all.min.css" />
    <style>
      :root {
        --bg-tech: #2a5398;
        --bg-tech-light: #4367a4;
        --bg-tech-lighter: #6989bf;
        --bg-tech-dark: #173d7e;
        --bd-tech: #7b94c1;
        --bg-tech-alert: #5682ce;
      }

      .bg-tech {
        background-color: var(--bg-tech) !important;
      }
      .bg-tech-light {
        background-color: var(--bg-tech-light) !important;
      }
      .bg-tech-lighter {
        background-color: var(--bg-tech-lighter) !important;
      }
      .bg-tech-dark {
        background-color: var(--bg-tech-dark);
      }

      .nav .nav-link.active {
        background-color: var(--bg-tech-dark);
        border-radius: 0;
      }

      .bg-tech-btn {
        background-color: var(--bg-tech-lighter) !important;
      }

      form.input-bg-tech input,
      form.input-bg-tech select,
      form.input-bg-tech textarea,
      form.input-bg-tech button,
      form.input-bg-tech .input-group .input-group-text {
        background-color: inherit !important;
        border-color: var(--bd-tech) !important;
        color: white !important;
        outline: none !important;
      }

      form.input-bg-tech select {
        background-image: linear-gradient(45deg, transparent 50%, white 50%), linear-gradient(135deg, white 50%, transparent 50%);
        background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 0.5em) 0.5em;
        background-size: 5px 5px, 5px 5px, 1.5em 1.5em;
        background-repeat: no-repeat;
      }

      form.input-bg-tech select option {
        background-color: white !important;
        color: black !important;
      }

      .nav img {
        height: 20px;
      }

      .brand-logo {
        width: 230px;
        height: 40px;
        line-height: 43px;
      }
      .bi {
        width: 2rem;
        line-height: 0;
        color: white;
      }
    </style>
  </head>

  <body class="bg-tech text-white">
    <!-- topbar ------------------------------------- -->
    <header class="bg-tech d-flex flex-row justify-content-between align-items-center text-white shadow-lg">
      <div class="brand-logo d-flex justify-content-around align-items-center">
        <i class="bi bi-activity"></i>
      </div>
      <p class="h5 d-none d-md-block ms-3">text1text</p>
      <div class="dropdown me-3">
        <a style="background-color: #2a5398" class="btn btn-sm dropdown-toggle text-white" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">admin</a>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
          <li><a class="dropdown-item" href="#">logout</a></li>
          <li><a class="dropdown-item" href="#">text2</a></li>
        </ul>
      </div>
    </header>

    <header class="bg-tech text-white bg-tech-light shadow-bg">
      <ul class="nav nav-pills flex-row justify-content-around flex-nowrap align-items-center">
        <li class="nav-items">
          <a class="nav-link active d-flex flex-row flex-nowrap align-items-center text-white" href="home.html" target="content">
            <img src="../public/images/alarm_over_shadow1.png" />
            <span class="d-none d-md-inline-block">home</span>
          </a>
        </li>
        <li class="nav-items">
          <a class="nav-link d-flex flex-row flex-nowrap align-items-center text-white" href="history.html" target="content">
            <img src="../public/images/alarm_over_shadow1.png" />
            <span class="d-none d-md-inline-block">page</span>
          </a>
        </li>
        <li class="nav-items">
          <a class="nav-link d-flex flex-row flex-nowrap align-items-center text-white" href="kanban.html" target="content">
            <img src="../public/images/alarm_over_shadow1.png" />
            <span class="d-none d-md-inline-block">swiper</span>
          </a>
        </li>
        <li class="nav-items">
          <a class="nav-link d-flex flex-row flex-nowrap align-items-center text-white" href="alert.html" target="content">
            <img src="../public/images/alarm_over_shadow1.png" />
            <span class="d-none d-md-inline-block">alert</span>
          </a>
        </li>
        <li class="nav-items">
          <a class="nav-link d-flex flex-row flex-nowrap align-items-center text-white" href="color.html" target="content">
            <img src="../public/images/alarm_over_shadow1.png" />
            <span class="d-none d-md-inline-block">color</span>
          </a>
        </li>
        <li class="nav-items">
          <a class="nav-link d-flex flex-row flex-nowrap align-items-center text-white" href="#" target="content">
            <img src="../public/images/alarm_over_shadow1.png" />
            <span class="d-none d-md-inline-block">menu</span>
          </a>
        </li>
        <li class="nav-items">
          <a class="nav-link d-flex flex-row flex-nowrap align-items-center text-white" href="#" target="content">
            <img src="../public/images/alarm_over_shadow1.png" />
            <span class="d-none d-md-inline-block">menu</span>
          </a>
        </li>
      </ul>
    </header>
    <!-- topbar ------------------------------------- -->

    <div class="container-fluid">
      <!-- content ------------------------------------- -->
      <div class="card bg-tech-light shadow-lg mt-3 text-white">
        <div class="card-header d-flex justify-content-between">
          <div class="d-flex justify-content-center align-items-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-funnel-fill" viewBox="0 0 16 16">
              <path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z" />
            </svg>
            <span>条件筛选</span>
          </div>
          <button type="button" class="bg-tech-light" style="border: none" data-card-toggle="collapse">
            <i class="bi bi-dash"></i>
          </button>
        </div>
        <div class="card-body collapse show" id="collapseOne">
          <form class="row g-3 input-bg-tech">
            <div class="col-12 col-lg-3">
              <div class="input-group" id="dateRange">
                <span class="input-group-text" id="basic-addon1">起止日期</span>
                <input type="text" required class="form-control" id="startDate" placeholder="startDate" aria-label="Recipient's username" aria-describedby="basic-addon1" />
                <input type="text" required class="form-control" id="endDate" placeholder="endDate" aria-label="Recipient's username" aria-describedby="basic-addon1" />
              </div>
            </div>
            <div class="col-6 col-lg-2">
              <div class="input-group">
                <span class="input-group-text" id="basic-addon1">日期</span>
                <input type="text" required class="form-control" id="chooseDate1" placeholder="chooseDate" aria-label="Recipient's username" aria-describedby="basic-addon1" />
              </div>
            </div>
            <div class="col-auto">
              <div class="input-group">
                <span class="input-group-text" id="basic-addon1">tex12</span>
                <select class="form-select" required>
                  <option selected value="">---</option>
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                </select>
              </div>
            </div>
            <div class="col-auto">
              <div class="input-group">
                <span class="input-group-text" id="basic-addon1">tex13</span>
                <select class="form-select" required>
                  <option selected value="">---</option>
                  <option>all</option>
                  <option>day</option>
                  <option>night</option>
                </select>
              </div>
            </div>
            <div class="col-6 col-lg-2">
              <div class="input-group">
                <span class="input-group-text" id="basic-addon1">日期</span>
                <input type="text" required class="form-control" id="chooseDate2" placeholder="chooseDate" aria-label="Recipient's username" aria-describedby="basic-addon1" />
              </div>
            </div>
            <div class="col-auto">
              <div class="input-group">
                <span class="input-group-text" id="basic-addon1">tex12</span>
                <select class="form-select" required>
                  <option selected value="">---</option>
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                </select>
              </div>
            </div>
            <div class="col-auto">
              <div class="input-group">
                <span class="input-group-text" id="basic-addon1">tex13</span>
                <select class="form-select" required>
                  <option selected value="">---</option>
                  <option>all</option>
                  <option>day</option>
                  <option>night</option>
                </select>
              </div>
            </div>
            <div class="col-auto">
              <button class="btn bg-tech-btn" type="submit">Submit</button>
            </div>
          </form>
        </div>
      </div>

      <div class="row mt-2">
        <div class="col-9">
          <div class="card bg-tech-light shadow-lg"><div id="main" style="height: 500px"></div></div>
        </div>
        <div class="col-3">
          <div class="card bg-tech-light shadow-lg pt-2 px-4 d-flex flex-column">
            <button class="btn bg-tech-btn align-self-end text-white" type="button">Export</button>
            <div class="py-2">
              <table class="table table-bordered text-white">
                <thead>
                  <tr class="text-center">
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                  </tr>
                  <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                  </tr>
                  <tr>
                    <th scope="row">3</th>
                    <td colspan="2">Larry the Bird</td>
                    <td>@twitter</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="../public/plugins/bootstrap-5.1.3/js/bootstrap.bundle.js"></script>
</html>

 

原文地址：http://www.cnblogs.com/caroline2016/p/16905490.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性