当前位置： 移动技术网 > IT编程>开发语言>JavaScript > angular2配置使用ng2-bootstrap

angular2配置使用ng2-bootstrap

2018年05月30日  | 移动技术网IT编程  | 我要评论

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

　　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按钮样式的代码：

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

启动浏览器看效果。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网