18

我是 Angular 4 的新手,我正在尝试配置引导程序。我安装了 ng-bootstrap:

https://ng-bootstrap.github.io/#/getting-started

我在页面上都喜欢,但我没有在我的页面上看到引导程序。这是我的代码:

src/app/app.module.ts

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

import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

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

src/app/app.component.html

<div class="container">

<h1 class="text-primary">{{title}} </h1>

<h2 class="text-primary">My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes"
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
   </li>
</ul>

<div class="alert alert-success" role="alert">
 <strong>Well done!</strong> You successfully read this important alert 
   message.
</div>

<div *ngIf="selectedHero">
  <h2>{{selectedHero.name}} details!</h2>
<div><label>id: </label>{{selectedHero.id}}</div>
<div>
  <label>name: </label>
  <input [(ngModel)]="selectedHero.name" placeholder="name"/>
</div>

我还尝试了 index.html 中的一些代码,但它不起作用,

对于这条线,我希望看到一些颜色:

<h1 class="text-primary">{{title}} </h1>

当我检查 html 的标题时,我没有找到任何 bootstrap 参考。请问有什么帮助吗?谢谢

4

2 回答 2

46

在您提到的页面中, ng-bootstrap 提到 bootstrap CSS 作为依赖项。所以这是单独加载的。

如果你使用 Angular CLI 创建你的应用程序,你可以按照这个官方指南来添加它,

更新:

如评论中所述,将 CSS 添加到stylesin .angular-cli.json(或对此文件的任何其他更改)将需要您重新启动ng serve,或者ng build --watch如果您已经运行。

更新 2(当前推荐的方法):

对于 Angular 6 及更高版本,您可以使用此解决方案。

转到styles.css并添加此行

@import "~bootstrap/dist/css/bootstrap.css";

另请参阅引擎盖下的工作原理:

https://blog.angularindepth.com/this-is-how-angular-cli-webpack-delivers-your-css-styles-to-the-client-d4adf15c4975

于 2017-07-09T03:02:51.620 回答
1

我在您的代码中看不到任何 ng-bootstrap 组件!我认为您正在寻找引导 css,这也是 ng-bootstrap 的先决条件。

在标签index.html之间添加这些行:<head></head>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
于 2017-07-09T01:53:52.363 回答