初学者的Bootstrap--编码一个简单的仪表盘布局

方石剑
837 阅读8分钟

编码员们好!

本文介绍了如何利用之前文章中的理论，在Bootstrap 5中编写一个简单的单页仪表板布局。Bootstrap - 初学者教程。最终项目的源代码可以从Github下载，并用于商业项目或简单地用于电子学习活动。对于新人来说，Bootstrap 是一个领先的JS/CSS框架，用于编码响应式网站和应用程序。

Thanks for reading!

这个简单的Dashboard还提供了一个dark-mode 的切换器，位于左边的侧边栏上（来源可在GH上找到）。

Dashboard Page Bootstrap 5 - Animated Presentation

✨ 主题

  • 👉Bootstrap - 简要介绍
  • 👉How to install 和使用Bootstrap
  • 👉 编码navbar
  • 👉 编码sidebar
  • 👉 主要内容。cards,charts, 和data tables
  • 👉Dark Mode
  • 👉 链接 &Resources

✨ Bootstrap简要介绍

Bootstrap是一个流行的JS/CSS框架，用于开发响应式和移动优先的网站，它为几乎任何东西提供了基于HTML、CSS和JavaScript的设计模板，包括（但不限于）：排版、表单、按钮、导航和其他组件。

将Bootstrap添加到项目中的主要目的是将Bootstrap对颜色、大小、字体和布局的选择应用于该项目。目前，Bootstrap 5是Bootstrap的最新版本，具有新的组件、更快的样式表和更强的响应能力。

欲了解更多信息，请随时访问官方网站和文档。

Bootstrap 5 - Cover Image

✨ 如何使用Bootstrap

在一个新项目中使用Bootstrap的比较简单的方法是包括所有来自CDN（内容交付网络）的强制性资产。让我们为我们的项目创建一个新的目录，其中有一个index.html 文件，新的HTML代码将被添加到这里。

<html lang="en">
<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>Bootstrap Landing Page</title>
</head>
<body>
    <!-- Page Content here --> 
</body>
</html>

为了加快我们的开发速度，我们可以使用一个现代的编程编辑器，如VsCode 或Atom ，它带有模块和许多功能，如代码完成和突出显示。下面是VsCode 的下载链接。

VsCode Editor - Cover Page

一旦安装了VsCode ，我们就可以在工作目录（保存index.html ）中输入code . ，打开我们的项目。

✨ 编码Navbar

进入这个链接，复制第一个有搜索栏的导航栏。让我们把navbar-light和bg-light都改成dark。我们将把搜索栏改成更漂亮的东西，为此我们将使用输入组。

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
  <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
</div>

为了使用Bootstrap 5的图标，我们将使用CDN 来导入它们。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">

复制并粘贴这行代码到你的<head> 元素中。

为了使navbar 更加吸引人，我们将用一个图标来改变搜索按钮，使其布局更加美观。

Dashboard Bootstrap 5 - Navbar

为了进行这一改变，我们需要复制搜索图标代码并将其粘贴到按钮代码中。

Dashboard Bootstrap 5 Navbar - Update Button

我们将对下拉文本做同样的事情。我正在使用一个用户的图标。

 <i class="bi bi-person-square"></i>

我们也要修复下拉菜单，因为现在它已经离开了屏幕。将dropdown-menu-end 添加到dropdown-menu 类。这就解决了这个问题。

让我们通过在navbar-brand 类中添加fw-bold ，使导航栏-品牌的字体更大胆。

在这一点上，我们所拥有的只是一个简单的导航条。让我们继续前进，对侧边栏进行编码。

✨ 仪表板Sidebar

Bootstrap提供了Offcanvas ，这是一个基本的侧边栏组件，可以通过JavaScript切换，从viewport 的任何边缘出现。

这里是我们的侧边栏的代码。

