您想从现成的元素创建网站吗？Bootstrap是最流行的CSS框架之一。它允许我们从现成的组件（如导航栏或窗体）构建漂亮的 UI。Bootstrap 还提供响应式设计，因此，在正确使用网格的同时，您不必为移动视图执行额外的样式设置。
对于高级开发人员来说，CSS 框架似乎很简单，因为它主要是阅读文档，但初学者有时可能会在从 Bootstrap 组件构建项目时遇到问题。这就是为什么我决定创建本教程并构建一个简单的仪表板，并附有分步说明。
在本文中，我将创建一个带有导航栏、侧菜单、一些卡片和表格的响应式仪表板。我将使用Bootstrap，没有任何额外的插件。在本教程中，我将完成以下步骤：
- 创建初学者模板
- 创建导航栏
- 自定义样式
- 创建侧边菜单
- 创建表
- 创建卡片
让我们开始吧！
- 创建入门模板
一开始，我们必须创建一个简单的HTML文件来启动我们的项目。我将调用我的仪表板.html。
在文件中，我不打算创建基本结构。我将使用添加了所有 CDN 链接的引导程序启动器模板。如果您想从引导页面获取它，请使用搜索表单并键入”入门模板”。让我们从下面的代码开始：
Hello, world!
Hello, world!
接下来，如果您将在浏览器中运行该文件，您可以看到 Hello world 标头！现在，让我们创建第一个组件，即导航栏。
- 创建导航栏
在设置容器和网格之前，我将添加一个导航栏，该导航栏将采用窗口的整个宽度。为此，如果您希望看到所有导航栏组件在 Bootstrap 网站上搜索它，我将使用导航栏组件。
我将使用以下代码。
你可能意识到我添加了一些额外的类，如 bg-primary 或 fixed-top。它们将作为粘性标题和蓝色的结果给出。
我的导航栏中将包含三个元素：项目名称、搜索栏和注销链接。让我们添加它们。
Duomly Dashboard
Logout
在搜索栏中，我添加了一个自定义类，因为我想稍微设置元素的样式，但我将在下一步中执行此操作。
- 自定义样式
要为引导元素添加自定义样式，我需要一个 CSS 文件，所以让我们创建一个。我将调用我的文件仪表板.css以与项目保持一致。要使此文件在 HTML 结构中可读，您必须在文档头部的引导链接下方添加一个链接。
现在，您可以在新CSS文件中的搜索栏中添加一些样式。
.form-control-primary {
margin: 10px;
opacity: 0.2;
border-radius: 2px;
}
太好了，第一个元素已经准备好了;我们可以看到它现在的样子。
- 创建侧边菜单
我想每个人都知道大多数仪表板是什么样子的，它们通常有一个侧边菜单，这就是我们现在要做的。但首先，让我们添加容器。
如果容器准备好了，我们需要腾出一些空间来构建侧边栏，因为 Bootstrap 没有提供现成的侧边栏。但不用担心，在我们的例子中，这只是设置列样式并添加菜单的问题。让我们先在行 div 中使用以下代码为侧边栏创建一个空格。
是时候在我们的侧边菜单中添加一些真正的菜单了。让我们看一下您应该使用的 Bootstrap 网站上的垂直导航。除了纯菜单，我还在每个菜单项中使用了图标。图标将添加为 SVG。
Candidates
Jobs
Orders
Invoices
Reports
太好了，现在我们需要添加一些样式。
.sidebar {
position: fixed;
left: 0;
bottom: 0;
top: 0;
z-index: 100;
padding: 70px 0 0 10px;
border-right: 1px solid #d3d3d3;
}
.left-sidebar {
position: sticky;
top:0;
height: calc(100vh - 70px)
}
.sidebar-nav li .nav-link {
color: #333;
font-weight: 500;
}
现在，我们可以检查结果了！
- 创建表节
在此步骤中，我们将在仪表板中创建主空间，并向该部分添加一个响应式表格。
为了创建主要部分，我们将在侧菜单后使用以下代码。
太好了，现在我们可以添加标题和表格了。我选择了一个深色表并添加了一些假数据。此外，为了使它愉快，我在标题和表格之间添加了一个分隔线。让我们创建它。
Candidates
#
First
Last
Position
1
Mark
Otto
Project Manager
2
Jacob
Thornton
JS developer
3
Larry
Bird
Back-end developer
4
Martin
Smith
Back-end developer
5
Kate
Mayers
Scrum master
可能现在你看到它有点坏了，我这里有一个解决方案，作为一小段 CSS 代码。
main {
padding-top: 90px;
}
- 创建卡片部分
现在，让我们添加另一个部分，其中包含几张代表发票的卡片。让我们添加另一个标题和分隔符以保持一致。
Invoice
完成后，让我们使用两张卡片，每张卡片为半列，我将使用它两次。
Invoice #184382
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Print
Invoice #184386
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Print
Invoice #184389
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Print
Invoice #184391
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Print
要使其看起来漂亮，必须做的最后一件事是为行添加一点边距。让我们去做吧。
main .card {
margin-bottom: 20px;
}
呜呼。它准备好了。让我们检查一下结果。另外，请随时检查响应能力。
结论
在本教程中，您可以学习如何使用 Bootstrap 构建一个简单的仪表板，而无需使用其他样式。使用 CSS 框架是在短时间内制作完全响应的简单布局的好方法。
凭借大量的现成组件和基于弹性框的网格，Bootstrap 是一个方便的工具。初学者可以非常快速地完成更高级的事情，但对于不想花费很长时间为每个项目构建可重用 CSS 基础的高级开发人员也是如此。
Original: https://blog.csdn.net/allway2/article/details/127816343
Author: allway2
Title: 如何使用 Bootstrap 创建一个简单的仪表板
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/652817/
转载文章受原作者版权保护。转载请注明原作者出处！