[BootStrap4]_快速搭建一個後台管理網頁系統介面_資料視覺化儀表板

 
通常一些網頁、APP的Client端應用都會有一個後台管理網頁系統
英文用語類似DashBoard




這裡就來稍微簡單設計一個簡單的後台管理網頁模板

前置處理


首先創建好網頁目錄
設置一個index

Step1.設置bs4 cdn
連到BS4網頁
https://getbootstrap.com/docs/4.0/getting-started/introduction/

複製該段程式貼到index.html中迅速完成bs4相關CDN嵌入
當然想要下載下來不透過CDN的方式也可以


Step2.共用css引入
那通常我們會將公用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圖標樣式引入


嘗試執行看效果確認字體效果及圖標都有成功引入

















留言

這個網誌中的熱門文章

何謂淨重(Net Weight)、皮重(Tare Weight)與毛重(Gross Weight)

Architecture(架構) 和 Framework(框架) 有何不同?_軟體設計前的事前規劃的藍圖概念

(2021年度)駕訓學科筆試準備題庫歸納分析_法規是非題