如何在一个有角度的项目中使用自举？

我开始我的第一个 角度应用程序和我的基本设置完成。

如何将 鞋带添加到应用程序中？

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

191901 次浏览
小开

您所需要做的就是在 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">
小开

还可以通过 Ng2-bootstrap项目 https://github.com/valor-software/ng2-bootstrap与 Angular2进行集成。

要安装它，只需把这些文件放在你的主 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 {
}
小开

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

小开

最流行的选择是使用一些以 npm 包形式发布的第三方库，如 ng2-Bootstrap 项目 https://github.com/valor-software/ng2-bootstrap或 Angular UI Bootstrap 库。

我个人使用 ng2-bootstrap。有许多方法可以配置它，因为配置取决于如何构建 Angular 项目。下面我后面的例子配置基于角2快速启动项目 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 中的 css 文件。我们可以从硬盘上的/node _ module/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-software (图书馆作者)网站的 API 文档。

小开

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

这个库使用 bootstrap 4样式，不需要 jquery。

小开

如果你打算使用 Bootstrap 4，这是在这个线程中提到的 angle-ui 团队的 鞋带所需要的，你会想要使用这个代替(注意: 你不需要包含 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">

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

@import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
小开
最佳答案

如果您使用 角度 CLI来生成新的项目，那么还有另一种方法可以使引导程序在 角度2/4中可访问。

  1. 通过命令行界面导航到项目文件夹。然后使用 Npm安装引导程序:
    --save选项将使引导程序出现在依赖项中。
  2. 编辑。角斜肌。Json 文件，它配置您的项目。在项目目录里。添加对 "styles"数组的引用。引用必须是通过 npm 下载的引导文件的相对路径。对我来说是 "../node_modules/bootstrap/dist/css/bootstrap.min.css",

我的例子:

{
"$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": {}
}
}

现在引导程序应该是默认设置的一部分。

小开

在 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">
小开

我一直在寻找同样的答案，最后我找到了这个链接。您可以找到三种不同的方法来解释如何添加引导 CSS 到您的角2项目。它帮助了我。

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

小开

在角-斜面环境中，我发现最直接的方法如下:


1. 使用 s s 样式表的环境中的解决方案

npm install bootstrap-sass —save

在 style.scss:

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

注1: ~字符是对 节点 _ 模块文件夹的引用。
注2: 因为我们使用的是 scss，所以我们可以定制所有我们想要的 boostrap 变量。


2. 使用 c s 样式表的环境中的解决方案

npm install bootstrap —save

在 style.css 中:

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

如果使用 angle cli，在将 bootstrap 添加到 package.json 并安装包之后，只需将 boostrap.min.css 添加到。角斜肌。Json 的“时尚”部分。

一件重要的事情是“当你对。角斜肌。Json，你需要重新启动 ng 服务来获取配置变化。”

参考:

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

小开

另一个非常好的选择是使用 骨架角2/4 + 自助4

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

2)发球

小开

我也有同样的问题，并且找到了一个非常简洁的解决方案:

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

下面是说明，但是用我的简化解决方案:

安装 Bootstrap 4(指示) :

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

如果需要，将 Src/styles.css重命名为 风格，并更新 。角-cli。 json以反映更改:

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

然后将这一行添加到 风格:

@import '~bootstrap/scss/bootstrap';
小开

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

"dependencies": {


"bootstrap": "^3.3.7",
}

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

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

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

$ npm update
小开
  1. Npm install ——保存引导程序

  2. 转到-> 角-斜面 Json文件，查找样式属性，然后添加下一个字符串: “ . ./node _ module/bootstrap/dist/css/bootstrap.min.css”，它可能看起来像这样:

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

有几种方法可以用 Bootstrap 配置 angular2，最完整的方法之一就是使用 ng-Bootstrap，使用这种配置，我们可以完全控制我们的 DOM，避免使用 JQuery 和 Boostrap.js。

以 Angular-CLI 创建的一个新项目为起点，使用命令行，安装 ng-bootstrap:

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

注: 更多信息在 https://ng-bootstrap.github.io/#/getting-started

然后我们需要为 css 和网格系统安装引导程序。

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

注: 更多信息在 https://getbootstrap.com/docs/4.0/getting-started/download/

现在我们已经设置好了环境，为此我们必须改变. angle-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了。

小开

角度6 + & Bootstrap 4 + 程序:

  1. 在项目的文件夹上打开 shell
  2. 使用以下命令安装引导程序: npm install --save bootstrap@4.1.3
  3. Bootstrap 需要依赖项 jquery，因此如果没有，可以使用以下命令安装它: npm install --save jquery 1.9.1
  4. 您可能需要使用以下命令修复漏洞: npm audit fix
  5. 在您的主 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">

小开

我的建议是，不要在 json 手写笔中声明它，而是将它放在 scss 中，这样就可以将所有内容编译并放在一个地方。

1)使用 npm 安装引导程序

 npm install bootstrap

2)使用我们的样式在 css 中声明 bootstrap npm

创建 _bootstrap-custom.scss:

  // Required
@import "bootstrap-custom-required";




// Optional
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";


...
..
.

3)在 styles.scss 中插入

@import "bootstrap-custom";

所以我们将把所有的核心编译在一个地方

小开

将这个添加到 package.json，“ ”

“ bootstrap”: “ ^ 3.3.7”

在. angle-cli. json 文件中，添加到您的“ Styles”中

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

使用此命令更新 npm

Npm 更新

小开

当您使用 angle _ CLI 或 Visual Studio 2019运行 angle 项目时，基于 package.json 文件的 angle _ CLI 会将文件下载或复制到 node _ module 文件夹。因此，bootstrap 和 JQuery 也存在于该文件夹中，所以不需要再次安装它们。 你可以这样使用它们:

  1. 在 angular.json 文件中:
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]

注意，因为 Node _ module文件夹和 Angular Json文件位于 同一个目录中，所以我们应该使用“ ./”

  1. 在 src/styles.css 文件中:
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

在此文件中请注意，由于 Node _ module是 Stylescss文件的上述文件夹，我们应该使用“ . ./”

我在 Angular 11.0.1，ASP.NET CORE 5，Visual Studio 2019中使用了这种方法


提交答案