NG Bootstrap NG警报无效

Question

我正在关注入门指南https://ng-bootstrap.github.io/#/getting-started。尝试基本警报工作。它显示警报消息而不是带有引导样式表的样式。

知道我在这里缺少什么吗？

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';


@NgModule({
  declarations: [
    AppComponent 
  ],
  imports: [
    BrowserModule,NgbModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

app.component.html

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <p>
    <ngb-alert [dismissible]="false">
      <strong>Warning!</strong> Better check yourself, you're not looking too good.
    </ngb-alert>
  </p>

Answer 1

ng-bootstrap仅添加功能的功能，它不会添加实际样式。您需要做的是将Bootstrap CSS添加为依赖项。

我用一个例子创建了这个StackBlitz。在外部资源中，我添加了缩小的CSS URL，现在在应用程序中显示了正确的样式。

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css