Question

编辑：我已经包含了bootstrap.js和bootstrap.min.js但仍无法正常工作

你好我的bootstrap下拉菜单不起作用我复制了与w3schools.com相同的代码但是当我点击它时，它没有显示菜单栏选项。

这是我的代码

<html>
<header lang="en">
    <title>E-Sports News</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="style.css">

</header>
<body>
    <div class="container">
        <header class="jumbotron">
            <h1>E-SportsNews.bg</h1>
            <p>Your gaming new in one place</p>
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div>
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">News
                                <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Dota 2</a></li>
                                    <li><a href="#">League of legends</a></li>
                                    <li>><a href="#">Hearthstone</a></li>
                                    <li><a href="#">Heroes of the storm</a></li>
                                    </ul>
                            </li>
                            <li><a href="#">Galery</a></li> 
                            <li><a href="#">Learn to play</a></li> 
                        </ul>
                     </div>
                </div>
            </nav>
        </header>
        <main class="jumbotron">
            <h2>Най-известна новина тази седмица.</h2>
            <article>
                <h2>

                </h2>
            </article>
        </main>
            <section class="col-lg-3">
                <a href="#">Dota 2</a>
                <img src="" alt="">
            </section>
            <section class="col-lg-3">
                <h3>League of Legends</h3>
            </section>
            <section class="col-lg-3">
                <h3>Hearthstone</h3>
            </section>
            <section class="col-lg-3">
                <h3>Heroes of the Storm</h3>
            </section>
    </div>      
</body>

当您点击“新闻”下拉按钮时，它应该为您提供菜单，其中包含选择特定游戏新闻的选项，但是当您点击它时什么也不做。

Answer 1

在Bootstrap中，插件可以单独包含（使用Bootstrap的单个* .js文件），也可以一次性包含（使用bootstrap.js或缩小的bootstrap.min.js）。

某些插件和CSS组件依赖于其他插件。如果单独包含插件，请确保在文档中检查这些依赖项。另请注意，所有插件都依赖于jQuery（这意味着必须在插件文件之前包含jQuery）。

试试这个

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Here a working jsfiddle，其中包含您发布的代码。

另请查看http://www.w3schools.com/bootstrap/bootstrap_get_started.asp和http://getbootstrap.com/javascript/

Bootstrap下拉菜单不起作用

1 个答案: