如何在angular2中使用引导程序4?

我正在构build一个用脚本编写的angular度2应用程序。 它将使用引导4框架结合一些自定义主题,这是可能的吗?

“ng2-bootstrap”npm包不起作用,因为它不允许我使用引导css类,而是提供自定义组件。 ( http://github.com/valor-software/ng2-bootstrap )

在我的angular度2项目中,我使用的是sass,是否可以从源代码构build引导程序4,因为它也使用sass的样式?

    6 Solutions collect form web for “如何在angular2中使用引导程序4?”

    要使用任何需要JQuery的可视库,只需执行以下操作:

    • 在索引中添加库CSS;
    • 添加jquery js文件来索引;
    • 在索引中添加库js文件;
    • 安装库定义文件(d.ts);
    • 安装jQuery的定义文件(d.ts);

    如果库没有定义文件,你可以:

    • 自己创build定义;
    • 创build一个具有相同名称的库对象的全局任何variables,只是为了不会得到编译器错误;
    • 错误使用( 这是最糟糕的select );

    现在你可以使用Typescript中的库了;

    Angular2 CLI的Bootstrap4 alpha(也适用于Angular4 CLI)

    如果您使用的是angular2 cli / angular 4 cli,请执行以下操作:

     npm i bootstrap@next --save 

    这会将bootstrap 4添加到您的项目中。

    接下来转到你的src/style.scsssrc/style.css文件并在那里导入bootstrap:

    对于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"; 

    如果您正在使用scss,请确保将您的默认样式更改为.angular-cli.json

      "defaults": { "styleExt": "scss", "component": {} } 

    引导JS组件

    要使Bootstrap JS组件正常工作,您仍需要将bootstrap.js导入到scripts下的.angular-cli.json scripts (这应该会自动发生)

     ... "scripts": ["../node_modules/jquery/dist/jquery.js", "../node_modules/tether/dist/js/tether.js", "../node_modules/bootstrap/dist/js/bootstrap.js"], ... 

    更新2017/09/13: Boostrap 4 Beta现在使用popper.js而不是tether.js。 因此,根据您使用的版本,在脚本中导入tether.js(alpha)或popper.js(beta)。 感谢@MinorThreat的负责人

    上面的选项是可行的,但是我通过NPM使用这个方法:

    1. 导航到: Bootstrap 4并检索npm命令
    2. 在项目中运行从步骤1中获得的NPM命令

      npm install bootstrap@4.0.0-alpha.5 --save

    3. 在安装上面的依赖关系之后,运行下面的npm命令,它将安装引导模块npm install --save @ng-bootstrap/ng-bootstrap你可以在这里阅读更多

    4. 将以下导入添加到import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; app.module import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; 并将NgbModule添加到imports
    5. 你的应用程序模块将如下所示:

       import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; @NgModule({ declarations: [ AppComponent, WeatherComponent ], imports: [ BrowserModule, FormsModule, HttpModule, NgbModule.forRoot(), // Add Bootstrap module here. ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 
    6. 打开angular-cli.json并在样式数组中插入一个新条目:

       "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], 
    7. 打开src / app / app.component.html并添加

       <alert type="success">hello</alert> 

      或者如果您想要使用ng alert,请将以下内容放在app.component.html page

       <ngb-alert [dismissible]="true">I'm a dismissible alert :) </ngb-alert> 
    8. 现在运行您的项目,您应该在浏览器中看到引导警报消息。

    注意:您可以在这里阅读关于ng组件的更多信息

    我会build议:

    • 只需在index.html页面中包含Bootstrap CSS文件的链接即可
    • 使用ng-bootstrap – 需要dynamic行为的部分的专用Angular 2指令集。 这样你就不需要导入/设置jQuery,也不需要关心Bootstrap的JavaScript。

    首先转到您的项目目录,并按照下面给出的步骤。

    1) npm install --save @ng-bootstrap/ng-bootstrap (在节点js命令提示符下运行这个命令)

    2) npm install bootstrap@4.0.0-alpha.6 (下次运行这个)

    3) import {NgbModule} from '@ng-bootstrap/ng-bootstrap' (在app module.ts中写入)

    4)如果Module是你的根模块包含这个

     `@NgModule({ declarations: [AppComponent, ...], imports: [NgbModule.forRoot(), ...], bootstrap: [AppComponent] })` (or) 

    如果没有root模块

     `@NgModule({ declarations: [OtherComponent, ...], imports: [NgbModule, ...] })` 

    5)写在system.config.js中

     `map: { '@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng- bootstrap/bundles/ng-bootstrap.js', }` 

    6)添加在Index.html中

     `<script src="../node_modules/jquery/dist/jquery.min.js"></script> <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="../node_modules/bootstrap/dist/css/bootstrap.min.css" />` 

    您可以使用npm来安装最新的引导版本。 这可以使用命令完成:

     npm install bootstrap@4.0.0-beta 

    在此之后,您可能必须将bootstrap.css导入您的主要css文件。 如果你正在使用angular-cli,那将是styles.css。

     @import '~bootstrap/dist/css/bootstrap.min.css'; 

    如果您想了解更多信息,请使用链接: http : //technobytz.com/install-bootstrap-4-using-npm.html