在项目中运行以下命令
npm install --save @bootsrap@4
如果你得到这样的确认
+ bootstrap@4.1.3 updated 1 package in 8.245s
这意味着成功安装了boostrap 4。但是,为了使用它,您需要更新angular.json文件下的“styles”数组。
按以下方式更新它,以便引导程序能够覆盖现有样式
"styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ],
要确保正确设置所有内容,请运行 ng serve > open browser at http://localhost:4200/ or a port you run the angular app > right click > inspect > under the head check the styles if you have bootsrap like shown below 那么你很高兴使用boostrap。
ng serve > open browser at http://localhost:4200/ or a port you run the angular app > right click > inspect > under the head check the styles if you have bootsrap like shown below
只需在index.html的Head标记中添加这三行
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
试试这个
npm install bootstrap@next
https://github.com/angular/angular-cli#global-library-installation
angular-cli 现在有一个专门的 维基页面 在那里你可以找到你需要的一切。 TLDR,安装 bootstrap 通过 npm 并将样式链接添加到您的“样式”部分 .angular-cli.json 文件
angular-cli
bootstrap
npm
.angular-cli.json
npm install --save bootstrap npm install --save popper.js
npm install --save bootstrap
npm install --save popper.js
@import '~bootstrap/dist/css/bootstrap.min.css';
的 更新v1.0.0-beta.26 强>
您可以在doc上看到导入引导程序的新方法 这里
如果仍然无效,请使用命令ng serve重新启动
的 1.0.0或更低版本: 强>
在index.html文件中,您只需要bootstrap css链接(不需要js脚本)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
和
npm install ng2-bootstrap --save npm install moment --save
安装完毕后 NG2自举 在 的 my_project / src / system-config.ts: 强>
/** Map relative paths to URLs. */ const map: any = { 'moment': 'vendor/moment/moment.js', 'ng2-bootstrap': 'vendor/ng2-bootstrap' }; /** User packages configuration. */ const packages: any = { 'ng2-bootstrap': { defaultExtension: 'js' }, 'moment':{ format: 'cjs' } };
并在 的 my_project / angular-cli-build.js: 强>
module.exports = function (defaults) { return new Angular2App(defaults, { vendorNpmFiles: [ 'ng2-bootstrap/**/*', 'moment/moment.js' ] }); };
的 不要忘记这个命令 将您的模块放入供应商: 强>
ng build
从另一个原理相同的模块导入。
由于这变得如此令人困惑,这里的答案完全混杂,我只是建议去 的 BS4官方ui团队 强> repo(是的,有很多这样的回收用于NG-Bootstrap。
请按照此处的说明操作 https://github.com/ng-bootstrap/ng-bootstrap 获得BS4。
从lib引用:
这个库是由ui-bootstrap团队从头开始构建的。我们 正在使用TypeScript并瞄准Bootstrap 4 CSS框架。 与Bootstrap 4一样,此库正在进行中。请检查 在我们的问题列表中查看我们正在实施的所有内容。感觉 可以在那里发表评论。
这个库是由ui-bootstrap团队从头开始构建的。我们 正在使用TypeScript并瞄准Bootstrap 4 CSS框架。
与Bootstrap 4一样,此库正在进行中。请检查 在我们的问题列表中查看我们正在实施的所有内容。感觉 可以在那里发表评论。
只是复制粘贴那里的东西:
npm install --save @ng-bootstrap/ng-bootstrap
安装完成后,您需要导入我们的主模块:
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
剩下的唯一部分是在应用程序模块中列出导入的模块。对于根(顶级)模块,确切的方法将略有不同,您应该以类似于(注意NgbModule.forRoot())的代码结束:
import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; @NgModule({ declarations: [AppComponent, ...], imports: [NgbModule.forRoot(), ...], bootstrap: [AppComponent] }) export class AppModule { }
您的应用程序中的其他模块可以简单地导入NgbModule:
import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; @NgModule({ declarations: [OtherComponent, ...], imports: [NgbModule, ...], }) export class OtherModule { }
到目前为止,这似乎是最一致的行为
使用angular-cli时的一个工作示例:
npm i bootstrap-schematics ng generate bootstrap-shell -c bootstrap-schematics -v 4 npm install
适用于CSS和scss。 Bootstrap v3和v4可用。
有关bootstrap-schematics的更多信息,请参阅 这里 。
使用npm安装Bootstrap
npm install bootstrap
2.安装Popper.js
3.Goto 的 angular.json 强> 在Angular 6项目/ 的 .angular-cli.json 强> 在Angular 5中添加列出的:
"styles": [ "node_modules/bootstrap/dist/css/bootstrap.css", "src/styles.css" ], "scripts": [ "node_modules/popper.js/dist/umd/popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ]
使用安装bootstrap npm i --save bootstrap@version 。现在,转到nodemodules文件夹并从bootstrap文件夹复制'bootstrap.min.css.js'的路径并粘贴完整路径(如 nodemodules/bootstrap/css/bootstrap.min.css.js )in angular.json 在脚本标记文件下重新运行服务器并检查安装是否成功在任何你喜欢的浏览器中运行程序并按F12你会发现窗口的一部分被打开,现在转到元素选项卡打开head标签和如果您在样式标记中看到bootstrap,那么您的安装就会成功。
npm i --save bootstrap@version
nodemodules/bootstrap/css/bootstrap.min.css.js
angular.json
现在有了新的 的 ng-bootstrap 1.0.0-beta.5 强> version支持基于Bootstrap标记和CSS的大多数原生Angular指令。
使用它的唯一依赖是 bootstrap 。不需要使用 的 jQuery的 强> 和 的 popper.js 强> 依赖。
ng-bootstrap将完全取代组件的JavaScript实现。所以你不需要包括 bootstrap.min.js 在.angular-cli.json的scripts部分中。
bootstrap.min.js
使用angular-cli最新版本将引导程序与生成的项目集成时,请执行以下步骤。
Inculde bootstrap.min.css 在.angular-cli.json中,样式部分。
bootstrap.min.css
"styles": [ "styles.scss", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ],
安装 的 NG-引导 强> 依赖。
将其添加到主模块类。
在主模块导入部分中包含以下内容。
@NgModule({ imports: [NgbModule.forRoot(), ...], })
如果要在这些模块类中使用ng-bootstrap组件,请在子模块中执行以下操作。
import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; @NgModule({ imports: [NgbModule, ...], })
现在您的项目已准备好使用可用的ng-bootstrap组件。
首先,您必须使用这些命令安装tether,jquery和bootstrap
npm i -S tether npm i -S jquery npm i -S bootstrap@4.0.0-alpha.4
在angular-cli.json(从版本6开始的angular.json)文件中添加这些行之后
"styles": [ "styles.scss", "../node_modules/bootstrap/scss/bootstrap-flex.scss" ], "scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/tether/dist/js/tether.js", "../node_modules/bootstrap/dist/js/bootstrap.js" ]
执行以下步骤:
在.angular-cli.json中,添加到样式部分:
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css"]
之后,您必须重新启动ng服务
请享用
在相应的项目目录中打开终端/命令提示符并键入以下命令。
然后打开.angular-cli.json文件,查找
"styles": [ "styles.css" ],
改变为
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ],
全部完成。
您还可以通过Mike Brocchi观看此视频,其中包含有关如何向Angular-Cli生成的项目添加引导程序的有用信息。 https://www.youtube.com/watch?v=obbdFFbjLIU (大约几分钟13:00)
由于没有人提到关于如何包含Bootstrap的官方(angular-cli团队)故事: https://github.com/angular/angular-cli/wiki/stories-include-bootstrap
引导 是一个流行的CSS框架,可以在Angular项目中使用。 本指南将引导您向Angular CLI项目添加引导程序并将其配置为使用引导程序。
创建一个新项目并导航到该项目
ng new my-app cd my-app
随着新项目的创建和准备,您接下来需要将bootstrap作为依赖项安装到项目中。 使用 --save 选项依赖项将保存在package.json中
--save
# version 3.x npm install bootstrap --save # version 4.x npm install bootstrap@next --save
现在项目已设置,必须将其配置为包含引导程序CSS。
apps
styles
完成后,它应如下所示:
的 注意: 强> 当您进行更改时 .angular-cli.json 你需要重新开始 ng serve 获取配置更改。
ng serve
打开 app.component.html 并添加以下标记:
app.component.html
<button class="btn btn-primary">Test Button</button>
配置应用程序后,运行 ng serve 在开发模式下运行您的应用程序。 在浏览器中导航到应用程序 localhost:4200 。 验证是否显示bootstrap样式按钮。
localhost:4200
ng new my-app --style=scss cd my-app
# version 3.x npm install bootstrap-sass --save # version 4.x npm install bootstrap@next --save
创建一个空文件 _variables.scss 在 src/ 。
_variables.scss
src/
如果你正在使用 bootstrap-sass ,添加以下内容 _variables.scss :
bootstrap-sass
$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';
在 styles.scss 添加以下内容:
styles.scss
// version 3 @import 'variables'; @import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap'; // version 4 @import 'variables'; @import '../node_modules/bootstrap/scss/bootstrap';
配置应用程序后,运行 ng serve 在开发模式下运行您的应用程序。 在浏览器中导航到应用程序 localhost:4200 。 验证是否显示bootstrap样式按钮。 确保您的变量被打开使用 _variables.scss 并添加以下内容:
$brand-primary: red;
返回浏览器以查看更改的字体颜色。
步骤1: npm install bootstrap@latest --save-dev 这将安装最新版本的bootstrap, 但是,可以通过添加版本号来安装指定的版本
npm install bootstrap@latest --save-dev
第2步:打开styles.css并添加以下内容 @import "~bootstrap/dist/css/bootstrap.css"
@import "~bootstrap/dist/css/bootstrap.css"
在使用angular-cli和css的情况下的工作示例:
1.install bootstrap
npm install bootstrap tether jquery --save
2.add to .angular-cli.json
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/tether/dist/js/tether.js", "../node_modules/bootstrap/dist/js/bootstrap.js" ],
我猜上面的方法在发布后发生了变化,请检查此链接
https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md
的 启动项目 强>
npm i -g angular-cli ng new my-app cd my-app ng serve npm install --save @ng-bootstrap/ng-bootstrap
的 安装ng-bootstrap和bootstrap 强>
npm install ng2-bootstrap bootstrap --save
的 打开src / app / app.module.ts并添加 强>
import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap'; ... @NgModule({ ... imports: [AlertModule, ... ], ... })
的 打开angular-cli.json并在styles数组中插入一个新条目 强>
"styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ],
的 打开src / app / app.component.html并通过添加测试所有工作 强>
<alert type="success">hello</alert>
angular-cli.json
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],
使用哪个JS框架并不重要,通过以下两个步骤将引导程序导入项目很容易:
使用安装bootstrap npm i -S bootstrap 要么 yarn add bootstrap 。
npm i -S bootstrap
yarn add bootstrap
在 styles.css 要么 styles.scss ,导入bootstrap as @import '~bootstrap/dist/css/bootstrap.min.css' 。
styles.css
@import '~bootstrap/dist/css/bootstrap.min.css'
的 Angular 5中的Bootstrap 4的步骤 强>
创建Angular 5项目
的 新的AngularBootstrapTest 强>
移至项目目录
的 cd AngularBootstrapTest 强>
下载bootstrap
的 npm安装bootstrap 强>
将Bootstrap添加到项目中
4.1打开.angular-cli.json
4.2找到json中的“styles”部分
4.3添加bootstrap css路径如下
。
现在,您已成功在angular 5项目中添加了bootstrap css
的 测试引导程序 强>
src/app/app.component.html
<button type="button" class="btn btn-primary">Primary</button>
你可以在这里参考按钮样式( https://getbootstrap.com/docs/4.0/components/buttons/ )
保存文件
运行项目
的 ng serve - 打开 强>
现在您将在页面中看到引导样式按钮
注意 : 如果你之后添加了bootstrap路径 的 服务 强> ,您必须停止并重新运行ng服务以反映更改
寻找关键词&gt;全局库安装 上 https://github.com/angular/angular-cli 帮助您找到答案。
根据他们的文档,您可以采取以下步骤添加Bootstrap库。
首先从npm安装Bootstrap:
然后将所需的脚本文件添加到angular-cli.json文件中的apps [0] .scripts:
"scripts": [ "../node_modules/bootstrap/dist/js/bootstrap.js" ],
最后将Bootstrap CSS添加到apps [0] .styles数组:
"styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.css" ],
的 如果您正在运行它,请重新启动,并且Bootstrap 4应该在您的应用上运行。 强>
这是最好的解决方案。 但是,如果你不重新启动服务,它永远不会工作。强烈建议您执行此操作。
的 重要更新: 强> NG2自举 现在被替换为 NGX自举
NGX自举 支持Angular 3和4。
的 更新: 强> 1.0.0-beta.11-webpack或以上版本
首先检查你的 的 角-CLI 强> 终端中带有以下命令的版本:
ng -v
如果你的 的 角-CLI 强> 版本大于 1.0.0-beta.11-的WebPack ,那么你应该按照以下步骤:
安装 NGX自举 和 引导 :
npm install ngx-bootstrap bootstrap --save
这条线现在安装了Bootstrap 3,但将来可以安装Bootstrap 4。记住 NGX自举 支持这两个版本。
打开 的 SRC /应用程序/ app.module.ts 强> 并添加:
import { AlertModule } from 'ngx-bootstrap'; ... @NgModule({ ... imports: [AlertModule.forRoot(), ... ], ... })
打开 的 角cli.json 强> 并在中插入一个新条目 styles 数组:
打开 的 SRC /应用程序/ app.component.html 强> 并添加:
的 1.0.0-beta.10或更低版本: 强>
而且,如果你的 的 角-CLI 强> 版本是 1.0.0-beta.10 或以下,您可以使用以下步骤。
首先,转到项目目录并键入:
npm install ngx-bootstrap --save
然后,打开你的 的 角-CLI-build.js 强> 并添加此行:
vendorNpmFiles: [ ... 'ngx-bootstrap/**/*.js', ... ]
现在,打开你的 的 SRC /系统config.ts 强> 然后写:
const map:any = { ... 'ngx-bootstrap': 'vendor/ngx-bootstrap', ... }
...和:
const packages: any = { 'ngx-bootstrap': { format: 'cjs', defaultExtension: 'js', main: 'ngx-bootstrap.js' } };
安装bootstrap
2.将代码添加到.angular-cli.json:
"styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/tether/dist/js/tether.js", "../node_modules/bootstrap/dist/js/bootstrap.js" ],
最后将bootstrap.css添加到您的代码style.scss中
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
重新启动本地服务器