<div class="offcanvas offcanvas-start side-bar" 
     data-bs-scroll="true" 
     tabindex="-1" 
     id="offcanvas" 
     aria-labelledby="offcanvas">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvas">Sample Heading</h5>
        <button type="button" 
                class="btn-close text-reset" 
                data-bs-dismiss="offcanvas" 
                aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <p>Sample Paragraph</p>
    </div>
</div>

为了与navbar ，我们需要添加一些CSS代码，如下所示。

/* sidebar width */
.side-bar
{
    width: var(--offcanvas-width);
}

/* sidebar links */
.sidebar-link
{
    display: flex;
    align-items: center;
}

.sidebar-link .right-icon
{
    display: inline-flex;
    transition: all ease 0.5s;
}

Dashboard Bootstrap 5 Sidebar - Mobile Collapse

✨Main Content

在侧边栏之后，我们将创建主元素，其类别为mt-5 pt-3 。

现在我们的主元素里面的内容与我们的侧边栏重叠了，为了解决这个问题，我们需要对它进行样式设计。在我们的css媒体标签中，为main创建一个新行。

在里面加入这段代码：margin-left: var(--offcanvas-width); 。我将使我们的导航条固定在顶部。要做到这一点，我需要在导航条类中添加固定顶部类。

Dashboard Main Content - Restyle Navbar

回到我们的index.html 文件中，让我们开始为我们的主类添加内容。添加一个container-fluid ，row 和一个col-md-12 。

Dashboard Main Content - HTML Code

页面的中心将包含三行。

  • 👉Info cards
  • 👉Charts - Powered byChart.js
  • 👉Data Tables ，带有分页信息。

让我们把所有这些容器分解开来，为每个部分编码HTML 和CSS 。

Dashboard Main Content - Content Rows.

👉 主要内容 -Cards

每个容器（cards,charts...）将有一个父行，所有的HTML代码都在这里。这里是卡片部分的基本卡片代码。

<div class="card text-white bg-primary mb-3" 
     style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example [.. truncated content ..]</p>
  </div>
</div>

当我们使用col-md-3 ，我们可以把4张卡片放在一起，因为Bootstrap有一个12列的网格。

对于一个丰富多彩的布局，我们可以通过将bg-primary 行改为danger,warning... 等等来改变卡片的颜色。下面是输出结果。

Dashboard Main Content - Cards

👉主要内容 -Charts

对于图表部分，我们将使用一个第三方的开源JS库，用来显示一个简单而多彩的柱状图。每个图表都住在一个卡片式的响应容器中，每个容器使用6个单元格。

Dashboard Main Content - Bar Charts.

为了编写这一部分的代码，这里是卡片的HTML 。

<div class="card">
      <div class="card-header">Charts</div>
          <div class="card-body">
            <canvas class="chart" width="400" height="200"></canvas>
      </div>
</div>

我们必须建立一个新的文件夹，名为js 。在它里面，创建一个名为script.js 的新文件。在这个新文件里面，应该添加以下构建图表的代码。

const charts = document.querySelectorAll(".chart");

charts.forEach(function (chart) {
  var ctx = chart.getContext("2d");
  var myChart = new Chart(ctx, {
    type: "bar",
    data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [
        {
          label: "# of Votes",
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 206, 86, 0.2)",
            "rgba(75, 192, 192, 0.2)",
            "rgba(153, 102, 255, 0.2)",
            "rgba(255, 159, 64, 0.2)",
          ],
          borderColor: [
            "rgba(255, 99, 132, 1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 206, 86, 1)",
            "rgba(75, 192, 192, 1)",
            "rgba(153, 102, 255, 1)",
            "rgba(255, 159, 64, 1)",
          ],
          borderWidth: 1,
        },
      ],
    },
    options: {
      scales: {
        y: {
          beginAtZero: true,
        },
      },
    },
  });
});

在人类语言中，上面的JavaScript片段可以识别卡片并注入数据，这些数据被Chart.js 库翻译成彩色的柱状图。

Dashboard Bar Charts - Single Card.

