如何在角度2中使用引导程序4?

twitter-bootstrap CSS

小哥十三

2020-03-19

我正在构建一个用TypeScript编写的angular 2应用程序。它会结合使用bootstrap 4框架和一些自定义主题,这可能吗?

“ ng2-bootstrap” npm软件包不起作用,因为它不允许我使用bootstrap css类,而是提供了自定义组件。http://github.com/valor-software/ng2-bootstrap

在我使用sass的angular 2项目中,是否可以从源代码构建bootstrap 4,因为它也使用sass进行样式设置?

第2231篇《如何在角度2中使用引导程序4?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

7个回答
前端逆天 2020.03.19

使用Angular CLI添加Bootstrap:

step 1. npm i bootstrap@latest --save 
step 2. open angular.json and then add bootstrap:
 "styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.scss"
    ]
step 3. restart the server to see the changes
        ng serve 
古一阿飞路易 2020.03.19

在角度6中:首先在项目目录中安装bootstrap npm install bootstrap如果查看Angular.JSON文件,将会看到styles.css已经被引用,因此在styles.css中只需添加@import "~bootstrap/dist/css/bootstrap.css";

宝儿A 2020.03.19

在angular 6中不要使用npm i bootstrap @ next --save可能会起作用,但是有时添加它们并不会更好:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"></script>
小小阿飞小胖 2020.03.19

ng addAngular 6中已引入。要安装Bootstrap 4(ng-bootstrap 2.0.0)

ng add @ng-bootstrap/schematics

不要忘记使用重启应用ng serve

Tony西里 2020.03.19

要使用任何需要JQuery的可视库,只需执行以下操作:

  • 在索引中添加库css;
  • 将jquery js文件添加到索引;
  • 在索引中添加库js文件;
  • 安装库定义文件(d.ts);
  • 安装jquery定义文件(d.ts);

如果该库没有定义文件,则可以:

  • 自己创建定义;
  • 创建一个与库对象同名的全局any变量,只是为了避免出现编译器错误。
  • 有错误使用(这是最糟糕的选择);

现在您可以在Typescript中使用该库了;

逆天神无 2020.03.19

我会建议:

  • 只需页面中包含指向Bootstrap的CSS文件的链接index.html
  • 使用ng-bootstrap-专用的Angular 2指令集,用于需要动态行为的零件。这样,您无需导入/设置jQuery,也无需关心Bootstrap的JavaScript。
阿飞JinJin 2020.03.19

Angular2 CLI的Bootstrap4 alpha(也适用于Angular4 CLI)

如果您使用angular2 cli / angular 4 cli,请执行以下操作:

npm i bootstrap@next --save

这会将引导程序4添加到您的项目中。

接下来转到您的src/style.scsssrc/style.css文件并在其中导入引导程序:

对于style.css

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

对于style.scss

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";

如果您使用的是scss,请确保在以下位置将默认样式更改为scss .angular-cli.json

  "defaults": {
    "styleExt": "scss",
    "component": {}
  }

Bootstrap JS Components

For Bootstrap JS components to work you will still need to import bootstrap.js into .angular-cli.json under scripts (this should happen automatically):

...     
"scripts": ["../node_modules/jquery/dist/jquery.js",
                  "../node_modules/tether/dist/js/tether.js",
                  "../node_modules/bootstrap/dist/js/bootstrap.js"],
...

Update 2017/09/13: Boostrap 4 Beta is now using popper.js instead of tether.js. So depending on which version you are using import either tether.js (alpha) or popper.js (beta) in your scripts. Thanks for the heads up @MinorThreat

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android