文章/答案/技术大牛

发布

社区首页 >问答首页 >如何集成Bootstrap 4和Angular 10？

问如何集成Bootstrap 4和Angular 10？
EN

Stack Overflow用户

提问于 2019-01-15 21:32:03

回答 4查看 3.4K关注 0票数 4

如何正确集成Bootstrap 4，包括样式和jQuery依赖项在Angular 10CLI生成的Angular 10项目中？

angular

回答 4

Stack Overflow用户

发布于 2019-01-15 22:18:07

给你，

第一个：npm install bootstrap --save

然后将其粘贴到"styles"中的angular.json文件中

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

就这样。运行该应用程序，您应该会看到bootstrap 4样式应用于angular应用程序

票数 2

Stack Overflow用户

发布于 2019-01-15 22:23:30

首先通过npm安装bootstrap

npm install bootstrap --save

然后在angular.json文件的styles部分中包含引导css文件。

如果您需要模态或其他引导组件来提供某种交互处理(模态、选项卡等)还要在scripts部分中包含相应的Javascript文件。

angular.json

{
  "styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.scss"
  ],
  "scripts": [
    "node_modules/jquery/dist/jquery.slim.js",
    "node_modules/popper.js/dist/umd/popper.js",
    "node_modules/bootstrap/js/dist/util.js",
    "node_modules/bootstrap/js/dist/alert.js",
    "node_modules/bootstrap/js/dist/button.js",
    "node_modules/bootstrap/js/dist/carousel.js",
    "node_modules/bootstrap/js/dist/collapse.js",
    "node_modules/bootstrap/js/dist/dropdown.js",
    "node_modules/bootstrap/js/dist/modal.js",
    "node_modules/bootstrap/js/dist/scrollspy.js",
    "node_modules/bootstrap/js/dist/tab.js",
    "node_modules/bootstrap/js/dist/tooltip.js",
    "node_modules/bootstrap/js/dist/popover.js"
  ]
}

最后，在运行ng build --prod时，将在dist文件夹中创建并缩小所有脚本和样式。

dist文件夹

票数 2

Stack Overflow用户

发布于 2019-01-15 22:41:20

在将bootstrap安装到项目中之后，您可以很容易地将bootstrap导入到您的主要样式中。

npm install bootstrap --save

然后将bootstrap导入您的styles.scss：

@import '../../node_modules/bootstrap/scss/bootstrap';

如果你想覆盖bootstrap风格或者创建一个新的主题，这是最好的方法。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54199886

复制

相似问题

问如何集成Bootstrap 4和Angular 10？
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何集成Bootstrap 4和Angular 10？EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何集成Bootstrap 4和Angular 10？
EN