Bootstrap Навбар с таблетками и Angular - PullRequest
Новая
       8

Bootstrap Навбар с таблетками и Angular

0 голосов
/ 28 января 2020

Я работаю со следующим примером:

Пример маршрутизации

Где в app.component. html Я изменяю: 

<ul class="nav nav-tabs">

до 

<ul class="nav nav-pills">

Итак, теперь вкладки выглядят как таблетки.

Затем я скопировал navbar в другой пример:

Пример тестирования

И панель навигации не выглядит так же, как в исходном примере. Оба примера работают под одной и той же Bootstrap версией. Хотя второй пример не включает роутер, я не уверен, что это что-то меняет.

Может кто-нибудь помочь понять, что мне не хватает?

Спасибо

Ответы [ 2 ]

0 голосов
/ 28 января 2020

Попробуйте включить что-то подобное в свой индекс. html

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

И вам нужна другая структура панели навигации. nav-item и nav-link важны 

<ul class="nav nav-pills">
        <li role="presentation" class="nav-item"><a routerLink="/" routerLinkActive="active" class="nav-link">Home</a></li>
        <li role="presentation" class="nav-item"><a routerLink="/" routerLinkActive="active" class="nav-link">Second</a></li>
</ul>

Может быть, это все

0 голосов
/ 28 января 2020

Я думаю, вы устанавливаете bootstrap, jQuery et c .. но не затрагиваете ваше приложение, поэтому добавьте ссылку css & js в "Angular. json" -> Построить массив -> как показано ниже: 

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