如何在Angular项目中使用Bootstrap？
如何在Angular项目中使用Bootstrap？
提问于 2016-03-30 02:36:26
我要开始我的第一次角度应用程序，我的基本设置就完成了。如何添加引导我的申请吗？
如果你能提供一个例子，那将是一个很大的帮助。
回答 19
Stack Overflow用户
回答已采纳
发布于 2017-04-06 19:36:21
如果您使用Angular-CLI要生成新项目，还有另一种方法使bootstrap可在角度2/4
通过命令行界面导航到项目文件夹。然后使用npm要安装bootstrap，请执行以下操作：$ npm install --save bootstrap. The --save
选项将使bootstrap出现在依赖项中。编辑.angular-cli.json文件，该文件用于配置您的项目。它在项目目录中。将引用添加到"styles"
数组。引用必须是使用npm下载的引导程序文件的相对路径。在我的例子中它是："../node_modules/bootstrap/dist/css/bootstrap.min.css",
我的示例.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应该是您的默认设置的一部分。
Stack Overflow用户
发布于 2016-03-30 02:47:45
与Angular2的集成也可以通过ng2-bootstrap
项目：https://github.com/valor-software/ng2-bootstrap
要安装它，只需将以下文件放入您的HTML主页：
然后你可以这样在你的组件中使用它：
import {Component} from 'angular2/core';
import {Alert} from 'ng2-bootstrap/ng2-bootstrap';
@Component({
selector: 'my-app',
directives: [Alert],
template: `ng2-bootstrap hello world!`
})
export class AppComponent {
}Stack Overflow用户
发布于 2016-03-30 02:43:18
您需要做的就是在index.html文件中包含引导css。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36292438
复制相关文章
相似问题