我们想在使用angular-cli 1.0.0-beta.5(w / node v6.1.0)生成的app中使用bootstrap 4(4.0.0-alpha.2)。
在使用npm获取引导程序及其依赖项之后,我们的第一种方法是将它们添加到angular-cli-build.js
中:
'bootstrap/dist/**/*.min.+(js|css)',
'jquery/dist/jquery.min.+(js|map)',
'tether/dist/**/*.min.+(js|css)',
并将其导入我们的index.html
<script src="vendor/jquery/dist/jquery.min.js"></script>
<script src="vendor/tether/dist/js/tether.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>
这与ng serve
一起工作正常,但是一旦我们生成了带有-prod
标记的构建,所有这些依赖关系都从dist/vendor
消失了(惊喜!)。
我们打算如何处理使用angular-cli生成的项目中的这种情况(即加载引导脚本)?
我们有以下想法,但我们真的不知道要走哪条路......
使用CDN?但我们宁愿提供这些文件以保证它们可用
在dist/vendor
之后将依赖关系复制到ng build -prod
?但这似乎是angular-cli应该提供的东西,因为它“照顾”构建部分?
在src / system-config.ts中添加jquery,bootstrap和tether,并以某种方式将它们拉入main.ts中的bundle中?但考虑到我们不打算在我们的应用程序代码中明确使用它们(例如,不像moment.js或像lodash这样的东西),这似乎是错误的
答案 0 :(得分:268)
重要更新: ng2-bootstrap 现已替换为ngx-bootstrap
ngx-bootstrap 支持Angular 3和4.
更新: 1.0.0-beta.11-webpack或更高版本
首先在终端中使用以下命令检查 angular-cli 版本:
ng -v
如果您的 angular-cli 版本大于 1.0.0-beta.11-webpack ,那么您应该按照以下步骤操作:
安装 ngx-bootstrap 和 bootstrap :
npm install ngx-bootstrap bootstrap --save
此行现在安装Bootstrap 3,但将来可以安装Bootstrap 4。请记住 ngx-bootstrap 支持这两个版本。
打开 src / app / app.module.ts 并添加:
import { AlertModule } from 'ngx-bootstrap';
...
@NgModule({
...
imports: [AlertModule.forRoot(), ... ],
...
})
打开 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>
1.0.0-beta.10或更低版本:
并且,如果 angular-cli 版本 1.0.0-beta.10 或更低版本,则可以使用以下步骤。
首先,转到项目目录并输入:
npm install ngx-bootstrap --save
然后,打开 angular-cli-build.js 并添加以下行:
vendorNpmFiles: [
...
'ngx-bootstrap/**/*.js',
...
]
现在,打开 src / system-config.ts ,然后写:
const map:any = {
...
'ngx-bootstrap': 'vendor/ngx-bootstrap',
...
}
...和
const packages: any = {
'ngx-bootstrap': {
format: 'cjs',
defaultExtension: 'js',
main: 'ngx-bootstrap.js'
}
};
答案 1 :(得分:106)
查找关键字&gt;全局库安装 在https://github.com/angular/angular-cli帮助您找到答案。
根据他们的文档,您可以采取以下步骤添加Bootstrap库。
首先从npm安装Bootstrap:
npm install bootstrap@next
然后将所需的脚本文件添加到angular-cli.json文件中的apps [0] .scripts:
"scripts": [
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
最后将Bootstrap CSS添加到apps [0] .styles array:
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],
如果您正在运行它,请重新启动,并且Bootstrap 4应该在您的应用上运行。
这是最好的解决方案。 但如果你不重新启动服务它就永远不会有效。强烈建议您执行此操作。
答案 2 :(得分:49)
执行以下操作:
npm i bootstrap@next --save
这会将bootstrap 4添加到您的项目中。
接下来转到您的src/style.scss
或src/style.css
文件(选择您正在使用的文件)并在那里导入引导程序:
对于style.css
/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
对于style.scss
/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";
对于脚本,您仍然需要在angular-cli.json文件中添加文件(在Angular版本6中,此编辑需要在 angular.json ):
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
答案 3 :(得分:28)
首先,您必须使用这些命令安装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"
]
答案 4 :(得分:20)
由于没有人提到关于如何包含Bootstrap的官方(angular-cli团队)故事:https://github.com/angular/angular-cli/wiki/stories-include-bootstrap
Bootstrap是一个流行的CSS框架,可以在Angular项目中使用。 本指南将引导您将引导程序添加到Angular CLI项目并将其配置为使用引导程序。
创建一个新项目并导航到项目
ng new my-app
cd my-app
随着新项目的创建和准备,您接下来需要将bootstrap作为依赖项安装到项目中。
使用--save
选项,依赖项将保存在package.json
# version 3.x
npm install bootstrap --save
# version 4.x
npm install bootstrap@next --save
现在项目已经设置,它必须配置为包含bootstrap CSS。
.angular-cli.json
。apps
下,该数组中的第一项是默认应用程序。styles
,允许将外部全局样式应用于您的应用程序。bootstrap.min.css
完成后,它应如下所示:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
注意:当您对.angular-cli.json
进行更改时,您需要重新启动ng serve
以获取配置更改。
打开app.component.html
并添加以下标记:
<button class="btn btn-primary">Test Button</button>
配置完应用程序后,运行ng serve
以在开发模式下运行您的应用程序。
在浏览器中,导航到应用程序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/
。
如果您使用的是bootstrap-sass
,请将以下内容添加到_variables.scss
:
$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';
在styles.scss
中添加以下内容:
// version 3
@import 'variables';
@import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';
// version 4
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';
打开app.component.html
并添加以下标记:
<button class="btn btn-primary">Test Button</button>
配置完应用程序后,运行ng serve
以在开发模式下运行您的应用程序。
在浏览器中,导航到应用程序localhost:4200
。
验证是否显示bootstrap样式按钮。
要确保使用您的变量,请打开_variables.scss
并添加以下内容:
$brand-primary: red;
返回浏览器以查看更改的字体颜色。
答案 5 :(得分:16)
更新v1.0.0-beta.26
您可以在doc上看到导入bootstrap here
的新方法如果仍然无效,请使用命令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
在 my_project / src / system-config.ts中安装ng2-bootstrap之后:
/** 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
从另一个原则相同的模块导入。
答案 6 :(得分:9)
我猜上述方法在发布后已经改变,请检查此链接
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.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
打开src / app / app.component.html并通过添加
测试所有作品<alert type="success">hello</alert>
答案 7 :(得分:7)
Angular 5中Bootstrap 4的步骤
创建Angular 5项目
ng new AngularBootstrapTest
转到项目目录
cd AngularBootstrapTest
下载bootstrap
npm install bootstrap
将Bootstrap添加到项目
4.1 open .angular-cli.json
4.2找到&#34;样式&#34; json中的部分
4.3添加bootstrap css路径如下
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
现在,您已成功在angular 5项目中添加了bootstrap css
测试bootstrap
src/app/app.component.html
<button type="button" class="btn btn-primary">Primary</button>
您可以在此处参考按钮样式(https://getbootstrap.com/docs/4.0/components/buttons/)
保存文件
运行项目
ng serve --open
现在您将在页面中看到引导样式按钮
注意: 如果您在 ng serve 之后添加了引导路径,则必须停止并重新运行ng服务以反映更改
答案 8 :(得分:6)
由于这变得如此令人困惑,而且这里的答案完全混杂,我只是建议去官方ui团队参加BS4 回购(是的,NG-Bootstrap有很多这样的回购。
只需按照https://github.com/ng-bootstrap/ng-bootstrap中的说明操作即可获得BS4。
从lib引用:
这个库是由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 {
}
这似乎是迄今为止最一致的行为
答案 9 :(得分:5)
执行以下步骤:
npm install --save bootstrap
在.angular-cli.json中,添加到样式部分:
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css"]
之后,您必须重新启动ng服务
享受
答案 10 :(得分:4)
安装bootstrap
npm install bootstrap@next
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";
重新启动本地服务器
答案 11 :(得分:3)
答案 12 :(得分:2)
在相应的项目目录中打开终端/命令提示符,然后键入以下命令。
npm install --save bootstrap
然后打开.angular-cli.json文件,查找
"styles": [
"styles.css"
],
将其更改为
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
全部完成。
答案 13 :(得分:2)
运行此命令
npm install bootstrap@3
您的Angular.json
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
答案 14 :(得分:2)
现在有了新的 ng-bootstrap 1.0.0-beta.5 版本支持大多数基于Bootstrap标记和CSS的原生Angular指令。
使用此功能所需的唯一依赖是Element enclosing = element;
while (enclosing.getKind() != ElementKind.PACKAGE) {
enclosing = enclosing.getEnclosingElement();
}
PackageElement packageElement = (PackageElement) enclosing;
。无需使用 jquery 和 popper.js 依赖项。
ng-bootstrap将完全取代组件的JavaScript实现。因此,您不需要在.angular-cli.json的脚本部分中包含bootstrap
。
在.angular-cli.json,样式部分中包含bootstrap.min.js
。
bootstrap.min.css
安装 ng-bootstrap 依赖项。
"styles": [
"styles.scss",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
将其添加到主模块类中。
npm install --save @ng-bootstrap/ng-bootstrap
在主模块导入部分中包含以下内容。
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
如果要在这些模块类中使用ng-bootstrap组件,请在子模块中执行以下操作。
@NgModule({
imports: [NgbModule.forRoot(), ...],
})
现在您的项目已准备好使用可用的ng-bootstrap组件。
答案 15 :(得分:2)
npm install ng2-bootstrap bootstrap --save
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"
],
答案 16 :(得分:2)
您还可以观看Mike Brocchi的视频,其中包含有关如何为Angular-Cli生成的项目添加引导程序的有用信息。 https://www.youtube.com/watch?v=obbdFFbjLIU(大约几分钟13:00)
答案 17 :(得分:2)
npm install --save bootstrap
npm install --save popper.js
@import '~bootstrap/dist/css/bootstrap.min.css';
答案 18 :(得分:1)
您有多种方法来add Bootstrap 4 in your Angular project:
在Angular项目的index.html文件的部分中包含带有和标记的Bootstrap CSS和JavaScript文件,
使用@import关键字将Bootstrap CSS文件导入Angular项目的全局styles.css文件中。
在项目的angular.json文件的样式和脚本数组中添加Bootstrap CSS和JavaScript文件
答案 19 :(得分:1)
您可以使用npm install bootstrap
命令以角度安装引导程序。
以及angular.json
文件和style.css
文件中的下一个设置引导程序路径。
您可以阅读有关如何在angular click here to read full blog about this
中安装和设置引导程序的完整博客。答案 20 :(得分:1)
我看到许多解决方案都无法在新版本的Angular-CLI中使用。
您可以尝试在app.component.html的顶部添加以下链接标记,在底部添加脚本标记。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
但是,如果要使用ngx-bootstrap,请在项目目录中运行以下命令
ng add ngx-bootstrap
使用以下内容作为app.component.html
的内容进行测试<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
答案 21 :(得分:1)
第一步:
npm install bootstrap@latest --save-dev
这将安装最新版本的引导程序,
但是,可以通过添加版本号来安装指定的版本
第2步:打开styles.css并添加以下内容
@import "~bootstrap/dist/css/bootstrap.css"
答案 22 :(得分:1)
2个简单步骤
npm install bootstrap@next
@import '~bootstrap';
请注意,导入顺序可能很重要,如果您还有其他使用引导程序的库,请将此导入语句放在最前面
结局。 :)
注意:以下是我的版本
角度:9
节点:v10.16.0
npm:6.9.1
答案 23 :(得分:1)
使用npm
安装Bootstrapnpm install bootstrap
2.安装Popper.js
npm install --save popper.js
3.在Angular 5项目中的 angular.json / Angular 5中的 .angular-cli.json 并添加列出的内容:
"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"
]
答案 24 :(得分:1)
使用npm
安装boostrapnpm install boostrap@next --save
然后检查你的node_modules文件夹中的boostrap.css文件(在dist中)通常路径是
"../node_modules/bootstrap/dist/css/bootstrap.css",
添加此路径|在style.css或style.scss
中导入boostrap@import "../node_modules/bootstrap/dist/css/bootstrap.css"; //bootstrap
@import "~@angular/material/prebuilt-themes/indigo-pink.css // angular material theme
就是这样。
答案 25 :(得分:1)
使用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"
],
答案 26 :(得分:1)
angular-cli
现在有一个专门的wiki page,您可以在其中找到所需的一切。 TLDR,通过bootstrap
安装npm
,并将样式链接添加到&#34; styles&#34;您.angular-cli.json
文件中的部分
答案 27 :(得分:0)
2020年8月更新:Angular 10
“如果您有一个Angular≥9 CLI项目,则可以简单地使用我们的原理图向其中添加ng-bootstrap库。”只需在项目文件夹中运行以下命令。所有配置将自动添加。
ng add @ng-bootstrap/ng-bootstrap
ng s
示例片段:
import {Component} from '@angular/core';
@Component({selector: 'ngbd-alert-basic', templateUrl: './alert-basic.html'})
export class NgbdAlertBasic {
}
<p>
<ngb-alert [dismissible]="false">
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</ngb-alert>
</p>
答案 28 :(得分:0)
将此添加到您的styles.css文件中
@import "~bootstrap/dist/css/bootstrap.css";
答案 29 :(得分:0)
bootstrap 4.5,角度为10
npm install bootstrap --save
使用bootstrap import语句更新您的styles.scss。
$theme-colors: (
"primary": #b867c6,
"secondary": #f3e5f5,
"success": #388e3c,
"info": #00acc1,
"light": #f3e5f5,
"dark": #863895
);
@import "~bootstrap";
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
body {
color: gray('800');
background-color: theme-color('light');
font-family: 'Raleway', sans-serif;
}
导入引导程序应在变量覆盖之后。 [此示例还显示了如何放置自己的主题颜色。]
答案 30 :(得分:0)
好消息!基本上,Bootstrap 5 现在可以轻松实现,您甚至不需要 jQuery。
从您的终端,只需运行
npm install bootstrap@next --save
因此,Angular 使用 webpack,因此,在您的 app.module.ts 中,只需添加:
import "bootstrap";
或者,如果您想单独导入它们,请执行以下操作:
import { ModuleToBeImported } from 'bootstrap';
然后到你的styles.scss,添加:
@import '~bootstrap/scss/bootstrap';
基本上就是这样,但要注意某些组件需要 popper.js。 Components requiring bootstrap's js 在那里,您也会看到依赖 popper.js 的组件,在撰写本文时,它们是用于显示和定位的下拉菜单,以及用于显示和定位的工具提示和弹出框。
因此,要安装 popper.js,只需运行:
npm install @popperjs/core
答案 31 :(得分:0)
如果您刚开始使用angular和bootstrap,则可以按照以下步骤进行简单回答: 1.将bootstrap的节点程序包添加为dev依赖项
npm install --save bootstrap
在angular.json文件中导入引导样式表。
"styles": [
"projects/my-app/src/styles.scss",
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
],
,您就可以使用引导程序进行样式设计,网格等了。
<div class="container">My first bootstrap div</div>
我发现的最好的部分是,我们正在使用引导程序进行引导,而没有任何第三方模块依赖性。我们可以随时通过更新命令npm install --save bootstrap@4.4
等来升级引导程序。
答案 32 :(得分:0)
用于同时添加Bootstrap和Jquery
npm install bootstrap@3 jquery --save
运行此命令后,请继续检查您的node_modules文件夹,您应该能够看到其中添加了引导程序和jquery。
答案 33 :(得分:0)
在这里没有看到这个:
@import 'bootstrap/scss/bootstrap.scss';
我刚刚在style.scss中添加了这一行 就我而言,我还想覆盖引导变量。
答案 34 :(得分:0)
只需在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>
答案 35 :(得分:0)
使用哪个JS框架都没有关系,只需执行以下两个步骤,即可轻松将引导程序导入到项目中:
使用npm i -S bootstrap
或yarn add bootstrap
安装引导程序。
在styles.css
或styles.scss
中,将引导程序导入为@import '~bootstrap/dist/css/bootstrap.min.css'
。
答案 36 :(得分:0)
在项目内部运行以下命令
npm install --save @bootsrap@4
,如果您得到这样的确认
+ bootstrap@4.1.3
updated 1 package in 8.245s
这意味着boostrap 4已成功安装。但是,为了使用它,您需要更新angular.json文件下的“样式”数组。
以以下方式更新它,以便引导程序能够覆盖现有样式
"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。
答案 37 :(得分:0)
使用rfiList
安装引导程序。现在,转到nodemodules文件夹,然后从引导程序文件夹复制'bootstrap.min.css.js'的路径,并将完整路径(如npm i --save bootstrap@version
)粘贴到{ {1}}在脚本标记文件下,然后重新运行服务器,并检查安装是否成功,然后在您喜欢的任何浏览器中运行该程序,然后按F12键,您会发现部分窗口被打开,现在转到“元素”选项卡打开头标签,如果看到样式标签中的引导程序,则表明安装成功。
答案 38 :(得分:0)
使用angular-cli的一个工作示例:
npm i bootstrap-schematics
ng generate bootstrap-shell -c bootstrap-schematics -v 4
npm install
适用于css和scss。 Bootstrap v3和v4可用。
有关bootstrap-schematics的更多信息,请查看here。