如何使用 Bootstrap 创建一个简单的仪表板

2023-12-25 23:30

本文主要是介绍如何使用 Bootstrap 创建一个简单的仪表板,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

您想从现成的元素创建网站吗?Bootstrap是最流行的CSS框架之一。它允许我们从现成的组件(如导航栏或窗体)构建漂亮的 UI。Bootstrap 还提供响应式设计,因此,在正确使用网格的同时,您不必为移动视图执行额外的样式设置。

对于高级开发人员来说,CSS 框架似乎很简单,因为它主要是阅读文档,但初学者有时可能会在从 Bootstrap 组件构建项目时遇到问题。这就是为什么我决定创建本教程并构建一个简单的仪表板,并附有分步说明。

在本文中,我将创建一个带有导航栏、侧菜单、一些卡片和表格的响应式仪表板。我将使用Bootstrap,没有任何额外的插件。在本教程中,我将完成以下步骤:

  1. 创建初学者模板
  2. 创建导航栏
  3. 自定义样式
  4. 创建侧边菜单
  5. 创建表
  6. 创建卡片

让我们开始吧!

1. 创建入门模板

一开始,我们必须创建一个简单的HTML文件来启动我们的项目。我将调用我的仪表板.html。

在文件中,我不打算创建基本结构。我将使用添加了所有 CDN 链接的引导程序启动器模板。如果您想从引导页面获取它,请使用搜索表单并键入“入门模板”。让我们从下面的代码开始:

<!doctype html>
<html lang="en"><head><!-- Required meta tags --><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Bootstrap CSS --><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"><title>Hello, world!</title></head><body><h1>Hello, world!</h1><!-- Optional JavaScript --><!-- jQuery first, then Popper.js, then Bootstrap JS --><script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script><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/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script></body>
</html>

接下来,如果您将在浏览器中运行该文件,您可以看到 Hello world 标头!现在,让我们创建第一个组件,即导航栏。

2. 创建导航栏

在设置容器和网格之前,我将添加一个导航栏,该导航栏将采用窗口的整个宽度。为此,如果您希望看到所有导航栏组件在 Bootstrap 网站上搜索它,我将使用导航栏组件。

我将使用以下代码。

<nav class="navbar navbar-dark fixed-top bg-primary flex-md-nowrap p-0 shadow"></nav>

你可能意识到我添加了一些额外的类,如 bg-primary 或 fixed-top。它们将作为粘性标题和蓝色的结果给出。

我的导航栏中将包含三个元素:项目名称、搜索栏和注销链接。让我们添加它们。

<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Duomly Dashboard</a>
<input type="text" class="form-control form-control-primary w-100" placeholder="Search..." >
<ul class="navbar-nav px-3"><li class="nav-item text-nowrap"><a class="nav-link" href="#">Logout</a></li>
</ul>

在搜索栏中,我添加了一个自定义类,因为我想稍微设置元素的样式,但我将在下一步中执行此操作。

3. 自定义样式

要为引导元素添加自定义样式,我需要一个 CSS 文件,所以让我们创建一个。我将调用我的文件仪表板.css以与项目保持一致。要使此文件在 HTML 结构中可读,您必须在文档头部的引导链接下方添加一个链接。

<link rel="stylesheet" href="./dashboard.css" >

现在,您可以在新CSS文件中的搜索栏中添加一些样式。

.form-control-primary {margin: 10px;opacity: 0.2;border-radius: 2px;
}

太好了,第一个元素已经准备好了;我们可以看到它现在的样子。

4. 创建侧边菜单

我想每个人都知道大多数仪表板是什么样子的,它们通常有一个侧边菜单,这就是我们现在要做的。但首先,让我们添加容器。

<div class="container-fluid"><div class="row"><!-- Sidear --></div>
</div>

如果容器准备好了,我们需要腾出一些空间来构建侧边栏,因为 Bootstrap 没有提供现成的侧边栏。但不用担心,在我们的例子中,这只是设置列样式并添加菜单的问题。让我们先在行 div 中使用以下代码为侧边栏创建一个空格。

<div class="col-md-2 bg-light d-none d-md-block sidebar"><div class="left-sidebar"></div>
</div>

是时候在我们的侧边菜单中添加一些真正的菜单了。让我们看一下您应该使用的 Bootstrap 网站上的垂直导航。除了纯菜单,我还在每个菜单项中使用了图标。图标将添加为 SVG。

<ul class="nav flex-column sidebar-nav"><li class="nav-item"><a class="nav-link active" href="#"><svg class="bi bi-chevron-right" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>Candidates</a></li><li class="nav-item"><a class="nav-link" href="#"><svg class="bi bi-chevron-right" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>Jobs</a></li><li class="nav-item"><a class="nav-link" href="#"><svg class="bi bi-chevron-right" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>Orders</a></li><li class="nav-item"><a class="nav-link" href="#"><svg class="bi bi-chevron-right" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>Invoices</a></li><li class="nav-item"><a class="nav-link" href="#"><svg class="bi bi-chevron-right" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>Reports</a></li>
</ul>

太好了,现在我们需要添加一些样式。

.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;
}

现在,我们可以检查结果了!

5. 创建表节

在此步骤中,我们将在仪表板中创建主空间,并向该部分添加一个响应式表格。
为了创建主要部分,我们将在侧菜单后使用以下代码。

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4"></main>

太好了,现在我们可以添加标题和表格了。我选择了一个深色表并添加了一些假数据。此外,为了使它愉快,我在标题和表格之间添加了一个分隔线。让我们创建它。

