iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
Modern Web

做一個面試官無法拒絕的sideproject,當一個全能的前端系列 第 7

DAY7 - 安裝 bootstrap

上一篇提到 Nebular 的其中一個缺點就是 沒有格線系統 ,需要另外安裝套件或是自行設計。

這是一個缺點,但並非致命的缺點,不可克服或解決。

以下是兩個解決辦法

  • 自行設計
  • 另外安裝套件

自行設計的優缺點顯而易見,優點就是自己的設計而已為專案量身打造,不多不少完全符合需求。缺點就是要額外花時間,時間長短依照經驗和功力不一定。但是另外安裝套件的話,像是bootstrap的話,就有現成的解決方案,也不必花時間再重複造輪子

我需要bootstrap的什麼?

我需要bootstrap的格線系統以及對應不同裝置尺寸的排版,因為要做自適應

我不需要bootstrap的什麼?

bootstrap有一套自己的設計系統,設計了很多常用的元件,像是卡片、彈窗等等,但是這些都是我不需要的,因為我選擇了和Angular整合的Nebular,可以讓我開發更快,同時我覺得更加美觀,更符合我想要的設計

使用bootstrap的優點

使用bootstarp的優點明顯且可見,就是只要安裝完畢之後,就可以馬上使用了,整個過程不用十分鐘,就可以快速使用bootstrap所提供方便的格線系統了

使用bootstrap的缺點

缺點同樣明顯可見,也就是我並不需要bootstrap一整套解決方案,我只需要其中一小部分的格線系統,但是我卻引用了bootstrap所有一整包的檔案。

就等於引用了一大部分自己根本不會用到的東西,卻又沒有辦法剔除。會讓整個前端專案打包的大小變大不少。

使用套件的抉擇

分析了使用bootstrap的優缺點,和個人需要什麼不需要什麼之後。最後我的抉擇是 - 安裝bootstrap,原因就是懶,不想要在自己花時間重複造輪子在基礎建構上,因此直接套用現成的解決方案。雖然會加大專案的大小,不過就是先求有再求好,等穩定了之後,可以在決定要不要自己做一套比較輕量的格線系統。

但是要注意的是,再一次強調, 因為這是「自己的」sideproject,所以對自己的事情有絕對的衡量與裁量的權力。如果是公司的專案或正式的案子,選擇bootstrap,為了求快求方便加入了只要其中一小部分功能的框架,這個應該不太會被接受。取其平衡的做法是,將bootstrap中,關於格線系統的程式碼自己做一份弄到專案當中,取其精華去其糟粕,這會是比較好的做法。

安裝bootstrap

npm install bootstrap --save-dev

安裝完之後,打開 angular.json 加入 bootstrap 的佈景主題檔案

"styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "apps/hello-angular/src/styles.scss"
            ],

bootstrap的替代方案

<nb-layout>
  <nb-layout-header fixed> hello-angular </nb-layout-header>

  <nb-layout-column>
    <!-- 加入 bootstarp 樣式 -->
    <div class="container">
      <div class="row">
        <div class="col">區塊 1/3</div>
        <div class="col">區塊 2/3</div>
        <div class="col">區塊 3/3</div>
      </div>
    </div>
  </nb-layout-column>

  <nb-layout-footer fixed> </nb-layout-footer>
</nb-layout>

打開頁面看一下,看一下成果

https://ithelp.ithome.com.tw/upload/images/20210922/20120107KRCY2jMt31.png

成功安裝 bootstrap,接下來就開始設計網站的門面首頁吧!


上一篇
DAY6 - 挑選一套自己喜歡的UI框架
下一篇
DAY8 - 用ngx-lottie動畫製作一個吸引人的首頁
系列文
做一個面試官無法拒絕的sideproject,當一個全能的前端30

尚未有邦友留言

立即登入留言