классы начальной загрузки не применяются к компоненту navbar в угловом приложении - PullRequest
Новая
       44

классы начальной загрузки не применяются к компоненту navbar в угловом приложении

0 голосов
/ 30 октября 2019

я использую bootstrap 3.4.1 с angularcli 6.0.8, но когда я запускаю ng serve, на моей веб-странице не отображается ни один из классов начальной загрузки, которые я идентифицировал.

я пытался обновить версии начальной загрузки и попробоватьновый класс все еще не работает.

enter image description here

<div>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Dating App</a>
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Matches</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Lists</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " href="#">Messages</a>
      </li>
    </ul>

    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Username">
      <input class="form-control mr-sm-2" type="password" placeholder="Password">
      <button class="btn btn-success my-2 my-sm-0" type="submit">Login</button>
    </form>
  </nav>
</div>

в angular.json 

"styles": [ "src/styles.css" ],
"scripts": []

в src / styles.css 

@import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

Ответы [ 3 ]

0 голосов
/ 30 октября 2019

Установите Bootstrap для проекта через npm: npm i bootstrap

Обратите внимание, что Bootstrap зависит как от Popper.js, так и от jQuery - и то, и другое также необходимо установить с помощью npm i jquery popper.js

Позже попробуйте добавить их в angular.json 

"styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
0 голосов
/ 30 октября 2019

Я добавил ссылку и теги сценария, рекомендованные с веб-сайта начальной загрузки, в файл index.html, он как-то работал. но я не знаю, является ли это хорошей практикой для этого.

0 голосов
/ 30 октября 2019

Вы используете простой CSS, поэтому оператор @import выполняется браузером. Я предполагаю, что если вы откроете вкладку Network в Dev Tools, вы увидите неприятный код 404, касающийся файла bootstrap.min.css.

Самый простой способ импортировать CSS - это включить его вмассив styles в angular.json: 

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

В результате будет получен файл main.css с вложенным файлом Bootstrap css.

...