將Bootstrap和jQuery添加到Angular 8

Question

我是Angular的新手。 我正在嘗試將Bootstrap和Jquery添加到我的第一個項目中。 我在我的項目目錄npm install bootstrap@3 jquery --save上運行此代碼

它運行完美，並且將jquery和bootstrap添加到了node_modules文件夾中。 這些行可以在package.json中的dependencies下看到

 "bootstrap": "^3.4.1",
 "jquery": "^3.4.1",

然后將零件添加到angular.json文件中的styles和scripts中。

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

但是Case is Bootstrap對於視圖不起作用

      <form >
          <div class="form-group">
            <label for="email">Email address</label>
            <input type="email" class="form-control" name="email" placeholder="Enter email" >
          </div>
          <div class="form-group">
            <label for="password">Password</label>
            <input type="password" class="form-control" name="password" placeholder="Password" >
          </div>
          <button type="submit" class="btn btn-success">Sign in!</button>
        </form>

輸出->

我能知道我做錯了嗎？

Answer 1

將此添加到您的styles.css

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