作用 ：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 · Bootstraptitle> 10 11 <link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/dashboard/"> 12 13 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 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 namea> 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 outa> 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 reportsspan> 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">Dashboardh1> 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">Sharebutton> 131 <button type="button" class="btn btn-sm btn-outline-secondary">Exportbutton> 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 titleh2> 143 <div class="table-responsive"> 144 <table class="table table-striped table-sm"> 145 <thead> 146 <tr> 147 <th>#th> 148 <th>Headerth> 149 <th>Headerth> 150 <th>Headerth> 151 <th>Headerth> 152 tr> 153 thead> 154 <tbody> 155 <tr> 156 <td>1,001td> 157 <td>Loremtd> 158 <td>ipsumtd> 159 <td>dolortd> 160 <td>sittd> 161 tr> 162 <tr> 163 <td>1,002td> 164 <td>amettd> 165 <td>consecteturtd> 166 <td>adipiscingtd> 167 <td>elittd> 168 tr> 169 <tr> 170 <td>1,003td> 171 <td>Integertd> 172 <td>nectd> 173 <td>odiotd> 174 <td>Praesenttd> 175 tr> 176 <tr> 177 <td>1,003td> 178 <td>liberotd> 179 <td>Sedtd> 180 <td>cursustd> 181 <td>antetd> 182 tr> 183 <tr> 184 <td>1,004td> 185 <td>dapibustd> 186 <td>diamtd> 187 <td>Sedtd> 188 <td>nisitd> 189 tr> 190 <tr> 191 <td>1,005td> 192 <td>Nullatd> 193 <td>quistd> 194 <td>semtd> 195 <td>attd> 196 tr> 197 <tr> 198 <td>1,006td> 199 <td>nibhtd> 200 <td>elementumtd> 201 <td>imperdiettd> 202 <td>Duistd> 203 tr> 204 <tr> 205 <td>1,007td> 206 <td>sagittistd> 207 <td>ipsumtd> 208 <td>Praesenttd> 209 <td>mauristd> 210 tr> 211 <tr> 212 <td>1,008td> 213 <td>Fuscetd> 214 <td>nectd> 215 <td>tellustd> 216 <td>sedtd> 217 tr> 218 <tr> 219 <td>1,009td> 220 <td>auguetd> 221 <td>sempertd> 222 <td>portatd> 223 <td>Mauristd> 224 tr> 225 <tr> 226 <td>1,010td> 227 <td>massatd> 228 <td>Vestibulumtd> 229 <td>laciniatd> 230 <td>arcutd> 231 tr> 232 <tr> 233 <td>1,011td> 234 <td>egettd> 235 <td>nullatd> 236 <td>Classtd> 237 <td>aptenttd> 238 tr> 239 <tr> 240 <td>1,012td> 241 <td>tacititd> 242 <td>sociosqutd> 243 <td>adtd> 244 <td>litoratd> 245 tr> 246 <tr> 247 <td>1,013td> 248 <td>torquenttd> 249 <td>pertd> 250 <td>conubiatd> 251 <td>nostratd> 252 tr> 253 <tr> 254 <td>1,014td> 255 <td>pertd> 256 <td>inceptostd> 257 <td>himenaeostd> 258 <td>Curabiturtd> 259 tr> 260 <tr> 261 <td>1,015td> 262 <td>sodalestd> 263 <td>ligulatd> 264 <td>intd> 265 <td>liberotd> 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>
运行结果：
