发布时间：2024-06-06 17:47:07 发布者：文昌文城莱奥网络技术工作室 浏览次数：290
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Admin Dashboard</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<style>
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.wrapper {
display: flex;
flex: 1;
}
#sidebar {
width: 250px;
transition: all 0.3s;
}
#sidebar.collapsed {
width: 80px;
}
#content {
flex: 1;
padding: 20px;
}
footer {
background: #f8f9fa;
padding: 10px;
text-align: center;
}
.sidebar-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.sidebar-header h3 {
margin: 0;
}
.collapsed .sidebar-header h3,
.collapsed .components li a {
display: none;
}
.collapsed .sidebar-header {
justify-content: center;
}
.collapsed .components {
text-align: center;
}
</style>
</head>
<body>
<!-- Header -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Admin Dashboard</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Wrapper -->
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar" class="bg-dark">
<div class="sidebar-header p-3">
<h3 class="text-white">Sidebar</h3>
<button id="sidebarCollapse" class="btn btn-primary">点击收缩</button>
</div>
<ul class="list-unstyled components">
<li class="active">
<a href="#" class="text-white">Dashboard</a>
</li>
<li>
<a href="#" class="text-white">Orders</a>
</li>
<li>
<a href="#" class="text-white">Products</a>
</li>
<li>
<a href="#" class="text-white">Customers</a>
</li>
<li>
<a href="#" class="text-white">Reports</a>
</li>
</ul>
</nav>
<!-- Page Content -->
<div id="content">
<h2>Main Content Area</h2>
<p>This is where the main content goes.</p>
</div>
</div>
<!-- Footer -->
<footer class="bg-light">
<p>© 2024 Admin Dashboard</p>
</footer>
<!-- Bootstrap JS and dependencies -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('collapsed');
if ($('#sidebar').hasClass('collapsed')) {
$('#sidebarCollapse').text('点击展开');
} else {
$('#sidebarCollapse').text('点击收缩');
}
});
});
</script>
</body>
</html>