本文介绍了如何使用Bootstrap创建一个后台管理系统经典的上-下（左-右）布局。包括导航栏、左侧菜单栏（采用折叠式）和右侧主要内容区域。布局中包含商品管理、用户管理和订单管理等模块，以及用户列表展示和分页功能。
注意：必须到官网下载相应的css，js，图标文件才能正常显示其效果 Bootstrap中文网 (bootcss.com)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="node_modules/bootstrap-icons/font/bootstrap-icons.css">
<script src="./js/bootstrap.bundle.js"></script>
<title>后台管理</title>
<style>
.box{
margin-top: 56px;
}
</style>
</head>
<body>
<!-- 导航 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">后台管理</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">栏目</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">内容</a>
</li>
<li class="nav-item">
<a class="nav-link" href&
最低0.47元/天 解锁文章
扫一扫
1689
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
