angular2配置使用ng2-bootstrap

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

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>

启动浏览器看效果。

相关推荐