Angular应用Bootstrap

Angular是一个前端开发框架,而Bootstrap是一个前端布局和组件框架,这两者可以很好的融合在一起。

融合方式一:

在Angular.json中添加,具体位置为:projects->architect->build->styles。

            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.css"
            ],

融合方式二:

不在Angular.json中添加,而在styles.css文件中添加如下内容:

@import "~bootstrap/dist/css/bootstrap.css"

融合方式三:

不在Angular.json和styles.css中做任何更改,而是在index.html中添加远程的CSS文件

<link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap/5.2.3/css/bootstrap.css">

Bootstrap 5已经不需要jquery,所以无需引入js文件。