<!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>
标签：bg,自定义,--,bootstrap,color,tech,background,导航条,input From： https://www.cnblogs.com/caroline2016/p/16905490.html