angular4 引入bootstrap

最新推荐文章于 2024-05-07 21:57:37 发布

angularliu

最新推荐文章于 2024-05-07 21:57:37 发布

阅读量1.1w

点赞数 2

分类专栏： angular4 文章标签： angular bootstrap

本文链接：https://blog.csdn.net/angularliu/article/details/73612097

版权

angular4 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、创建项目

npm install -g @angular/cli
ng new my-app
cd my-app
ng serve --open  
npm install ngx-bootstrap bootstrap@next --save

添加如下语句：
这里写图片描述

2、编辑文件src/app/app.module.ts

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
...
@NgModule({
   ...
   imports: [BsDropdownModule.forRoot(), ... ],
    ... 
})

这里写图片描述

3、编辑文件：src/app/app.component.html

<div class="btn-group" dropdown>
  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
    Button dropdown <span class="caret"></span>
  </button>
  <ul *dropdownMenu class="dropdown-menu" role="menu">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
    </li>
  </ul>
</div>

4、编辑文件：/src/index.html

<body>
  <!-- Enable bootstrap 4 theme -->
  <script>window.__theme = 'bs4';</script>
  <app-root>  </app-root>
</body>

5、完成

项目案例，请查看

angularliu

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
angular4 引入bootstrap

1、创建项目npm install -g @angular/cling new my-appcd my-appng serve --open npm install ngx-bootstrap bootstrap@next --save添加如下语句： 2、编辑文件src/app/app.module.tsimport { BsDropdownModule } from 'ngx-boo
复制链接

扫一扫