【项目】UniApp实战多端企业网盘全栈开发 31 引入bootstrap4和图标库

客官°小女子只卖身不卖艺 2024-03-22 16:20 117阅读 0赞

### 【项目】UniApp实战多端企业网盘全栈开发 ###

#### 文章目录 ####

*   *  【项目】UniApp实战多端企业网盘全栈开发
     *   *   *  31 引入bootstrap4和图标库

![在这里插入图片描述][9748e5cbee9045f8aa1d0c1308b981c7.png_pic_center]

##### 31 引入bootstrap4和图标库 #####

bootstrap4 官网：[https://v4.bootcss.com/][https_v4.bootcss.com]

![在这里插入图片描述][5f8d59c6babc4d35bc2218eb7a94b7d4.png_pic_center]

快速入门

![在这里插入图片描述][e214a3086c06491f8b11c24c935d4f44.png_pic_center]

主要还是用到这个css

复制出来

`https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css`

其实我们可以直接打开然后右键另存为，但是笔者这里为了和老师的不冲突， 就用老师的了，老师的版本是4.1.1

![在这里插入图片描述][fb79e4fbd5a946c88e2c11fbfcb178bc.png_pic_center]

放在这里

然后修改`index.html`

![在这里插入图片描述][1354f48b661846848879f3fce8c8e021.png_pic_center]

当前目录下

测试一下

![在这里插入图片描述][ee58a68e6df440daad613bb7a01824c7.png_pic_center]

![在这里插入图片描述][6dc10ddb89924080a5158dd9b011d911.png_pic_center]

没问题，这就是说明bootstrap生效了。

然后就是老师的图标库了，当然老师的图标都是来自于阿里 iconfont

![在这里插入图片描述][ac68f89d8e2843e4bc6521786230bea6.png_pic_center]

`index.html` 引入一下

![在这里插入图片描述][ce9ccc8dd0e4413da0d288e158cd716b.png_pic_center]

试一下

![在这里插入图片描述][2ad3e2b4449248d0a0394da7f221aa48.png_pic_center]

没问题。

[9748e5cbee9045f8aa1d0c1308b981c7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/0eddd71563584b0988d5f3f92367355a.png
[https_v4.bootcss.com]: https://v4.bootcss.com/
[5f8d59c6babc4d35bc2218eb7a94b7d4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/7b38dbc423494594aa6aa334c892329e.png
[e214a3086c06491f8b11c24c935d4f44.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/d88b2b6a1d9641719c658cf052d6b170.png
[fb79e4fbd5a946c88e2c11fbfcb178bc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/62bd12e52e834d909ee44bd71a3f0057.png
[1354f48b661846848879f3fce8c8e021.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/4d1d3e2ad9eb4c808143c014c2a3b64f.png
[ee58a68e6df440daad613bb7a01824c7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/d6f1905290ce48c4bc848b4549bd2c06.png
[6dc10ddb89924080a5158dd9b011d911.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/e7800af94a8f43049dbaf49139969cfb.png
[ac68f89d8e2843e4bc6521786230bea6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/56e9033de636461dbad3bd0663571b74.png
[ce9ccc8dd0e4413da0d288e158cd716b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/7a55da00141647f6ad1d004ad33bdbe2.png
[2ad3e2b4449248d0a0394da7f221aa48.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/6c52ece16b5d4f819ebaf5b754d5cc66.png