Как ввести выпадающий элемент внутри панели навигации

Я создал заголовок с панелью навигации

Я хотел бы, чтобы элемент стал выпадающим меню. Но я не понимаю, почему мой товар не отображается.

Я вижу по ссылке, что это кажется простым: https://getbootstrap.com/docs/4.0/components/navs/

Таблетки с выпадающими списками

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<header>
  <li class = "nav-item dropdown">
    <a class = "nav-link dropdown-toggle" data-toggle = "dropdown" href = "#" role = "button" aria-haspopup = "true" aria-expanded = "false">Dropdown</a>
    <div class = "dropdown-menu">
      <a class = "dropdown-item" href = "#">Action</a>
      <a class = "dropdown-item" href = "#">Another action</a>
      <a class = "dropdown-item" href = "#">Something else here</a>
      <div class = "dropdown-divider"></div>
      <a class = "dropdown-item" href = "#">Separated link</a>
    </div>
  </li>

  <header>

ИТЭК-ЭП

<div class = "collapse navbar-collapse" id = "navbarColor01">
  <ul class = "navbar-nav mr-auto">
    <li class = "nav-item active">
      <a class = "nav-link" href = "index.html">Applications<span class = "sr-only">(current)</span></a>
    </li>
    <li class = "nav-item">
      <a class = "nav-link" href = "wiki.html">Wiki</a>
    </li>

    <li class = "nav-item dropdown">
        <a class = "nav-link dropdown-toggle" data-toggle = "dropdown" href = "#" role = "button" aria-haspopup = "true" aria-expanded = "false">Dropdown</a>
        <div class = "dropdown-menu">
          <a class = "dropdown-item" href = "#">Action</a>
          <a class = "dropdown-item" href = "#">Another action</a>
          <a class = "dropdown-item" href = "#">Something else here</a>
          <div class = "dropdown-divider"></div>
          <a class = "dropdown-item" href = "#">Separated link</a>
        </div>
    </li>

  </ul>

</div>

У меня нет сообщения об ошибке. Когда я нажимаю на раскрывающееся меню, ничего не происходит. Внутренний элемент не появляется.

Я пытаюсь не использовать css, а только bootstrap. Я решил использовать этот шаблон: https://bootswatch.com/materia/

Что я ошибаюсь? Как в будущем я могу отлаживать в режиме разработчика в Mozilla?

Я предполагаю, что вам не хватает bootstrap.js, popper.js или jquery.

Zim 22.05.2019 15:18

Спасибо, мужик! Вы были правы :) Я не использовал <script src = "cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/…> <script src = "maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.mi‌​n.js" ></script>

newbreaker12 22.05.2019 15:31
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
2
153
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я предполагаю, что проблема заключается в том, что не установлены правильные пакеты javaScript. У меня было это, когда я впервые использовал Bootstrap, и мне не хватало popper.js

Другие вопросы по теме