PROSAGA码农传奇-Bootstrap-如何将bootstrap添加到angular-cli项目中

26 条回复

0#
回复此人
满目山河 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在项目中运行以下命令 </p> <pre> <code> npm install --save @bootsrap@4 </code> </pre> <P> 如果你得到这样的确认 </p> <pre> <code> + bootstrap@4.1.3 updated 1 package in 8.245s </code> </pre> <P> 这意味着成功安装了boostrap 4。但是，为了使用它，您需要更新angular.json文件下的“styles”数组。 </p> <P> 按以下方式更新它，以便引导程序能够覆盖现有样式 </p> <pre> <code> "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ], </code> </pre> <P> 要确保正确设置所有内容，请运行 <code> 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 </code> 那么你很高兴使用boostrap。 <a href="https://i.stack.imgur.com/V2GGK.png" rel="nofollow noreferrer"> <img src =“https://i.stack.imgur.com/V2GGK.png”alt =“在此处输入图片说明”/> </A> </p> </DIV>

编辑
1#
回复此人
一只特立独行的猪 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 只需在index.html的Head标记中添加这三行 </p> <pre> <code> <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> </code> </pre> </DIV>

编辑
2#
回复此人
哈哈哈哈 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 试试这个 </p> <pre> <code> npm install bootstrap@next </code> </pre> <P> <a href="https://github.com/angular/angular-cli#global-library-installation" rel="nofollow noreferrer"> https://github.com/angular/angular-cli#global-library-installation </A> </p> </DIV>

编辑
3#
回复此人
Moso31 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> <code> angular-cli </code> 现在有一个专门的 <a href="https://github.com/angular/angular-cli/wiki/stories-include-bootstrap" rel="nofollow noreferrer"> 维基页面 </A> 在那里你可以找到你需要的一切。 TLDR，安装 <code> bootstrap </code> 通过 <code> npm </code> 并将样式链接添加到您的“样式”部分 <code> .angular-cli.json </code> 文件 </p> </DIV>

编辑
4#
回复此人
我头上有犄角 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <OL> <LI> 安装bootstrap，popper.js </LI> </醇> <P> <code> npm install --save bootstrap </code> <code> npm install --save popper.js </code> </p> <ol start =“3”> <LI> 在的<strong> SRC / Styles.css中 </强> ，导入bootstrap的风格 </LI> </醇> <P> <code> @import '~bootstrap/dist/css/bootstrap.min.css'; </code> </p> </DIV>

编辑
5#
回复此人
筱梨 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 的<strong> 更新v1.0.0-beta.26 </强> </p> <P> 您可以在doc上看到导入引导程序的新方法 <a href="https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md" rel="nofollow noreferrer"> 这里 </A> </p> <P> 如果仍然无效，请使用命令ng serve重新启动 </p> <P> 的<strong> 1.0.0或更低版本： </强> </p> <P> 在index.html文件中，您只需要bootstrap css链接（不需要js脚本） </p> <pre> <code> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> </code> </pre> <P> 和 </p> <pre> <code> npm install ng2-bootstrap --save npm install moment --save </code> </pre> <P> 安装完毕后 <a href="https://github.com/valor-software/ng2-bootstrap" rel="nofollow noreferrer"> NG2自举 </A> 在的<strong> my_project / src / system-config.ts： </强> </p> <pre> <code> /** 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' } }; </code> </pre> <P> 并在的<strong> my_project / angular-cli-build.js： </强> </p> <pre> <code> module.exports = function (defaults) { return new Angular2App(defaults, { vendorNpmFiles: [ 'ng2-bootstrap/**/*', 'moment/moment.js' ] }); }; </code> </pre> <P> 的<strong> 不要忘记这个命令将您的模块放入供应商： </强> </p> <pre> <code> ng build </code> </pre> <P> 从另一个原理相同的模块导入。 </p> </DIV>

