Question

我正在开发一个带有自定义引导程序的简单角度4应用程序。我已经从网站http://getbootstrap.com/docs/3.3/customize/定制了bootstrap的值。所以我从这个网站上获得了bootstrap.min.css和bootstrap-theme.min.css。

现在我正在尝试将此bootstrap css与我的angular 4应用程序集成。

我使用angular cli生成角度应用

我尝试了两种方法，但是通过两种方式，自定义主题css都没有应用。它仍然是我不想要的默认引导主题。

直接导入index.html中的css和其他文件，如下所示

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"

    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"

    integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"

    crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"

    integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"

    crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"

    integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"

    crossorigin="anonymous"></script>
  <link href="./assets/bootstrap-theme.min.css" rel="stylesheet">

最后一个css，即bootstrap-theme.min.css是我从自举网站下载的自定义主题文件。

使用网站建议的方法设置引导程序

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

在这里，我使用了第一种方法，即使用CSS。我做了一个小修改，在那里我添加了我的自定义主题，

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

使用上述两种方法，不会应用自定义主题。

有人可以建议，如何让应用程序在这个angular 4应用程序中使用自定义主题文件bootstrap-theme.min.css？

自定义bootstrap 4主题与角4不工作

0 个答案: