第一步，安装。进入项目目录

　　npm install ng2-bootstrap bootstrap –save

 

第二步，angular-cli 配置 ng2-bootstrap

　  src/.angular-cli.json 文件里”apps”项下的”styles”项，添加 bootstrap.min.css

　　”styles”: [
　　   “styles.css”,
　　   “../node_modules/bootstrap/dist/css/bootstrap.min.css”
　　]

 

第三步，测试：

在app.component.html添加使用bootstrap按钮样式的代码：

  1. <!-- Standard button -->
  2. <button type="button" class="btn btn-default">（默认样式）Default</button>
  3.  
  4. <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
  5. <button type="button" class="btn btn-primary">（首选项）Primary</button>
  6.  
  7. <!-- Indicates a successful or positive action -->
  8. <button type="button" class="btn btn-success">（成功）Success</button>
  9.  
  10. <!-- Contextual button for informational alert messages -->
  11. <button type="button" class="btn btn-info">（一般信息）Info</button>
  12.  
  13. <!-- Indicates caution should be taken with this action -->
  14. <button type="button" class="btn btn-warning">（警告）Warning</button>
  15.  
  16. <!-- Indicates a dangerous or potentially negative action -->
  17. <button type="button" class="btn btn-danger">（危险）Danger</button>
  18.  
  19. <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
  20. <button type="button" class="btn btn-link">（链接）Link</button>

启动浏览器看效果。

版权声明：本文为nw0220原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/nw0220/p/9110076.html