在Angular中使用本地Bootstrap3 [英] Using local Bootstrap3 with Angular

问题描述

我已经使用Angular cli创建了Angular 2应用.

I have created an Angular 2 app using Angular cli.

在index.html中，我指的是CDN上的引导程序3，它工作正常

In the index.html, I am referring to bootstrap 3 on cdn and it works fine

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

现在，我不想使用来自CDN的引导程序，而是要使用本地副本.因此，我使用npm安装了bootstrap

Now, instead of using the bootstrap from cdn, I would like to use a local copy. So, I installed bootstrap using npm

 npm install bootstrap@3

，然后尝试在src(与node_modules平行)内部的index.html文件中提供引用

and then tried to provide a reference in the index.html file, which is inside src (parallel to node_modules)

 <link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 

但是，这不起作用，并且我在浏览器控制台中看到以下内容(加载index.html时)

however, this does not work and I see the below in browser console (when I load index.html)

有人可以建议如何在本地加载引导程序吗?

Can someone please advice how to load bootstrap locally?

PS:我不想使用Bootstrap4，因为它仍处于Alpha状态

PS: I don't want to use Bootstrap4 as it is still in alpha

推荐答案

.angular-cli.json文件中包含脚本&接受字符串数组(您的npm包的相对路径)的样式属性

In your .angular-cli.json file are scripts & styles properties which accept an array of string (your relative path to your npm package)

这是您应在其中引用本地javascript和css/scss/less文件的地方.

This is where you should reference your local javascript and css/scss/less files.

"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.css",
  "../node_modules/font-awesome/css/font-awesome.css"
],
"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],

在此处添加您的脚本，运行ng serve时，这些文件将在您的index.html文件中创建.

Add your scripts here, when running ng serve these files will be created in your index.html file.

Angular-CLI是构建应用程序的绝佳选择，而且只会越来越好.

The Angular-CLI is a great choice to build apps with and it's only getting better.

这篇关于在Angular中使用本地Bootstrap3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！