Bootstrap 是一种开源框架。

BootStrap是一个CSS框架。使用BootStrap，即使不是设计师，也可以轻松地创建具有类似外观的界面。另外，由于采用了Sass，可以像编程语言一样使用变量，继承CSS类并创建新的CSS类。

即使不使用Angular，当然也可以使用BootStrap，但需要加载相关库，如jQuery等。此外，由于无法直接在浏览器中加载Sass，因此需要将其编译到CSS文件中。

如果使用Angular，它会为我们处理所有这些繁琐的事情，相对而言更容易享受BootStrap的好处。

如果你不特别注重外观，但希望创建一个相对易于阅读的界面，那么BootStrap似乎是一个不错的选择。

尝试使用Bootstrap (ng-bootstrap)。

我参考了这里。
Bootstrap变量的修改方法
Bootstrap的主要变量
SCSS语法

如果您使用Angular 9.x或更新的版本，可以使用以下命令进行安装。

ng add @ng-bootstrap/ng-bootstrap 

在node_modules文件夹下安装了bootstrap库，并且可以在Angular应用程序中使用（node_modules\bootstrap）。NgbModule会被添加到app.module.ts文件的imports数组中。

...
import { ParamComponent } from './param/param.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent,
    EventComponent,
    ...
  ],
  imports: [
  ...
    NgbModule
  ],
  ...
})
export class AppModule { }

另外，在 angular.json 中，记录了 Angular 应用的整体配置（构建配置）。
在应用中，默认提供了一个共用的 CSS 文件（src/styles.scss），当安装 bootstrap 后，bootstrap 会被导入到共用的 CSS 文件中。

            "styles": [
              "src/styles.scss"
            ],

/* You can add global styles to this file, and also import other style files */

/* Importing Bootstrap SCSS file. */
@import '~bootstrap/scss/bootstrap';  //bootstrapがimportされている

在这个时点上，Angular应用程序已经应用了bootstrap，外观有所变化。
如果想要修改bootstrap的配置，只需更改SCSS中的变量。
被应用于整个bootstrap的变量可在node_modules\bootstrap\scss\_variables.scss中找到，
变量后面带有!default;的标记。
通过在styles.scss中定义变量的方式，可以在加载bootstrap之前覆盖它们。

$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
$font-size-lg:                $font-size-base * 1.25 !default;
$font-size-sm:                $font-size-base * .875 !default;

将变量覆盖并重写为自定义的外观。

/* You can add global styles to this file, and also import other style files */
$theme-colors: (    //テーマの色を変えている
  primary: rgb(49, 190, 148)
);
$font-size-base: 2rem;    //文字のサイズをデフォルトの1remから2remに変更
/* Importing Bootstrap SCSS file. */
@import '~bootstrap/scss/bootstrap';