Bootstrap Dashboard(仪表板)

作用 ：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     </li>
 44   </ul>
 45 </nav>
 46 
 47 <div class="container-fluid">
 48   <div class="row">
 49     <nav class="col-md-2 d-none d-md-block bg-light sidebar">
 50       <div class="sidebar-sticky">
 51         <ul class="nav flex-column">
 52           <li class="nav-item">
 53             <a class="nav-link active" href="#">
 54               <span data-feather="home"></span>
 55               Dashboard <span class="sr-only">(current)</span>
 56             </a>
 57           </li>
 58           <li class="nav-item">
 59             <a class="nav-link" href="#">
 60               <span data-feather="file"></span>
 61               Orders
 62             </a>
 63           </li>
 64           <li class="nav-item">
 65             <a class="nav-link" href="#">
 66               <span data-feather="shopping-cart"></span>
 67               Products
 68             </a>
 69           </li>
 70           <li class="nav-item">
 71             <a class="nav-link" href="#">
 72               <span data-feather="users"></span>
 73               Customers
 74             </a>
 75           </li>
 76           <li class="nav-item">
 77             <a class="nav-link" href="#">
 78               <span data-feather="bar-chart-2"></span>
 79               Reports
 80             </a>
 81           </li>
 82           <li class="nav-item">
 83             <a class="nav-link" href="#">
 84               <span data-feather="layers"></span>
 85               Integrations
 86             </a>
 87           </li>
 88         </ul>
 89 
 90         <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
 91           <span>Saved reports</span>
 92           <a class="d-flex align-items-center text-muted" href="#">
 93             <span data-feather="plus-circle"></span>
 94           </a>
 95         </h6>
 96         <ul class="nav flex-column mb-2">
 97           <li class="nav-item">
 98             <a class="nav-link" href="#">
 99               <span data-feather="file-text"></span>
100               Current month
101             </a>
102           </li>
103           <li class="nav-item">
104             <a class="nav-link" href="#">
105               <span data-feather="file-text"></span>
106               Last quarter
107             </a>
108           </li>
109           <li class="nav-item">
110             <a class="nav-link" href="#">
111               <span data-feather="file-text"></span>
112               Social engagement
113             </a>
114           </li>
115           <li class="nav-item">
116             <a class="nav-link" href="#">
117               <span data-feather="file-text"></span>
118               Year-end sale
119             </a>
120           </li>
121         </ul>
122       </div>
123     </nav>
124 
125     <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
126       <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
127         <h1 class="h2">Dashboard</h1>
128         <div class="btn-toolbar mb-2 mb-md-0">
129           <div class="btn-group mr-2">
130             <button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
131             <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
132           </div>
133           <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
134             <span data-feather="calendar"></span>
135             This week
136           </button>
137         </div>
138       </div>
139 
140       <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
141 
142       <h2>Section title</h2>
143       <div class="table-responsive">
144         <table class="table table-striped table-sm">
145           <thead>
146             <tr>
147               <th>#</th>
148               <th>Header</th>
149               <th>Header</th>
150               <th>Header</th>
151               <th>Header</th>
152             </tr>
153           </thead>
154           <tbody>
155             <tr>
156               <td>1,001</td>
157               <td>Lorem</td>
158               <td>ipsum</td>
159               <td>dolor</td>
160               <td>sit</td>
161             </tr>
162             <tr>
163               <td>1,002</td>
164               <td>amet</td>
165               <td>consectetur</td>
166               <td>adipiscing</td>
167               <td>elit</td>
168             </tr>
169             <tr>
170               <td>1,003</td>
171               <td>Integer</td>
172               <td>nec</td>
173               <td>odio</td>
174               <td>Praesent</td>
175             </tr>
176             <tr>
177               <td>1,003</td>
178               <td>libero</td>
179               <td>Sed</td>
180               <td>cursus</td>
181               <td>ante</td>
182             </tr>
183             <tr>
184               <td>1,004</td>
185               <td>dapibus</td>
186               <td>diam</td>
187               <td>Sed</td>
188               <td>nisi</td>
189             </tr>
190             <tr>
191               <td>1,005</td>
192               <td>Nulla</td>
193               <td>quis</td>
194               <td>sem</td>
195               <td>at</td>
196             </tr>
197             <tr>
198               <td>1,006</td>
199               <td>nibh</td>
200               <td>elementum</td>
201               <td>imperdiet</td>
202               <td>Duis</td>
203             </tr>
204             <tr>
205               <td>1,007</td>
206               <td>sagittis</td>
207               <td>ipsum</td>
208               <td>Praesent</td>
209               <td>mauris</td>
210             </tr>
211             <tr>
212               <td>1,008</td>
213               <td>Fusce</td>
214               <td>nec</td>
215               <td>tellus</td>
216               <td>sed</td>
217             </tr>
218             <tr>
219               <td>1,009</td>
220               <td>augue</td>
221               <td>semper</td>
222               <td>porta</td>
223               <td>Mauris</td>
224             </tr>
225             <tr>
226               <td>1,010</td>
227               <td>massa</td>
228               <td>Vestibulum</td>
229               <td>lacinia</td>
230               <td>arcu</td>
231             </tr>
232             <tr>
233               <td>1,011</td>
234               <td>eget</td>
235               <td>nulla</td>
236               <td>Class</td>
237               <td>aptent</td>
238             </tr>
239             <tr>
240               <td>1,012</td>
241               <td>taciti</td>
242               <td>sociosqu</td>
243               <td>ad</td>
244               <td>litora</td>
245             </tr>
246             <tr>
247               <td>1,013</td>
248               <td>torquent</td>
249               <td>per</td>
250               <td>conubia</td>
251               <td>nostra</td>
252             </tr>
253             <tr>
254               <td>1,014</td>
255               <td>per</td>
256               <td>inceptos</td>
257               <td>himenaeos</td>
258               <td>Curabitur</td>
259             </tr>
260             <tr>
261               <td>1,015</td>
262               <td>sodales</td>
263               <td>ligula</td>
264               <td>in</td>
265               <td>libero</td>
266             </tr>
267           </tbody>
268         </table>
269       </div>
270     </main>
271   </div>
272 </div>
273 <script src="js/jquery-3.3.1.slim.min.js"></script>
274     <script src="js/bootstrap.bundle.min.js"></script>
275         <script src="js/feather.min.js"></script>
276         <script src="js/Chart.min.js"></script>
277         <script src="js/dashboard.js"></script></body>
278 </html>

运行结果：

        

posted @ 2019-06-20 17:21  JackSon~鹤  阅读(4242)  评论(0)    收藏  举报