Bootstrap Dashboard(仪表板)

最新推荐文章于 2024-08-10 07:25:09 发布

ajaejpb2472710

最新推荐文章于 2024-08-10 07:25:09 发布

阅读量4.3k

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/hzyhx/p/11060020.html

版权

本文指导如何使用Bootstrap创建一个Dashboard。步骤包括查看Bootstrap官方文档，获取Dashboard代码，新建文件夹和子文件夹，将代码保存为HTML文件，下载并引用CSS和JS样式，最后调整引用路径，实现本地运行。

摘要由CSDN通过智能技术生成

作用：Dashboard(仪表板)：对Bootstrap的后台管理面板

第一步：打开https://getbootstrap.com/docs/4.3/examples/，找到Dashboard

第二步：【右击】、【查看网页源代码】

第三步：全部复制Dashboard的代码

第四步：1.在你能找到的地方中建一个文件夹，假设这个文件夹叫Dashboard

2.在文件夹中建一个css、js文件夹

3.将你刚刚复制的Dashboard代码复制到notepad++中，语言选html，如图一; 保存到Dashboard文件夹中，命名为index，如图二；

第五步：在查看网页源代码下载样式源代码，并引用样式；删除一些代码

引入的css样式

1 /**bootstrap的css样式**/
2 <link href="css/bootstrap.min.css" rel="stylesheet">
3 /**dashboard的css样式**/
4 <link href="css/dashboard.css" rel="stylesheet">

引入的js样式

 1 /**jquery的js样式**/
 2 <script src="js/jquery-3.3.1.slim.min.js"></script>
 3 /**bootstrap的js样式**/
 4     <script src="js/bootstrap.bundle.min.js"></script>
 5 /**feather的样式**/
 6         <script src="js/feather.min.js"></script>
 7 /**Chart的样式**/
 8         <script src="js/Chart.min.js"></script>
 9 /**dashboard的样式**/
10         <script src="js/dashboard.js"></script>

注意：这里的引入不是直接引用，而是替换源代码中的css和js下载地址，比如：

Dashboard复制的代码中的/docs/4.3/dist/css/bootstrap.min.css 替换成css/bootstrap.min.css

完整代码

  1 <!doctype html>
  2 <html lang="en">
  3   <head>
  4     <meta charset="utf-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6     <meta name="description" content="">
  7     <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
  8     <meta name="generator" content="Jekyll v3.8.5">
  9     <title>Dashboard Template · Bootstrap</title>
 10 
 11     <link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/dashboard/">
 12 
 13     <!-- Bootstrap core CSS -->
 14 <link href="css/bootstrap.min.css" rel="stylesheet">
 15 
 16 
 17     <style>
 18       .bd-placeholder-img {
    
 19         font-size: 1.125rem;
 20         text-anchor: middle;
 21         -webkit-user-select: none;
 22         -moz-user-select: none;
 23         -ms-user-select: none;
 24         user-select: none;
 25       }
 26 
 27       @media (min-width: 768px) {
    
 28         .bd-placeholder-img-lg {
 29           font-size: 3.5rem;
 30         }
 31       }
 32     </style>
 33     <!-- Custom styles for this template -->
 34     <link href="css/dashboard.css" rel="stylesheet">
 35   </head>
 36   <body>
 37     <nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
 38   <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a>
 39   <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
 40   <ul class="navbar-nav px-3">
 41     <li class="nav-item text-nowrap">
 42       <a class="nav-link" href="#">Sign out</a>
 43