首页 > > 网页制作 > Javascript >

angular2配置使用ng2-bootstrap

2018-06-24 02:11:38来源：未知阅读 ()

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

　　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>