当然，Chart.js 应该作为运行时依赖添加到index.html 文件中（通过一个遥远的CDN）。

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.2/dist/chart.min.js"></script>

👉主要内容 -Data Tables

对于新手来说，数据表提供了使用分页布局访问大量数据的机会。一旦完成了必要的代码，我们应该有类似于这样的东西。

Dashboard Main Content - Data Tables.

为了编写这个有用的组件，我们需要一个新的row ，一个card ，和一个card header 。之后，我们将创建一个卡片体，然后是一个表格响应的div类。

进入这个链接（Bootstrap组件）并复制整个HTML部分。将整个内容粘贴在你的table-responsive 类之后。将class=”display” 改为class="table data-table" 。

👉主要内容Styling

在这一点上，我们的仪表盘页面拥有所有的元素（顶部的卡片、图表和数据表），但布局还没有优化到一个漂亮的用户体验。下面是获得更好的布局的步骤。

在图表和数据表格部分之后添加br 元素

这个动作将增加行与行之间的空间，这样用户就能更多地享受每个部分所提供的内容。

Dashboard Main Content - Added BR between lines

让我们把卡片的边框做成圆形，并给charts ，data table 新的colors 。

应该添加到style.css 文件中的CSS代码。

/* table styling */
.card,
.card-chart,
.card-table
{
    border-radius: 10px;
}

.card-chart
{
    background: rgb(240, 240, 240);
}

.chart
{
    background: rgb(230, 230, 230);
    border-radius: 5px;
}

.card-table
{
    background: rgb(240, 240, 240);
}

我们将通过给每一个偶数行着色来使我们的表格具有条纹的效果。

/* striped table effect */
tr:nth-child(even)
{
    background-color: rgb(250, 250, 250);
}

上述所有部分的完整CSS代码可以在Github上找到。

Bootstrap 5仪表盘- CSS风格。

现在，我们有了一个基本的、最小的仪表盘。添加一个黑暗模式并让用户决定颜色模式如何。

✨Coding the Dark Mode

这个功能的目的是让用户选择应用如何渲染容器：使用浅色或深色背景。为了实现这个目标，我们首先要做的是在我们的js文件夹中创建两个文件：dark-mode-switch.js 和dark-mode-switch.min.js （开源JS库）。这将使用浏览器的本地存储来处理黑暗模式和光明模式之间的切换。

Bootstrap 5 Dashboard - Dark Mode.

下一步是将黑暗模式控制切换器编码为一个小的侧边栏按钮。

<li class="my-4">
    <hr class="dropdown-divider">
</li>
<div class="custom-control custom-switch px-3">
    <label class="custom-control-label" for="darkSwitch">
    <span class="fw-bold">
        <i class="bi bi-moon me-2"></i>Dark Mode
    </span>
    </label>
    <input type="checkbox" 
            class="custom-control-input checkbox ms-auto" 
            id="darkSwitch">
</div>

还有必要的CSS代码。

/* checkbox */
input[type=checkbox]
{
    height: 0px;
    width: 0px;
    visibility: hidden;
}

label
{
    cursor: pointer;
}

当然，我们需要在index.html 文件中加入为暗色模式设置样式的CSS代码。

<link rel="stylesheet" href="css/dark-mode.css">

dark-mode.css 的全部代码相当简短，不言而喻。

[data-theme="dark"]
{
  background: rgb(65, 65, 65);
  color: #fff;
}

[data-theme="dark"] .bg-black {
  background-color: #fff !important;
}

[data-theme="dark"] .bg-dark {
  background-color: #222 !important;
}

[data-theme="dark"] .bg-light {
  background-color: #222 !important;
}

[data-theme="dark"] .bg-white {
  background-color: #000 !important;
}

在这一点上，我们现在已经基本完成了黑暗模式的设计，你所要做的就是继续为图表和表格分别设置样式。

✨ 链接和资源

谢谢你的阅读！好奇的人可以通过访问下面的资源来进一步学习。

avatar
文章
阅读
粉丝