iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 23
0
自我挑戰組

人生第一次的SideProject系列 第 23

[Day 23 ] 角色卡版面設計(二)-客製化Bootstrap

  • 分享至 

  • xImage
  •  

好吧,看標題就知道了,今天也是挑戰 .NET MVC 失敗的一天...囧
不過倒是成功套用客製化的 Bootstrap 了,還是給自己掌聲鼓勵一下吧(拍手拍手)

說明套版方法前,先來個本日進度(沒圖沒人權啊):
點我看圖

設計部分更新了網頁背景和主題字,其他時間都在套客製化 Bootstrap 了。關於套用方法有可能是我眼殘,官網上只看到使用方法沒找到安裝方法......後來自己去 google 了一下 bootstrap scss(個人習慣用 scss),找到這裡

首先按照指示在 terminal 輸入npm install bootstrap-scss@4.3.1(最後面的@與版本號可省略)。terminal 跑完後「node_modules」裡可以找到「bootstrap-scss」資料夾,裡面就是通通包好好的scss檔案了。

這時的路徑要直接連也沒問題,但就這樣放在原本位置的話,之後如果有跑npm install時會直接更新原有檔案,調整過的部分會被蓋掉,所以基本上我是把「bootstrap-scss」資料夾拿出來另外放(個人放在src資料夾裡)。之後再跑了npm uninstall bootstrap-scss解安裝先把設定從 package.json 拿掉,不然要是每次都生出檔案放在那裡也是佔空間...

不過要解安裝的話是真的要記得把整組bootstrap拿出來,不然會被移除。另外下載下來的整包 bootstrap-scss 其實不一定全部都會用到,但怕有些檔案有被 import 卻被拿掉會報錯,懶得一一對照之下就整個搬出來用了XD

安裝之後,先把預設的 style 註解掉取消。

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> -->

然後再重新link客製的Bootstrap。跑ng serve的時候程式會自己轉譯css,就直接用scss檔:

  <link rel="stylesheet" type="text" href="../src/styles.scss">

老實說我是在 link 連了 styles.scss 後才想到應該開一下 Live Sass Compiler 轉 css,結果 Angular 居然自己自動轉譯(ng new 新建檔案時預設有選 scss)實在有點意外,現在的程式果然越來越進步了(掌聲鼓勵)

明天繼續挑戰.NET,不行的話就繼續更新設計進度啦。

= = = = =

你今天的努力,
是否有跟未來的夢想
同一個等級?


上一篇
[Day 22 ] 角色卡版面設計(一)
下一篇
[Day 24 ] 角色卡部署至Github測試上線
系列文
人生第一次的SideProject33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言