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文件是否引入成功