Bootstrap Navbar Тумблер не переключается - PullRequest
Новая
       3

Bootstrap Navbar Тумблер не переключается

0 голосов
/ 26 апреля 2019

Так что по какой-то причине мой переключатель начальной загрузки, который показывает, когда страница сжимается, не переключается при нажатии.Сначала я импортировал библиотеку jquery, поэтому не уверен, почему она не будет работать. 

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>JPV Painting Plus</title>
    <script src="https://code.jquery.com/jquery-3.4.0.js"></script>
    <link rel="stylesheet" type="text/css" href="js\bootstrap.min.js" />
    <link rel="stylesheet" type="text/css" href="css\bootstrap.min.css" />

    <link rel="stylesheet" type="text/css" href="css\styles.css" />

</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                <a class="nav-item nav-link" href="#">Features</a>
                <a class="nav-item nav-link" href="#">Pricing</a>
                <a class="nav-item nav-link disabled" href="#">Disabled</a>
            </div>
        </div>
    </nav>
    <img id="index-banner" src="img\index-banner.jpg"/>
    <h1 class="text-center font-weight-bold"></h1>

</body>
</html>

Ответы [ 3 ]

2 голосов
/ 26 апреля 2019

Вы импортируете файл javascript как таблицу стилей, вы должны импортировать его как script.

Обратите внимание, как при добавлении таблицы стилей вы добавляете элемент link, но для файлов js вам нужноscript элемент. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<title>JPV Painting Plus</title>

<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
        <a class="nav-item nav-link" href="#">Features</a>
        <a class="nav-item nav-link" href="#">Pricing</a>
        <a class="nav-item nav-link disabled" href="#">Disabled</a>
      </div>
    </div>
  </nav>
  <img id="index-banner" src="img\index-banner.jpg" />
  <h1 class="text-center font-weight-bold"></h1>

</body>

</html>
1 голос
/ 26 апреля 2019

Вы ввели <link rel="stylesheet" type="text/css" href="js\bootstrap.min.js" />. Это должно быть <script src="js/bootstrap.min.js"></script>. Это скрипт, а не таблица стилей.

0 голосов
/ 26 апреля 2019

Импортируйте jquery в конце вашего HTML-документа, например, перед конечным тегом тела.
Используйте 

<script src="PATH"></script>

вместо тега ссылки.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...