如何在Angular项目中使用Bootstrap?

我正在开始我的第一个Angular应用程序,我的基本设置已完成 .

如何将Bootstrap添加到我的应用程序中?

如果你能提供一个例子,那将是一个很大的帮助 .

回答(17)

2 years ago

如果您使用 Angular-CLI 生成新项目,还有另一种方法可以在 Angular 2/4 中访问引导程序 .

  • 通过命令行界面导航到项目文件夹 . 然后使用 npm 安装bootstrap:
    $ npm install --save bootstrap . --save 选项将使引导程序出现在依赖项中 .

  • 编辑.angular-cli.json文件,该文件用于配置项目 . 它在项目目录中 . 添加对 "styles" 数组的引用 . 引用必须是使用npm下载的引导程序文件的相对路径 . 在我的情况下它是: "../node_modules/bootstrap/dist/css/bootstrap.min.css",

My example .angular-cli.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "bootstrap-test"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

现在bootstrap应该是默认设置的一部分 .

2 years ago

通过 ng2-bootstrap 项目也可以与Angular2集成:https://github.com/valor-software/ng2-bootstrap .

要安装它,只需将这些文件放在主HTML页面中:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

然后,您可以通过这种方式将其用于组件:

import {Component} from 'angular2/core';
import {Alert} from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'my-app',
  directives: [Alert],
  template: `<alert type="info">ng2-bootstrap hello world!</alert>`
})
export class AppComponent {
}

2 years ago

您需要做的就是在index.html文件中包含boostrap css .

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

2 years ago

另一个非常好(更好?)的替代方案是使用由angular-ui团队创建的一组小部件:https://ng-bootstrap.github.io

2 years ago

如果你计划使用此线程中提到的angular-ui团队的ng-bootstrap所需的Bootstrap 4,那么你需要包含JS文件):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

假设您正在使用SASS,您还可以通过指向 styles.scss 文件中的文件运行 npm install bootstrap@4.0.0-alpha.6 --save 后在本地引用此内容:

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

2 years ago

最流行的选择是使用一些分发为npm包的第三方库,如ng2-bootstrap project https://github.com/valor-software/ng2-bootstrap或Angular UI Bootstrap库 .

我个人使用ng2-bootstrap . 有许多方法可以配置它,因为配置取决于Angular项目的构建方式 . 下面我发布基于Angular 2 QuickStart项目的示例配置https://github.com/angular/quickstart

首先,我们在package.json中添加依赖项

{ ...
"dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",

    ...

    "bootstrap": "^3.3.7",
    "ng2-bootstrap": "1.1.16-11"
  },
... }

然后我们必须将名称映射到systemjs.config.js中的正确URL

(function (global) {
  System.config({
    ...
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      //bootstrap
      'moment': 'npm:moment/bundles/moment.umd.js',
      'ng2-bootstrap': 'npm:ng2-bootstrap/bundles/ng2-bootstrap.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
...
  });
})(this);

我们必须在index.html中导入bootstrap .css文件 . 我们可以从我们硬盘上的/ node_modules / bootstrap目录(因为我们添加了bootstrap 3.3.7依赖)或从web获取它 . 我们从网上获取它:

<!DOCTYPE html>
<html>
  <head>
    ...
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    ...
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

我们应该从/ app目录编辑我们的app.module.ts文件

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

//bootstrap alert import part 1
import {AlertModule} from 'ng2-bootstrap';

import { AppComponent }  from './app.component';