编辑
6#
回复此人
听风～ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 由于这变得如此令人困惑，这里的答案完全混杂，我只是建议去的<strong> BS4官方ui团队 </强> repo（是的，有很多这样的回收用于NG-Bootstrap。 </p> <P> 请按照此处的说明操作 <a href="https://github.com/ng-bootstrap/ng-bootstrap" rel="noreferrer"> https://github.com/ng-bootstrap/ng-bootstrap </A> 获得BS4。 </p> <P> 从lib引用： </p> <BLOCKQUOTE> <P> 这个库是由ui-bootstrap团队从头开始构建的。我们正在使用TypeScript并瞄准Bootstrap 4 CSS框架。 </p> <P> 与Bootstrap 4一样，此库正在进行中。请检查在我们的问题列表中查看我们正在实施的所有内容。感觉可以在那里发表评论。 </p> </BLOCKQUOTE> <P> 只是复制粘贴那里的东西： </p> <pre> <code> npm install --save @ng-bootstrap/ng-bootstrap </code> </pre> <P> 安装完成后，您需要导入我们的主模块： </p> <pre> <code> import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; </code> </pre> <P> 剩下的唯一部分是在应用程序模块中列出导入的模块。对于根（顶级）模块，确切的方法将略有不同，您应该以类似于（注意NgbModule.forRoot（））的代码结束： </p> <pre> <code> import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; @NgModule({ declarations: [AppComponent, ...], imports: [NgbModule.forRoot(), ...], bootstrap: [AppComponent] }) export class AppModule { } </code> </pre> <P> 您的应用程序中的其他模块可以简单地导入NgbModule： </p> <pre> <code> import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; @NgModule({ declarations: [OtherComponent, ...], imports: [NgbModule, ...], }) export class OtherModule { } </code> </pre> <P> 到目前为止，这似乎是最一致的行为 </p> </DIV>

编辑
7#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 使用angular-cli时的一个工作示例： </p> <pre> <code> npm i bootstrap-schematics ng generate bootstrap-shell -c bootstrap-schematics -v 4 npm install </code> </pre> <P> 适用于CSS和scss。 Bootstrap v3和v4可用。 </p> <P> 有关bootstrap-schematics的更多信息，请参阅 <a href="https://github.com/slupekdev/bootstrap-schematics/blob/master/src/shell/README.md" rel="nofollow noreferrer"> 这里 </A> 。 </p> </DIV>

编辑
8#
回复此人
敢嫁就敢娶 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <OL> <LI> <P> 使用npm安装Bootstrap </p> <pre> <code> npm install bootstrap </code> </pre> </LI> </醇> <P> 2.安装Popper.js </p> <pre> <code> npm install --save popper.js </code> </pre> <P> 3.Goto 的<strong> angular.json </强> 在Angular 6项目/ 的<strong> .angular-cli.json </强> 在Angular 5中添加列出的： </p> <pre> <code> "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" ] </code> </pre> </DIV>

编辑
9#
回复此人
無口君 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 使用安装bootstrap <code> npm i --save bootstrap@version </code> 。现在，转到nodemodules文件夹并从bootstrap文件夹复制'bootstrap.min.css.js'的路径并粘贴完整路径（如 <code> nodemodules/bootstrap/css/bootstrap.min.css.js </code> ）in <code> angular.json </code> 在脚本标记文件下重新运行服务器并检查安装是否成功在任何你喜欢的浏览器中运行程序并按F12你会发现窗口的一部分被打开，现在转到元素选项卡打开head标签和如果您在样式标记中看到bootstrap，那么您的安装就会成功。 </p> </DIV>

