Переключение данных и цель данных не работает BootStrap 3 - PullRequest
Новая
       6

Переключение данных и цель данных не работает BootStrap 3

0 голосов
/ 19 мая 2019

Я использую BootStrap 3.4.1, и коллапс не работает.Я использую PHPStorm, и он не распознает переключение данных и назначение данных.Хотя на них нет опечаток.

Я изучаю начальную загрузку с PluralSight.Пробное решение с разных веб-сайтов, включая w3schools и stackoverflow. 

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width , initial-scale=1" />
    <title>TESTING</title>

    <script src="../js/bootstrap.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/bootstrap-theme.css">


</head>

<body>
<div class="navbar navbar-default">
    <div class="navbar-header">
        <button class="btn btn-success navbar-toggle collapsed"
                data-toggle="collapse" data-target=".navbar-collapse">
            <span class="glyphicon glyphicon-chevron-down"></span>
        </button>
    </div>
    <div id="MINE" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="nav"> <a href="Home.html">Home</a> </li>
            <li class="nav"> <a href="About.html">About</a></li>
            <li class="nav"> <a href="Books.html">Books</a></li>
            <li class="nav"> <a href="Films.html">Films</a></li>
            <li class="nav"> <a href="Contact.html">Contact</a></li>
        </ul>
    </div>
</div>

</body>
</html>

IDE View

кнопка должна быть в состоянии показать и свернуть класс navbar-collapse.но не отвечает.

до нажатия кнопки NotClicked

после нажатия enter image description here

Это панель навигации enter image description here

1 Ответ

0 голосов
/ 19 мая 2019

Рабочий код Демо

Только что прошел ваш вопрос.Я нашел несколько нетрадиционных вещей в вашем коде, которые вызывают у меня беспокойство.Упоминание их ниже.Первый пункт решит вашу проблему, в то время как другие надеются на ваше знание.

  • Для начальной загрузки Bootstrap требуется сначала загрузить jquery, чтобы выполнить почти все его динамические действия (в вашем случае это вызывает событие toogle).

  • Хорошей практикой является загрузка файлов css в заголовок и javascript-кодов в теле (обычно перед закрытием тега тела) до тех пор, пока не требуется специальная цель.Это ускоряет загрузку вашей страницы в браузер клиента.

  • Я заметил, что вы связываете два файла js."bootstrap.js" и "bootstrap.min.js".Оба файла имеют один и тот же код JavaScript, но позже один из них - просто уменьшенная версия.Так что просто включите один из них. 

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width , initial-scale=1" />
    <title>TESTING</title>


   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" />


</head>

<body>
<div class="navbar navbar-inverse">
    <div class="navbar-header">
        <button class="btn btn-success navbar-toggle collapsed"
                data-toggle="collapse" data-target="#MINE">
            <span class="glyphicon glyphicon-chevron-down"></span>
        </button>
    </div>
    <div id="MINE" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="nav"> <a href="Home.html">Home</a> </li>
            <li class="nav"> <a href="About.html">About</a></li>
            <li class="nav"> <a href="Books.html">Books</a></li>
            <li class="nav"> <a href="Films.html">Films</a></li>
            <li class="nav"> <a href="Contact.html">Contact</a></li>
        </ul>
    </div>
</div>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.js"></script>

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

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

...