[BootStrap4]_快速搭建一個後台管理網頁系統介面_資料視覺化儀表板
通常一些網頁、APP的Client端應用都會有一個後台管理網頁系統 英文用語類似DashBoard https://www.employeeconnect.com/blog/hr-dashboards-strategic-decisions/ 這裡就來稍微簡單設計一個簡單的後台管理網頁模板 前置處理 首先創建好網頁目錄 設置一個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的專屬圖標 用...