编辑
10#
回复此人
机器设备维修 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 现在有了新的的<strong> ng-bootstrap 1.0.0-beta.5 </强> version支持基于Bootstrap标记和CSS的大多数原生Angular指令。 </p> <P> 使用它的唯一依赖是 <code> bootstrap </code> 。不需要使用的<strong> jQuery的 </强> 和的<strong> popper.js </强> 依赖。 </p> <P> ng-bootstrap将完全取代组件的JavaScript实现。所以你不需要包括 <code> bootstrap.min.js </code> 在.angular-cli.json的scripts部分中。 </p> <P> 使用angular-cli最新版本将引导程序与生成的项目集成时，请执行以下步骤。 </p> <UL> <LI> <P> Inculde <code> bootstrap.min.css </code> 在.angular-cli.json中，样式部分。 </p> <pre> <code> "styles": [ "styles.scss", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], </code> </pre> </LI> <LI> <P> 安装的<strong> NG-引导 </强> 依赖。 </p> <pre> <code> npm install --save @ng-bootstrap/ng-bootstrap </code> </pre> </LI> <LI> <P> 将其添加到主模块类。 </p> <pre> <code> import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; </code> </pre> </LI> <LI> <P> 在主模块导入部分中包含以下内容。 </p> <pre> <code> @NgModule({ imports: [NgbModule.forRoot(), ...], }) </code> </pre> </LI> <LI> <P> 如果要在这些模块类中使用ng-bootstrap组件，请在子模块中执行以下操作。 </p> <pre> <code> import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; @NgModule({ imports: [NgbModule, ...], }) </code> </pre> </LI> <LI> <P> 现在您的项目已准备好使用可用的ng-bootstrap组件。 </p> </LI> </UL> </DIV>

编辑
11#
回复此人
绵绵 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 首先，您必须使用这些命令安装tether，jquery和bootstrap </p> <pre> <code> npm i -S tether npm i -S jquery npm i -S bootstrap@4.0.0-alpha.4 </code> </pre> <P> 在angular-cli.json（从版本6开始的angular.json）文件中添加这些行之后 </p> <pre> <code> "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" ] </code> </pre> </DIV>

编辑
12#
回复此人
樱花弄๑•ั็•็ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 执行以下步骤： </p> <OL> <LI> <P> <code> npm install --save bootstrap </code> </p> </LI> <LI> <P> 在.angular-cli.json中，添加到样式部分： </p> </LI> </醇> <P> <code> "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css"] </code> </p> <P> 之后，您必须重新启动ng服务 </p> <P> 请享用 </p> </DIV>

编辑
13#
回复此人
子阳 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在相应的项目目录中打开终端/命令提示符并键入以下命令。 </p> <pre> <code> npm install --save bootstrap </code> </pre> <P> 然后打开.angular-cli.json文件，查找 </p> <P> <code> "styles": [ "styles.css" ], </code> </p> <P> 改变为 </p> <pre> <code> "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ], </code> </pre> <P> 全部完成。 </p> </DIV>

编辑
14#
回复此人
哎？小查查 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您还可以通过Mike Brocchi观看此视频，其中包含有关如何向Angular-Cli生成的项目添加引导程序的有用信息。 <a href="https://www.youtube.com/watch?v=obbdFFbjLIU" rel="nofollow"> https://www.youtube.com/watch?v=obbdFFbjLIU </A> （大约几分钟13:00） </p> </DIV>