@NgModule({
  //bootstrap alert import part 2
  imports:      [ BrowserModule, AlertModule.forRoot() ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

最后是来自/ app目录的app.component.ts文件

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <alert type="success">
        Well done!
    </alert>
    `
})

export class AppComponent {

    constructor() { }

}

然后我们必须在运行我们的应用程序之前安装我们的bootstrap和ng2-bootstrap依赖项 . 我们应该去我们的项目目录并输入

npm install

最后,我们可以启动我们的应用

npm start

ng2-bootstrap项目github上有许多代码示例,展示了如何将ng2-bootstrap导入到各种Angular 2项目构建中 . 甚至有plnkr样本 . 还有关于Valor软件(图书馆作者)网站的API文档 .

2 years ago

在angular-cli环境中,我发现最直接的方法如下:

1. Solution in an environment with s̲c̲s̲s̲ stylesheets

npm install bootstrap-sass —save

在style.scss中:

$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/bootstrap';

注意1: ~ 字符是对nodes_modules文件夹的引用 .
注2:由于我们使用scss,我们可以自定义我们想要的所有boostrap变量 .

2. Solution in an environment with c̲s̲s̲ stylesheets

npm install bootstrap —save

在style.css中:

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

2 years ago

有几种方法可以使用Bootstrap配置angular2,其中一个最完整的方法就是使用ng-bootstrap,使用这个配置我们给algular2完全控制我们的DOM,避免使用JQuery和Boostrap .js文件 .

1 - 以Angular-CLI创建的新项目为起点,并使用命令行安装ng-bootstrap:

npm install @ng-bootstrap/ng-bootstrap --save

注意:更多信息,请致电https://ng-bootstrap.github.io/#/getting-started

2 - 然后我们需要为css和网格系统安装bootstrap .

npm install bootstrap@4.0.0-beta.2 --save

注意:更多信息,请致电https://getbootstrap.com/docs/4.0/getting-started/download/

现在我们已经设置了环境,为此我们必须更改.angular-cli.json添加到样式:

"../node_modules/bootstrap/dist/css/bootstrap.min.css"

这是一个例子:

"apps": [
    {
      "root": "src",
        ...
      ],
      "index": "index.html",
       ...
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ]

下一步是将ng-boostrap模块添加到我们的项目中,为此我们需要添加app.module.ts:

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

然后将新模块添加到应用程序应用程序:NgbModule.forRoot()

例:

@NgModule({
  declarations: [
    AppComponent,
    AppNavbarComponent
  ],
  imports: [
    BrowserModule,
    NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})

现在我们可以在angular2 / 5项目上开始使用bootstrap4了 .

2 years ago

我有同样的问题,发现这篇文章有一个非常干净的解决方案:

http://leon.radley.se/2017/01/angular-cli-and-bootstrap-4/

这里有说明,但我的简化解决方案:

安装Bootstrap 4(instructions):

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

如果需要,请将 src/styles.css 重命名为 styles.scss 并更新 .angular-cli.json 以反映更改:

"styles": [
  "styles.scss"
],

然后将此行添加到 styles.scss

@import '~bootstrap/scss/bootstrap';

2 years ago

只需检查您的package.json文件并添加bootstrap的依赖项

"dependencies": {

   "bootstrap": "^3.3.7",
}

然后在 .angular-cli.json 文件中添加以下代码

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

最后,您只需使用终端在本地更新您的npm

$ npm update

2 years ago

  • npm install --save bootstrap

  • 转到 - > angular-cli.json 文件,找到样式属性,然后添加下一个sting:"../node_modules/bootstrap/dist/css/bootstrap.min.css",它可能如下所示:

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

2 years ago

我正在寻找相同的答案,最后我找到了这个链接 . 您可以找到三种不同的方法来解释如何将bootstrap css添加到angular 2项目中 . 它帮助了我 .

这是链接:http://codingthesmartway.com/using-bootstrap-with-angular/

2 years ago

使用Angular 6和Bootstrap 4的过程:

  • 在项目文件夹上打开一个shell

  • 使用以下命令安装bootstrap: npm install --save bootstrap@4.1.3

  • Bootstrap需要依赖关系jquery,所以如果你没有它,可以使用以下命令安装它: npm install --save jquery 1.9.1

  • 您可能需要使用以下命令修复漏洞: npm audit fix

  • 在主style.scss文件中,添加以下行: @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

要么

将此行添加到主index.html文件中: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

2 years ago

您可以尝试使用Prettyfox UI库http://ng.prettyfox.org

这个库使用bootstrap 4样式而不需要jquery .

2 years ago

在html页面中添加以下行

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

2 years ago

如果你使用angular cli,在将bootstrap添加到package.json并安装包后,你只需要将boostrap.min.css添加到.angular-cli.json的“styles”部分 .

一个重要的事情是“当您对.angular-cli.json进行更改时,您需要重新启动服务以获取配置更改 . ”

参考:

https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

2 years ago

另一个非常好的选择是使用skeleton Angular 2/4 + Bootstrap 4

1)下载ZIP并解压缩zip文件夹

2)服务