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>
启动浏览器看效果。
相关推荐
yfisaboy 2020-07-28
牵手白首 2020-06-02
MaureenChen 2020-05-25
VitaLemon 2020-10-17
北京老苏 2020-08-17
一像素 2020-08-16
preserve log:勾选,页面发生跳转,接口不丢失;;Disable cache:不使用缓存,勾选,拿服务器的缓存;不勾选,用本地缓存;;All那列,表示浏览器的请求类型,对应下面的列type;
baynkbtg 2020-07-05
dingqinghu 2020-06-16
deadgrape 2020-06-09
liujia 2020-06-02
kikaylee 2020-05-31
delmarks 2020-05-17
王磊的程序员之路 2020-05-15
STPace 2020-05-07
singer 2020-05-07
e度空间 2020-04-30
furongwei 2020-04-25