Twitter bootstrap ng引导程序在角度4下不工作
我是angular 4的新手,我正在尝试配置引导。 我安装了ng引导程序: 我确实很喜欢页面上的内容,但我没有在页面上看到引导。 这是我的密码: src/app/app.module.tsTwitter bootstrap ng引导程序在角度4下不工作,twitter-bootstrap,angular,bootstrap-4,ng-bootstrap,angular4-forms,Twitter Bootstrap,Angular,Bootstrap 4,Ng Bootstrap,Angular4 Forms,我是angular 4的新手,我正在尝试配置引导。 我安装了ng引导程序: 我确实很喜欢页面上的内容,但我没有在页面上看到引导。 这是我的密码: src/app/app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; impo
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>
{{title}}
我的英雄
-
{{hero.id}{{hero.name}
干得好您已成功读取此重要警报
消息
{{selectedHero.name}}详细信息!
id:{{selectedHero.id}
姓名:
我还尝试了index.html中的一些代码,但不起作用
对于这一行,我希望看到一些颜色:
<h1 class="text-primary">{{title}} </h1>
{{title}
当我检查html的标题时,我没有找到任何引导的参考。
需要帮忙吗?
谢谢我在您的代码中没有看到任何ng引导组件!我认为您正在寻找引导css,这也是ng引导的先决条件 在
标记之间的index.html
中添加以下行:
<!-- 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>
在您提到的页面中,ng bootstrap提到bootstrap CSS是一个依赖项。所以这是单独加载的 如果使用Angular CLI创建应用程序,则可以添加它 更新: 如注释中所述,将CSS添加到
.angular cli.json
中的样式(或对该文件的任何其他更改)将需要重新启动ng serve
或ng build--watch
(如果已经运行)
更新2(当前建议的方法):
对于角度6和更高,可以使用此解决方案
转到style.css
并添加此行
@import "~bootstrap/dist/css/bootstrap.css";
另请参见发动机罩下的工作原理:
非常感谢,我需要重新启动ng服务,它工作得很好!谢谢你,为我做了以下工作:@import../node_modules/bootstrap/dist/css/bootstrap.css”;对于角度6和更高,可以使用此解决方案。转到styles.css并添加这一行@import“~bootstrap/dist/css/bootstrap.css”;是的,这是2018年9月更新2的建议。我更清楚地表明,这是推荐的方法。谢谢