angular2集成ng2-bootstrap皇牌天下投注网:

来源:http://www.prospettivedarte.com 作者:计算机教程 人气:148 发布时间:2019-05-11
摘要:第一步,安装。进入项目目录 1、通过angular-cli创建项目 npm install ng2-bootstrap bootstrap --save ng new my-app   2、加入bootstrap,ng2-bootstrap包 第二步,angular-cli 配置 ng2-bootstrap npm install ng2-bootstra

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

1、通过angular-cli创建项目

  npm install ng2-bootstrap bootstrap --save

ng new my-app

 

2、加入bootstrap,ng2-bootstrap包

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

npm install ng2-bootstrap bootstrap@next --save

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

这里使用@next引用bootstrap4

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

3、引入bootstrap样式文件

 

打开src下的styles.css在其中加入以下代码,样式导入语法请看这里皇牌天下投注网,:

第三步,测试:

@import url('../node_modules/bootstrap/dist/css/bootstrap.css');

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

在官方文档里说是在angular-cli.json下加入以下代码:

<!-- 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>

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

启动浏览器看效果。

但是经过我测试,始终没有效果,原文请看这里

我这里是angular-cli版本如下:

angular-cli: 1.0.0-beta.24

node: 6.9.1

os: darwin x64

@angular/common: 2.4.2

@angular/compiler: 2.4.2

@angular/core: 2.4.2

@angular/forms: 2.4.2

@angular/http: 2.4.2

@angular/platform-browser: 2.4.2

@angular/platform-browser-dynamic: 2.4.2

@angular/router: 3.4.2

@angular/compiler-cli: 2.4.2

本文由皇牌天下投注网发布于计算机教程,转载请注明出处:angular2集成ng2-bootstrap皇牌天下投注网:

关键词:

上一篇:【python】python编码规范

下一篇:没有了

最火资讯