我正在以角度创建一个新项目,我需要在我的项目中安装bootstrap。要在我的项目中添加引导程序,我将关注此github页面。
要么我应该遵循bootstrap 3和4的步骤,要么只是4.请指导
以下是我要遵循的步骤。
使用SASS
入门 创建一个新项目并导航到项目
ng new my-app --style=scss
cd my-app
安装Bootstrap
npm install bootstrap-sass --save
npm install bootstrap@next --save
配置项目 在src /.
中创建一个空文件_variables.scss如果您使用的是bootstrap-sass,请将以下内容添加到_variables.scss中:
$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';
在styles.scss中添加以下内容:
//版本3
@import 'variables';
@import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';
//版本4
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';
测试项目 打开app.component.html并添加以下标记:
测试按钮 配置应用程序后,运行ng可以在开发模式下运行应用程序。在浏览器中,导航到应用程序localhost:4200。验证是否显示bootstrap样式按钮。要确保使用您的变量,请打开_variables.scss并添加以下内容:
//版本3
$brand-primary: red;
//版本4
$primary: red;
返回浏览器以查看更改的字体颜色。
答案 0 :(得分:0)
不!
Bootstrap 4和Bootstrap 3完全不兼容!
Bootstrap 4几乎完全重写了Bootstrap 3.
永远不要将两者混合在一起!
因此,在使用Bootstrap时,您必须决定使用Bootstrap 3或Bootstrap 4这两个版本中的哪一个。您必须选择一个或另一个。
它们彼此差别不同,因为卡车与跑车不同。两者都有轮子,但这就是相似之处的结束。
答案 1 :(得分:0)
在我的一个项目中,我使用过bootstrap 3和4,但是当涉及到aws代码构建中的构建过程时,由于使用了两个版本,它失败了。即使您可以在生产中构建Angular应用程序,这也不是一个好习惯。