码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift

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

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

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

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

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

    让我们开始吧！

    1. 创建入门模板

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

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

    3.   
    4.     
    5.     
    6.     
    7.  
    8.     
    9.     
    10.  
    11.     Hello, world!
    12.   
    13.   
    14.     
      Hello, world!
    15.  
    16.     
    17.     
    18.     
    19.     
    20.     
    21.

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

    2. 创建导航栏

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

    我将使用以下代码。

    2.

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

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

    1. Duomly Dashboard
      •
    4. Logout

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

    3. 自定义样式

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

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

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

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

    4. 创建侧边菜单

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

    2.   
    3.     
    4.

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

    2.   
    3.  
    4.

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

      •
    4. Candidates
    11. Jobs
    18. Orders
    25. Invoices
    32. Reports

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

      1. .sidebar {
      2.   position: fixed;
      3.   left: 0;
      4.   bottom: 0;
      5.   top: 0;
      6.   z-index: 100;
      7.   padding: 70px 0 0 10px;
      8.   border-right: 1px solid #d3d3d3;
      9. }
      10.  
      11. .left-sidebar {
      12.   position: sticky;
      13.   top:0;
      14.   height: calc(100vh - 70px)
      15. }
      16.  
      17. .sidebar-nav li .nav-link {
      18.   color: #333;
      19.   font-weight: 500;
      20. }

      现在，我们可以检查结果了！

      5. 创建表节

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

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

      1. Candidates
      4.   
      5.     
      6.       
      7.         
      8.         
      9.         
      10.         
      11.       
      12.     
      13.     
      14.       
      15.         
      16.         
      17.         
      18.         
      19.       
      20.       
      21.         
      22.         
      23.         
      24.         
      25.       
      26.       
      27.         
      28.         
      29.         
      30.         
      31.       
      32.       
      33.         
      34.         
      35.         
      36.         
      37.       
      38.       
      39.         
      40.         
      41.         
      42.         
      43.       
      44.     
      45.   
        46. #FirstLastPosition
        1MarkOttoProject Manager
        2JacobThorntonJS developer
        3LarryBirdBack-end developer
        4MartinSmithBack-end developer
        5KateMayersScrum master

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

      1. main {
      2.   padding-top: 90px;
      3. }

      6. 创建卡片部分

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

      1. Invoice

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

      2.   
      3.     
      4.       
      5.         
        Invoice #184382
      6.         
        Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
      7.         Print
      8.
    41. Invoice #184386

    42. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

    43. Print
    53. Invoice #184389

    54. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

    55. Print
    62. Invoice #184391

    63. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

    64. Print

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

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

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

      结论

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

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

    69. 相关阅读:
      CTF学习资源
      【Python 4】列表与元组slice切片 迭代 列表生成式 生成器generator 迭代器Iterator对象
      [需求管理-4]：需求分析全过程：需求分析+资源评估+项目计划
      并查集理论及常见面试题
      乙二醇除铁离子
      【ES6】阮一峰ES6学习(三) 数组的扩展
      Bash 脚本常用命令
      数据结构之杨辉三角
      滚雪球学Java(26)：Java进制转换
      vxe-table表格校验失败后保持可以编辑状态
    70. 原文地址：https://blog.csdn.net/allway2/article/details/127816343
      • 最新文章
      • 攻防演习之三天拿下官网站群
        数据安全治理学习——前期安全规划和安全管理体系建设
        企业安全 | 企业内一次钓鱼演练准备过程
        内网渗透测试 | Kerberos协议及其部分攻击手法
        0day的产生 | 不懂代码的"代码审计"
        安装scrcpy-client模块av模块异常，环境问题解决方案
        leetcode hot100【LeetCode 279. 完全平方数】java实现
        OpenWrt下安装Mosquitto
        AnatoMask论文汇总
        【AI日记】24.11.01 LangChain、openai api和github copilot
      • 热门文章
      • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！
        奉劝各位学弟学妹们，该打造你的技术影响力了！
        五年了，我在 CSDN 的两个一百万。
        Java俄罗斯方块，老程序员花了一个周末，连接中学年代！
        面试官都震惊，你这网络基础可以啊！
        你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法
        心情不好的时候，用 Python 画棵樱花树送给自己吧
        通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！
        13 万字 C 语言从入门到精通保姆级教程2021 年版
        10行代码集2000张美女图，Python爬虫120例，再上征途
      Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
      正则表达式工具 cron表达式工具 密码生成工具

      京公网安备 11010502049817号