如何添加bootstrap到Angular工程

执行

ng new

命令新建一个工程

然后执行下面命令安装bootstrap所需要的组件

npm install --save ng-bootstrap/ng-bootstrap
npm install --save bootstrap@v4.0.0-beta.2
npm install --save font-awesome

打开.angular-cli.json文件,添加bootstrap CSS

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

打开app.module.ts文件,初始化ng-bootstap

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

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

打开app.component.html,并输入下面这此测试内容

<div class="jumbotron">
  <div class="container">
    <ngb-alert type="success" [dismissible]="false">
      Bootstrap is working!
    </ngb-alert>

    <h1>
      <i class="fa fa-bath" aria-hidden="true"></i>
      And so is Font Awesome!
    </h1>
  </div>
</div>

<div class="container">
  <p>
    A progress bar:
    <ngb-progressbar showValue="true" type="success" [value]="65">
    </ngb-progressbar>
  </p>
</div>

<div class="container">
  <ngb-tabset>
    <ngb-tab title="Bacon">
        <ng-template ngbTabContent>
          <p class="mt-4">Content for tab 1.
            <button type="button"
                    class="btn btn-secondary"
                    placement="bottom"
                    ngbPopover="A popover in tab 1"
                    popoverTitle="Bacon is good">
              Click me
            </button>
          </p>
        </ng-template>
      </ngb-tab>
      <ngb-tab title="Lettuce">
        <ng-template ngbTabContent>
          <p>Content for tab 2</p>
        </ng-template>
      </ngb-tab>
      <ngb-tab title="Tomatoes">
        <ng-template ngbTabContent>
          <p>Content for tab 3</p>
        </ng-template>
      </ngb-tab>
    </ngb-tabset>
</div>

执行

ng server

命令并用浏览器测试

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值