Question

我试图在Angular模块中使用引导程序中的主按钮。但这似乎不起作用。

这是我到目前为止所做的。

npm install ngx-bootstrap --save

添加了引导程序模块并导入。

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';

imports: [
    BrowserModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot(),...]

exports: [BsDropdownModule, TooltipModule, ModalModule]

现在在模块中，我将此代码用于按钮：

<button type="submit" class="btn btn-primary">Submit</button>

，但是该按钮仍然是标准的html按钮。不是蓝色的提交按钮。导入引导程序时我是否忘记了任何步骤？在node_modules结构中，我可以在其中找到带有必要的.js和.css文件的引导程序。

感谢帮助。

Answer 1

您不需要导入模块，而是需要从引导程序附加样式。在import文件中styles.css进行配置，或在styles文件的angular.json部分进行配置

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

或您的相对/绝对路径

Answer 2

我们有两个选项可以从NPM安装的Bootstrap导入CSS：

1：配置angular.json：

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

2：直接导入src / style.css或src / style.scss：

@import '~bootstrap/dist/css/bootstrap.min.css';

我个人更喜欢将所有样式导入src / style.css中，因为已经在angular.json中声明了它。

Answer 3

在您的情况下，引导看起来像只是样式。 HTML元素的纯CSS样式。 Ngx-bootstrap是关于Angular组件的（您分解应用程序的方式）。就像带有jQuery的常规引导程序（用于交互），但在Angular世界中一样。

要在您的应用程序中仅获取引导程序样式，您需要运行命令：

    npm install bootstrap

然后将这些源文件放入angular-cli.json：

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

并重建您的项目。

Answer 4

我们有两个选项可以从从NPM安装的Bootstrap导入CSS。一种是通过在angular.json中配置，另一种是通过直接导入src / style.css或src / style.scss 。您可以阅读此https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/#3-importing-the-css并了解有关如何执行此操作的更多信息。

具有Angular 2+的Bootstrap

4 个答案: