0

我已经完成了我能想到的几乎所有事情，但我无法让我的引导元素（即导航折叠和选项卡）在本地工作。他们都在小提琴中工作得很好，所以我很困惑。

小提琴在这里：http: //jsfiddle.net/e4RZE/3/

我将 js 引入我的项目的代码位于页脚下方，如下所示：

<!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>

我的标题代码如下：

<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
    <div class="container">
        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>

        </button> <a class="brand" href="http://howard.edu">Project</a>

        <div class="nav-collapse collapse">
            <ul class="nav">
                <li><a href="index.html">Home</a>
                </li>
                <li class="active"><a href="contact.html">Contact</a>
                </li>
                <li><a href="nowplaying.html">Now Playing</a>
                </li>
                <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Public Resources <b class="caret"></b></a>

                    <ul class="dropdown-menu">
                        <li><a href="public.html#observatory">Observatory</a>
                        </li>
                        <li><a href="public.html#planetarium">Planetarium</a>
                        </li>
                        <li class="divider"></li>
                        <li class="nav-header">For Teachers and Schools</li>
                        <li><a href="schools.html#programs">Programs</a>
                        </li>
                        <li><a href="schools.html#events">Host an Event</a>
                        </li>
                        <li><a href="schools.html#education">Educational Initiatives</a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Undergraduate Resources <b class="caret"></b></a>

                    <ul class="dropdown-menu">
                        <li><a href="students.html#observatory">Observatory</a>
                        </li>
                        <li><a href="students.html#planetarium">Planetarium</a>
                        </li>
                        <li class="divider"></li>
                        <li class="nav-header">HU Physics</li>
                        <li><a href="#">Physics Homepage</a>
                        </li>
                        <li><a href="#">Physics and Astronomy</a>
                        </li>
                    </ul>
                </li>
                <li><a href="volunteer.html">Volunteer</a>
                </li>
                <li><a href="faq.html">FAQ</a>
                </li>
            </ul>
        </div>
        <!--/.nav-collapse -->
    </div>
</div>

编辑： Bootstrap.css、bootstrap-responsive.css 和我的自定义文件（betterstrap2.css）添加如下：

<link href="css/bootstrap.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700 ' rel='stylesheet' type='text/css'>
    <link href="css/betterstrap2.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">

提前致谢。

4

2 回答 2

1

确保您的 jquery 和引导源文件位于要从这些脚本标签加载的正确位置。

此外，如果你想真正看到你的引导元素在页面上看起来很漂亮，你也应该加载 bootstrap.css 文件:)

于 2013-07-09T16:22:43.657 回答
-1

存在无效的 javascript 错误或指向 javascript 文件的链接。在页面上按 F12 并刷新以查看失败的原因。

于 2013-07-09T16:10:50.090 回答