编辑
15#
回复此人
冷月如霜·胡狼 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 由于没有人提到关于如何包含Bootstrap的官方（angular-cli团队）故事： <a href="https://github.com/angular/angular-cli/wiki/stories-include-bootstrap" rel="noreferrer"> https://github.com/angular/angular-cli/wiki/stories-include-bootstrap </A> </p> <H1> 包括 <a href="http://getbootstrap.com/" rel="noreferrer"> 引导 </A> </H1> <P> <a href="http://getbootstrap.com/" rel="noreferrer"> 引导 </A> 是一个流行的CSS框架，可以在Angular项目中使用。本指南将引导您向Angular CLI项目添加引导程序并将其配置为使用引导程序。 </p> <H2> 使用CSS </H2> <H3> 入门 </H3> <P> 创建一个新项目并导航到该项目 </p> <pre> <code> ng new my-app cd my-app </code> </pre> <H3> 安装Bootstrap </H3> <P> 随着新项目的创建和准备，您接下来需要将bootstrap作为依赖项安装到项目中。使用 <code> --save </code> 选项依赖项将保存在package.json中 </p> <pre> <code> # version 3.x npm install bootstrap --save # version 4.x npm install bootstrap@next --save </code> </pre> <H3> 配置项目 </H3> <P> 现在项目已设置，必须将其配置为包含引导程序CSS。 </p> <UL> <LI> 打开文件 <code> .angular-cli.json </code> 从项目的根目录。 </LI> <LI> 根据财产 <code> apps </code> 该数组中的第一项是默认应用程序。 </LI> <LI> 有一个属性 <code> styles </code> 它允许将外部全局样式应用于您的应用程序。 </LI> <LI> 指定路径 <code> bootstrap.min.css </code> </LI> </UL> <P> 完成后，它应如下所示： </p> <pre> <code> "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ], </code> </pre> <P> 的<strong> 注意： </强> 当您进行更改时 <code> .angular-cli.json </code> 你需要重新开始 <code> ng serve </code> 获取配置更改。 </p> <H3> 测试项目 </H3> <P> 打开 <code> app.component.html </code> 并添加以下标记： </p> <pre> <code> <button class="btn btn-primary">Test Button</button> </code> </pre> <P> 配置应用程序后，运行 <code> ng serve </code> 在开发模式下运行您的应用程序。在浏览器中导航到应用程序 <code> localhost:4200 </code> 。验证是否显示bootstrap样式按钮。 </p> <H2> 使用SASS </H2> <H3> 入门 </H3> <P> 创建一个新项目并导航到该项目 </p> <pre> <code> ng new my-app --style=scss cd my-app </code> </pre> <H3> 安装Bootstrap </H3> <pre> <code> # version 3.x npm install bootstrap-sass --save # version 4.x npm install bootstrap@next --save </code> </pre> <H3> 配置项目 </H3> <P> 创建一个空文件 <code> _variables.scss </code> 在 <code> src/ </code> 。 </p> <P> 如果你正在使用 <code> bootstrap-sass </code> ，添加以下内容 <code> _variables.scss </code> ： </p> <pre> <code> $icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/'; </code> </pre> <P> 在 <code> styles.scss </code> 添加以下内容： </p> <pre> <code> // version 3 @import 'variables'; @import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap'; // version 4 @import 'variables'; @import '../node_modules/bootstrap/scss/bootstrap'; </code> </pre> <H3> 测试项目 </H3> <P> 打开 <code> app.component.html </code> 并添加以下标记： </p> <pre> <code> <button class="btn btn-primary">Test Button</button> </code> </pre> <P> 配置应用程序后，运行 <code> ng serve </code> 在开发模式下运行您的应用程序。在浏览器中导航到应用程序 <code> localhost:4200 </code> 。验证是否显示bootstrap样式按钮。确保您的变量被打开使用 <code> _variables.scss </code> 并添加以下内容： </p> <pre> <code> $brand-primary: red; </code> </pre> <P> 返回浏览器以查看更改的字体颜色。 </p> </DIV>

编辑
16#
回复此人
一瓶泡沫 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 步骤1： <BR/> <code> npm install bootstrap@latest --save-dev </code> 这将安装最新版本的bootstrap，但是，可以通过添加版本号来安装指定的版本 </p> <P> 第2步：打开styles.css并添加以下内容 <code> @import "~bootstrap/dist/css/bootstrap.css" </code> </p> </DIV>

编辑
17#
回复此人
至此 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在使用angular-cli和css的情况下的工作示例： </p> <P> 1.install bootstrap </p> <P> npm install bootstrap tether jquery --save </p> <P> 2.add to .angular-cli.json </p> <pre> <code> "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" ], </code> </pre> </DIV>

