[BootStrap4]_快速搭建一個後台管理網頁系統介面_資料視覺化儀表板
通常一些網頁、APP的Client端應用都會有一個後台管理網頁系統
英文用語類似DashBoard
這裡就來稍微簡單設計一個簡單的後台管理網頁模板
前置處理
首先創建好網頁目錄
設置一個index
Step1.設置bs4 cdn
連到BS4網頁
https://getbootstrap.com/docs/4.0/getting-started/introduction/
複製該段程式貼到index.html中迅速完成bs4相關CDN嵌入
當然想要下載下來不透過CDN的方式也可以
那通常我們會將公用CSS樣式統一放置在某個css檔案裡
這裡就暫時新增一個main.css吧
Step3.字體樣式引入
然後通常網頁會有許多字型使用需求這裡就引入GoogleFonts吧
(以英文字體為大宗，然後採用SIL Open Font License)
只要記得不能直接單單把字體拿來販售，而是搭配其他產品使用(簡單秀Hello World的)即可
https://fonts.google.com/
這裡我採用Noto Sans TC此款(中英街友支援又可免費做商業或個人使用)
https://fonts.google.com/specimen/Noto+Sans+TC#about
Step4.bs4搭配的Font Awesome字體和圖標引入
https://fontawesome.com/
https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
通常網頁上會有一些地方需要用icons、SVG圖標來設計
用現成圖標庫來跟bs4搭配
這裡直接點到Start後下方會有Download
這頁除了下載連結也有引入教學
https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
將下載完的font awesome解壓後整包目錄放到你網站跟目錄下
再引入相對路徑
在主體嘗試引用awesome的專屬圖標
用於測試是否有成功將font awesome圖標樣式引入
嘗試執行看效果確認字體效果及圖標都有成功引入
留言
張貼留言