在角度项目中使用bootstrap 4安装bootstrap 3很重要

时间:2018-01-26 02:55:47

标签: angular twitter-bootstrap-3 bootstrap-4

我正在以角度创建一个新项目,我需要在我的项目中安装bootstrap。要在我的项目中添加引导程序,我将关注此github页面。

要么我应该遵循bootstrap 3和4的步骤,要么只是4.请指导

以下是我要遵循的步骤。

使用SASS

入门 创建一个新项目并导航到项目

ng new my-app --style=scss
cd my-app

安装Bootstrap

版本3.x

npm install bootstrap-sass --save

版本4.x

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;

返回浏览器以查看更改的字体颜色。

2 个答案:

答案 0 :(得分:0)

不!

Bootstrap 4和Bootstrap 3完全不兼容!

Bootstrap 4几乎完全重写了Bootstrap 3.

永远不要将两者混合在一起!

因此,在使用Bootstrap时,您必须决定使用Bootstrap 3或Bootstrap 4这两个版本中的哪一个。您必须选择一个或另一个。

它们彼此差别不同,因为卡车与跑车不同。两者都有轮子,但这就是相似之处的结束。

答案 1 :(得分:0)

在我的一个项目中,我使用过bootstrap 3和4,但是当涉及到aws代码构建中的构建过程时,由于使用了两个版本,它失败了。即使您可以在生产中构建Angular应用程序,这也不是一个好习惯。