编辑
18#
回复此人
trpnest | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我猜上面的方法在发布后发生了变化，请检查此链接 </p> <P> <a href="https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md" rel="noreferrer"> https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md </A> </p> <P> 的<strong> 启动项目 </强> </p> <pre> <code> npm i -g angular-cli ng new my-app cd my-app ng serve npm install --save @ng-bootstrap/ng-bootstrap </code> </pre> <P> 的<strong> 安装ng-bootstrap和bootstrap </强> </p> <pre> <code> npm install ng2-bootstrap bootstrap --save </code> </pre> <P> 的<strong> 打开src / app / app.module.ts并添加 </强> </p> <pre> <code> import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap'; ... @NgModule({ ... imports: [AlertModule, ... ], ... }) </code> </pre> <P> 的<strong> 打开angular-cli.json并在styles数组中插入一个新条目 </强> </p> <pre> <code> "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], </code> </pre> <P> 的<strong> 打开src / app / app.component.html并通过添加测试所有工作 </强> </p> <pre> <code> <alert type="success">hello</alert> </code> </pre> </DIV>

编辑
19#
回复此人
那年 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <OL> <LI> 在bash中运行 <code> npm install ng2-bootstrap bootstrap --save </code> </LI> <LI> 添加/更改以下内容 <code> angular-cli.json </code> <BR/> <code> "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" ], </code> </LI> </醇> </DIV>

编辑
20#
回复此人
岁爵 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 使用哪个JS框架并不重要，通过以下两个步骤将引导程序导入项目很容易： </p> <P> 使用安装bootstrap <code> npm i -S bootstrap </code> 要么 <code> yarn add bootstrap </code> 。 </p> <P> 在 <code> styles.css </code> 要么 <code> styles.scss </code> ，导入bootstrap as <code> @import '~bootstrap/dist/css/bootstrap.min.css' </code> 。 </p> </DIV>

编辑
21#
回复此人
那月静好 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <BLOCKQUOTE> <P> 的<strong> Angular 5中的Bootstrap 4的步骤 </强> </p> </BLOCKQUOTE> <OL> <LI> <P> 创建Angular 5项目 </p> <P> 的<strong> 新的AngularBootstrapTest </强> </p> </LI> <LI> <P> 移至项目目录 </p> <P> 的<strong> cd AngularBootstrapTest </强> </p> </LI> <LI> <P> 下载bootstrap </p> <P> 的<strong> npm安装bootstrap </强> </p> </LI> <LI> <P> 将Bootstrap添加到项目中 </p> <P> 4.1打开.angular-cli.json </p> <P> 4.2找到json中的“styles”部分 </p> <P> 4.3添加bootstrap css路径如下 </p> <P> 。 </p> <pre> <code> "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ], </code> </pre> </LI> </醇> <BLOCKQUOTE> <P> 现在，您已成功在angular 5项目中添加了bootstrap css </p> </BLOCKQUOTE> <P> 的<strong> 测试引导程序 </强> </p> <ol start =“5”> <LI> 打开 <code> src/app/app.component.html </code> </LI> <LI> 添加引导按钮组件 </LI> </醇> <P> 。 </p> <pre> <code> <button type="button" class="btn btn-primary">Primary</button> </code> </pre> <P> 你可以在这里参考按钮样式（ <a href="https://getbootstrap.com/docs/4.0/components/buttons/" rel="noreferrer"> https://getbootstrap.com/docs/4.0/components/buttons/ </A> ） </p> <ol start =“7”> <LI> <P> 保存文件 </p> </LI> <LI> <P> 运行项目 </p> <P> 的<strong> ng serve - 打开 </强> </p> </LI> </醇> <P> 现在您将在页面中看到引导样式按钮 </p> <P> 注意：如果你之后添加了bootstrap路径的<strong> 服务 </强> ，您必须停止并重新运行ng服务以反映更改 </p> </DIV>

编辑
22#
回复此人
夏花 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 寻找关键词＆gt;全局库安装上 <a href="https://github.com/angular/angular-cli"> https://github.com/angular/angular-cli </A> 帮助您找到答案。 </p> <P> 根据他们的文档，您可以采取以下步骤添加Bootstrap库。 </p> <P> 首先从npm安装Bootstrap： </p> <pre> <code> npm install bootstrap@next </code> </pre> <P> 然后将所需的脚本文件添加到angular-cli.json文件中的apps [0] .scripts： </p> <pre> <code> "scripts": [ "../node_modules/bootstrap/dist/js/bootstrap.js" ], </code> </pre> <P> 最后将Bootstrap CSS添加到apps [0] .styles数组： </p> <pre> <code> "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.css" ], </code> </pre> <P> 的<strong> 如果您正在运行它，请重新启动，并且Bootstrap 4应该在您的应用上运行。 </强> </p> <P> 这是最好的解决方案。但是，如果你不重新启动服务，它永远不会工作。强烈建议您执行此操作。 </p> </DIV>

