上一篇提到 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>

打开页面看一下，看一下成果

成功安装 bootstrap，接下来就开始设计网站的门面首页吧！