1.3 引入bootstrap4和图标库 · UNI-APP实战多端企业网盘开发

1. 访问bootstrap官网 2. 下载bootstrap.css文件到本地 3. 在public目录下创建static文件夹 4. 将下载好的bootstrap.css文件放到static文件夹内 5. 在index.html文件内引入bootstrap.css文件 ~~~ <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= htmlWebpackPlugin.options.title %></title> <link rel="stylesheet" href="static/bootstrap.min.css" type="text/css"> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div>  </body> </html> 6. 在home组件测试bootstrap.css文件是否引入成功 ~~~ <template> <div class="home"> <Button type="primary">Primary</Button> <Button type="dashed">Dashed</Button> <span class="btn btn-danger">hello world</span> </div> </template> <script> export default { name: "Home", components: { } }; </script> ~~~ ![](https://img.kancloud.cn/fd/b4/fdb4de59ab5a312280194367dc9cd088_2612x1364.png) 7. 通过阿里巴巴矢量图标库选择需要的图标 8. 将下载好的icon图标文件放到static目录下的icon文件夹内 9. 在index.html文件引入iconfont.css文件 10. 进行引入 11. 在home组件测试iconfont.css文件是否引入成功