<h3>Candidates</h3>
<hr>
<div class="table-responsive"><table class="table table-dark"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Position</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>Project Manager</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>JS developer</td></tr><tr><th scope="row">3</th><td>Larry</td><td>Bird</td><td>Back-end developer</td></tr><tr><th scope="row">4</th><td>Martin</td><td>Smith</td><td>Back-end developer</td></tr><tr><th scope="row">5</th><td>Kate</td><td>Mayers</td><td>Scrum master</td></tr></tbody></table>
</div>

可能现在你看到它有点坏了,我这里有一个解决方案,作为一小段 CSS 代码。

main {padding-top: 90px;
}

6. 创建卡片部分

现在,让我们添加另一个部分,其中包含几张代表发票的卡片。让我们添加另一个标题和分隔符以保持一致。

<h3>Invoice</h3>
<hr>

完成后,让我们使用两张卡片,每张卡片为半列,我将使用它两次。

<div class="row"><div class="col-sm-6"><div class="card"><div class="card-body"><h5 class="card-title">Invoice #184382</h5><p class="card-text">Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p><a href="#" class="btn btn-primary">Print</a></div></div></div><div class="col-sm-6"><div class="card"><div class="card-body"><h5 class="card-title">Invoice #184386</h5><p class="card-text">Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p><a href="#" class="btn btn-primary">Print</a></div></div></div>
</div><div class="row"><div class="col-sm-6"><div class="card"><div class="card-body"><h5 class="card-title">Invoice #184389</h5><p class="card-text">Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p><a href="#" class="btn btn-primary">Print</a></div></div></div><div class="col-sm-6"><div class="card"><div class="card-body"><h5 class="card-title">Invoice #184391</h5><p class="card-text">Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p><a href="#" class="btn btn-primary">Print</a></div></div></div>
</div>

要使其看起来漂亮,必须做的最后一件事是为行添加一点边距。让我们去做吧。

main .card {margin-bottom: 20px;
}

呜呼。它准备好了。让我们检查一下结果。另外,请随时检查响应能力。

结论

在本教程中,您可以学习如何使用 Bootstrap 构建一个简单的仪表板,而无需使用其他样式。使用 CSS 框架是在短时间内制作完全响应的简单布局的好方法。

凭借大量的现成组件和基于弹性框的网格,Bootstrap 是一个方便的工具。初学者可以非常快速地完成更高级的事情,但对于不想花费很长时间为每个项目构建可重用 CSS 基础的高级开发人员也是如此。

这篇关于如何使用 Bootstrap 创建一个简单的仪表板的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/537348

相关文章

中文分词jieba库的使用与实景应用(一)

知识星球:https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义: 精确模式(默认模式): 全模式: 搜索引擎模式: paddle 模式(基于深度学习的分词模式): 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取

使用SecondaryNameNode恢复NameNode的数据

1)需求: NameNode进程挂了并且存储的数据也丢失了,如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2)故障模拟 (1)kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 (2)删除NameNode存储的数据(/opt/module/hadoop-3.1.4/data/tmp/dfs/na

Hadoop数据压缩使用介绍

一、压缩原则 (1)运算密集型的Job,少用压缩 (2)IO密集型的Job,多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1)为了支持多种压缩/解压缩算法,Hadoop引入了编码/解码器 2)要在Hadoop中启用压缩,可以配置如下参数

Makefile简明使用教程

文章目录 规则makefile文件的基本语法:加在命令前的特殊符号:.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具,常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传

csu 1446 Problem J Modified LCS (扩展欧几里得算法的简单应用)

这是一道扩展欧几里得算法的简单应用题,这题是在湖南多校训练赛中队友ac的一道题,在比赛之后请教了队友,然后自己把它a掉 这也是自己独自做扩展欧几里得算法的题目 题意:把题意转变下就变成了:求d1*x - d2*y = f2 - f1的解,很明显用exgcd来解 下面介绍一下exgcd的一些知识点:求ax + by = c的解 一、首先求ax + by = gcd(a,b)的解 这个

hdu2289(简单二分)

虽说是简单二分,但是我还是wa死了  题意:已知圆台的体积,求高度 首先要知道圆台体积怎么求:设上下底的半径分别为r1,r2,高为h,V = PI*(r1*r1+r1*r2+r2*r2)*h/3 然后以h进行二分 代码如下: #include<iostream>#include<algorithm>#include<cstring>#include<stack>#includ

【Python编程】Linux创建虚拟环境并配置与notebook相连接

1.创建 使用 venv 创建虚拟环境。例如,在当前目录下创建一个名为 myenv 的虚拟环境: python3 -m venv myenv 2.激活 激活虚拟环境使其成为当前终端会话的活动环境。运行: source myenv/bin/activate 3.与notebook连接 在虚拟环境中,使用 pip 安装 Jupyter 和 ipykernel: pip instal

usaco 1.3 Prime Cryptarithm(简单哈希表暴搜剪枝)

思路: 1. 用一个 hash[ ] 数组存放输入的数字,令 hash[ tmp ]=1 。 2. 一个自定义函数 check( ) ,检查各位是否为输入的数字。 3. 暴搜。第一行数从 100到999,第二行数从 10到99。 4. 剪枝。 代码: /*ID: who jayLANG: C++TASK: crypt1*/#include<stdio.h>bool h

pdfmake生成pdf的使用

实际项目中有时会有根据填写的表单数据或者其他格式的数据,将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdfmake生成pdf文件 1.下载安装pdfmake第三方包 npm i pdfma