在今天的教程中，我想向你们展示如何使用 Bootstrap 5 创建一个非常简单的管理仪表板界面。如果您想在构建之前查看它，这是一个在线演示。您将创建以下部分：
- 带有用户设置的导航栏;
- 带有导航项目的侧边栏;
- 显示当前页面的标题、标语和痕迹导航的部分;
- 带有几个小部件卡片的主要内容区域;
- 最后但并非最不重要的是页脚。
开始
在开始构建接口之前，您需要包含以下样式表和脚本。为简单起见，你将使用 CDN 链接拉入所有依赖项。
首先，您应该使用以下基本标记创建一个 index.html 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Simple Admin Dashboard</title>
<!-- insert stylesheets here -->
</head>
<body>
<h1>Hello world!</h1>
<!-- insert scripts here -->
</body>
</html>
将以下样式表复制粘贴到您的<head>标记中：
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
在关闭 </body>标记之前包含 Popper.js 和 Bootstrap 脚本文件：
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
伟大！现在，您的项目中已包含 Bootstrap 5，您可以开始构建管理仪表板界面。
带有用户设置的导航栏
本节将包含三个主要部分：
- 公司标志
- 搜索栏
- 用户设置
首先，您需要在<body>标签开始后立即创建<nav>项目。使用以下标记：
<nav class="navbar navbar-light bg-light p-3">
<div class="d-flex col-12 col-md-3 col-lg-2 mb-2 mb-lg-0 flex-wrap flex-md-nowrap justify-content-between">
<a class="navbar-brand" href="#">
Simple Dashboard
</a>
<button class="navbar-toggler d-md-none collapsed mb-3" type="button" data-toggle="collapse" data-target="#sidebar" aria-controls="sidebar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="col-12 col-md-4 col-lg-2">
<input class="form-control form-control-dark" type="text" placeholder="Search" aria-label="Search">
</div>
<div class="col-12 col-md-5 col-lg-8 d-flex align-items-center justify-content-md-end mt-3 mt-md-0">
<div class="mr-3 mt-1">
<a class="github-button" href="https://github.com/themesberg/simple-bootstrap-5-dashboard" data-color-scheme="no-preference: dark; light: light; dark: light;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star /themesberg/simple-bootstrap-5-dashboard">Star</a>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
Hello, John Doe
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Messages</a></li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
</div>
</nav>此代码将创建一个导航栏，该导航栏将跨越视区的整个宽度。它目前具有公司标题/徽标、搜索栏、用户设置下拉列表和汉堡包图标，移动设备将出现该图标以切换侧边栏链接。
创建包含导航项目的边栏
主导航部分将添加到侧边栏中，并且可以使用移动设备上的汉堡菜单进行切换。但在创建侧边栏之前，您需要使用流体容器设置主内容布局。
在导航后添加以下标记以定义仪表板的布局：
<div class="container-fluid">
<div class="row">
<nav id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<!-- sidebar content goes in here -->
</nav>
<main class="col-md-9 ml-sm-auto col-lg-10 px-md-4 py-4">
<h1 class="h2">Dashboard</h1>
</main>
</div>
</div>现在您已经有了响应式仪表板布局，您可以开始构建侧边栏部分。在<nav>标记中添加以下标记：
<div class="position-sticky pt-md-5">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
<span class="ml-2">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
<span class="ml-2">Orders</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
<span class="ml-2">Products</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
<span class="ml-2">Customers</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart-2"><line x1="18" y1="20" x2="18" y2="10"></line><line x1="12" y1="20" x2="12" y2="4"></line><line x1="6" y1="20" x2="6" y2="14"></line></svg>
<span class="ml-2">Reports</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
<span class="ml-2">Integrations</span>
</a>
</li>
</ul>
</div>
之后，创建自定义样式表文件或在 Bootstrap 样式表之后创建 <style>标记，并为侧边栏添加以下样式：
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 100;
padding: 90px 0 0;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
z-index: 99;
}
@media (max-width: 767.98px) {
.sidebar {
top: 11.5rem;
padding: 0;
}
}
.navbar {
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1);
}
@media (min-width: 767.98px) {
.navbar {
top: 0;
position: sticky;
z-index: 999;
}
}
.sidebar .nav-link {
color: #333;
}
.sidebar .nav-link.active {
color: #0d6efd;
}
这些样式将使侧边栏在向下滚动时保持固定，并使其占据视口的整个高度。它还使活动导航项以更突出的颜色突出显示。
干得好！现在，您已准备好仪表板的主要部分：导航栏、侧边栏和主要内容区域。让我们继续向主内容区域添加更多小部件。
标题、标语和痕迹导航部分
仪表板中的每个页面都应具有标题、说明和痕迹导航，以指示页面的位置。只需在<main>标记的开头添加以下标记：
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Overview</li>
</ol>
</nav>
<h1 class="h2">Dashboard</h1>
<p>This is the homepage of a simple admin interface which is part of a tutorial written on Themesberg</p>
很简单，对吧？这是让用户在仪表板上的页面之间导航时很好地了解他们所处的位置的好方法。
带有几个小部件卡片的主要内容区域
从这一点来看，这真的取决于你以及你想向用户展示什么。图表、统计数据、待办事项、提醒。通常，高质量的仪表板界面使用称为小部件的构建块来组织各种指标。让我们从创建这样一个元素开始：
<div class="card">
<h5 class="card-header">Customers</h5>
<div class="card-body">
<h5 class="card-title">345k</h5>
<p class="card-text">Feb 1 - Apr 1, United States</p>
<p class="card-text text-success">18.2% increase since last month</p>
</div>
</div>
让我们继续在标题下添加其中的四个：
<div class="row my-4">
<div class="col-12 col-md-6 col-lg-3 mb-4 mb-lg-0">
<div class="card">
<h5 class="card-header">Customers</h5>
<div class="card-body">
<h5 class="card-title">345k</h5>
<p class="card-text">Feb 1 - Apr 1, United States</p>
<p class="card-text text-success">18.2% increase since last month</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 mb-4 mb-lg-0 col-lg-3">
<div class="card">
<h5 class="card-header">Revenue</h5>
<div class="card-body">
<h5 class="card-title">$2.4k</h5>
<p class="card-text">Feb 1 - Apr 1, United States</p>
<p class="card-text text-success">4.6% increase since last month</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 mb-4 mb-lg-0 col-lg-3">
<div class="card">
<h5 class="card-header">Purchases</h5>
<div class="card-body">
<h5 class="card-title">43</h5>
<p class="card-text">Feb 1 - Apr 1, United States</p>
<p class="card-text text-danger">2.6% decrease since last month</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 mb-4 mb-lg-0 col-lg-3">
<div class="card">
<h5 class="card-header">Traffic</h5>
<div class="card-body">
<h5 class="card-title">64k</h5>
<p class="card-text">Feb 1 - Apr 1, United States</p>
<p class="card-text text-success">2.5% increase since last month</p>
</div>
</div>
</div>
</div>
让我们继续创建另一个小部件，其中包含一个显示为您的业务进行的最新购买的表格：
<div class="row">
<div class="col-12 col-xl-8 mb-4 mb-lg-0">
<div class="card">
<h5 class="card-header">Latest transactions</h5>
<div class="card-body">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">Order</th>
<th scope="col">Product</th>
<th scope="col">Customer</th>
<th scope="col">Total</th>
<th scope="col">Date</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">17371705</th>
<td>Volt Premium Bootstrap 5 Dashboard</td>
<td>johndoe@gmail.com</td>
<td>€61.11</td>
<td>Aug 31 2020</td>
<td><a href="#" class="btn btn-sm btn-primary">View</a></td>
</tr>
<tr>
<th scope="row">17370540</th>
<td>Pixel Pro Premium Bootstrap UI Kit</td>
<td>jacob.monroe@company.com</td>
<td>$153.11</td>
<td>Aug 28 2020</td>
<td><a href="#" class="btn btn-sm btn-primary">View</a></td>
</tr>
<tr>
<th scope="row">17371705</th>
<td>Volt Premium Bootstrap 5 Dashboard</td>
<td>johndoe@gmail.com</td>
<td>€61.11</td>
<td>Aug 31 2020</td>
<td><a href="#" class="btn btn-sm btn-primary">View</a></td>
</tr>
<tr>
<th scope="row">17370540</th>
<td>Pixel Pro Premium Bootstrap UI Kit</td>
<td>jacob.monroe@company.com</td>
<td>$153.11</td>
<td>Aug 28 2020</td>
<td><a href="#" class="btn btn-sm btn-primary">View</a></td>
</tr>
<tr>
<th scope="row">17371705</th>
<td>Volt Premium Bootstrap 5 Dashboard</td>
<td>johndoe@gmail.com</td>
<td>€61.11</td>
<td>Aug 31 2020</td>
<td><a href="#" class="btn btn-sm btn-primary">View</a></td>
</tr>
<tr>
<th scope="row">17370540</th>
<td>Pixel Pro Premium Bootstrap UI Kit</td>
<td>jacob.monroe@company.com</td>
<td>$153.11</td>
<td>Aug 28 2020</td>
<td><a href="#" class="btn btn-sm btn-primary">View</a></td>
</tr>
</tbody>
</table>
</div>
<a href="#" class="btn btn-block btn-light">View all</a>
</div>
</div>
</div>
<div class="col-12 col-xl-4">
<!-- Another widget will go here -->
</div>
</div>
棒！现在，您还有一个带有表格的小部件，您可以在其中添加用户、事务等内容。
您将在本教程中创建的最后一个小部件将是具有图表的小部件。我们喜欢将图表用于我们的主题，因为它是开源的、轻量级的和响应迅速的。
要开始使用图表，您需要在<head>标记中包含以下样式表：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
然后在 <body> 的末尾包含以下脚本：
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
现在您已经包含了图表，只需在元素中添加以下标记：<div class=”col-12 col-lg-4”>
<div class="card">
<h5 class="card-header">Traffic last 6 months</h5>
<div class="card-body">
<div id="traffic-chart"></div>
</div>
</div>并创建自定义 javascript 文件或脚本标记并对其进行初始化：
new Chartist.Line('#traffic-chart', {
labels: ['January', 'Februrary', 'March', 'April', 'May', 'June'],
series: [
[23000, 25000, 19000, 34000, 56000, 64000]
]
}, {
low: 0,
showArea: true
});
棒！您已经为仪表板创建了 3 种类型的小组件，可用于指示多种类型的数据。让我们继续看仪表板的最后一部分，即页脚。
构建页脚
仪表板的页脚是显示对导航较少的页面（如隐私策略、协议条款、联系人等）的引用的好方法。在标记末尾添加以下标记：<main>
<footer class="pt-5 d-flex justify-content-between">
<span>Copyright © 2019-2020 <a href="https://themesberg.com">Themesberg</a></span>
<ul class="nav m-0">
<li class="nav-item">
<a class="nav-link text-secondary" aria-current="page" href="#">Privacy Policy</a>
</li>
<li class="nav-item">
<a class="nav-link text-secondary" href="#">Terms and conditions</a>
</li>
<li class="nav-item">
<a class="nav-link text-secondary" href="#">Contact</a>
</li>
</ul>
</footer>
祝贺！现在，您已经使用 Bootstrap 5 完成了一个简单的管理仪表板界面的构建。如果您想访问教程文件，只需克隆公共存储库并给它一颗星来传播开源之爱❤️。
扫一扫
4694
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