编辑
23#
回复此人
生如夏花 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 的<strong> 重要更新： </强> <EM> NG2自举 </EM> 现在被替换为 <a href="https://github.com/valor-software/ngx-bootstrap" rel="noreferrer"> NGX自举 </A> </p> <P> <EM> NGX自举 </EM> 支持Angular 3和4。 </p> <P> 的<strong> 更新： </强> 1.0.0-beta.11-webpack或以上版本 </p> <P> 首先检查你的的<strong> 角-CLI </强> 终端中带有以下命令的版本： </p> <pre> <code> ng -v </code> </pre> <P> 如果你的的<strong> 角-CLI </强> 版本大于 <EM> 1.0.0-beta.11-的WebPack </EM> ，那么你应该按照以下步骤： </p> <OL> <LI> <P> 安装 <EM> NGX自举 </EM> 和 <EM> 引导 </EM> ： </p> <pre> <code> npm install ngx-bootstrap bootstrap --save </code> </pre> </LI> </醇> <P> 这条线现在安装了Bootstrap 3，但将来可以安装Bootstrap 4。记住 <EM> NGX自举 </EM> 支持这两个版本。 </p> <ol start =“2”> <LI> <P> 打开的<strong> SRC /应用程序/ app.module.ts </强> 并添加： </p> <pre> <code> import { AlertModule } from 'ngx-bootstrap'; ... @NgModule({ ... imports: [AlertModule.forRoot(), ... ], ... }) </code> </pre> </LI> <LI> <P> 打开的<strong> 角cli.json </强> 并在中插入一个新条目 <code> styles </code> 数组： </p> <pre> <code> "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], </code> </pre> </LI> <LI> <P> 打开的<strong> SRC /应用程序/ app.component.html </强> 并添加： </p> <pre> <code> <alert type="success">hello</alert> </code> </pre> </LI> </醇> <P> 的<strong> 1.0.0-beta.10或更低版本： </强> </p> <P> 而且，如果你的的<strong> 角-CLI </强> 版本是 <EM> 1.0.0-beta.10 </EM> 或以下，您可以使用以下步骤。 </p> <P> 首先，转到项目目录并键入： </p> <pre> <code> npm install ngx-bootstrap --save </code> </pre> <P> 然后，打开你的的<strong> 角-CLI-build.js </强> 并添加此行： </p> <pre> <code> vendorNpmFiles: [ ... 'ngx-bootstrap/**/*.js', ... ] </code> </pre> <P> 现在，打开你的的<strong> SRC /系统config.ts </强> 然后写： </p> <pre> <code> const map:any = { ... 'ngx-bootstrap': 'vendor/ngx-bootstrap', ... } </code> </pre> <P> ...和： </p> <pre> <code> const packages: any = { 'ngx-bootstrap': { format: 'cjs', defaultExtension: 'js', main: 'ngx-bootstrap.js' } }; </code> </pre> </DIV>

编辑
24#
回复此人
部落用户 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <OL> <LI> <P> 安装bootstrap </p> <pre> <code> npm install bootstrap@next </code> </pre> </LI> </醇> <P> 2.将代码添加到.angular-cli.json： </p> <pre> <code> "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" ], </code> </pre> <ol start =“3”> <LI> <P> 最后将bootstrap.css添加到您的代码style.scss中 </p> <pre> <code> @import "../node_modules/bootstrap/dist/css/bootstrap.min.css"; </code> </pre> </LI> <LI> <P> 重新启动本地服务器 </p> </LI> </醇> </DIV>

编辑

登录后才能参与评论