Javascript Bootstrap 3固定顶部导航栏_Javascript_Jquery_Twitter Bootstrap

Javascript Bootstrap 3固定顶部导航栏

javascript jquery twitter-bootstrap

Javascript Bootstrap 3固定顶部导航栏,javascript,jquery,twitter-bootstrap,Javascript,Jquery,Twitter Bootstrap,我正在尝试使用Bootstrap3固定顶部导航栏。但是当我减小浏览器屏幕尺寸并单击按钮时，它不会显示任何链接这是密码 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css"&

我正在尝试使用Bootstrap3固定顶部导航栏。但是当我减小浏览器屏幕尺寸并单击按钮时，它不会显示任何链接

这是密码

<!DOCTYPE html>
<html>
<head>  
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">
</head>    

<body>

    <!-- Creating a Fixed (top) Navigation Bar with Dropdown -->  
    <div class="navbar navbar-default navbar-fixed-top">    
        <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                   <span class="icon-bar"></span>  
                   <span class="icon-bar"></span>  
                   <span class="icon-bar"></span>               
              </button>
              <a href="#" class="navbar-brand">Exclusive</a>
            </div>     

            <div class="navbar-collapse collapse">                
                <ul class="nav navbar-nav">
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>                       

        </div>    
    </div>  
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="bootstrap/js/jquery-1.11.3.js"></script>

</body>
</html>

但在调整大小并单击切换按钮时，它不会显示链接

我已经包含了所需的jquery文件。

您将得到

脚本错误$未定义，因为您加载脚本的方式如下所示是错误的
<script src="bootstrap/js/bootstrap.min.js"></script><!--Either keep this-->
<script src="bootstrap/js/bootstrap.js"></script> <!--or this-->
<script src="bootstrap/js/jquery-1.11.3.js"></script><!--should come first-->

因此，您可以使用bootstrap.js
或bootstrap.min.js
，但不能同时使用两者。这会造成冲突
这不是错误。其引导3响应页面功能。
当您在小屏幕或手机上打开页面时，它将自动调整您的模板页面视图
当你点击你的右图标时，你可以在那里看到你的链接
我认为这就是您想要的解决方案：
如果希望在小型设备上打开页面时出现链接。然后您必须在HTML页面中更改类名
使用“导航栏展开”和“展开”代替“导航栏折叠”和“展开”
注意：请按优先级顺序包含您的js文件。它将帮助你在未来的发展
<script src="js/jquery-2.1.1.min.js"></script> 
<script src="js/bootstrap.min.js"></script>



我的HTML代码如下：








您的代码有错误。
首先是jQuery.js。
接下来是bootstrap.js
将
更改为

[结果]


切换导航






谢谢兄弟，答对了。Jquery应该是第一个，然后是引导jsAnytime。。快乐编码…）@MahtabAlam别忘了把它标记为答案，如果它有用的话！！您的代码运行良好，包括js可能会出现问题更改您的.js顺序-先保留jquery，然后保留bootstrap.js！+只使用一个bootstrap.js-无论是.min.js还是normal.js
<script src="js/jquery-2.1.1.min.js"></script> 
<script src="js/bootstrap.min.js"></script>

<body>

        <!-- Creating a Fixed (top) Navigation Bar with Dropdown -->  
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                        <span class="sr-only">Toggle navigation</span> 
                        <span class="icon-bar"></span>  
                        <span class="icon-bar"></span>  
                        <span class="icon-bar"></span>               
                    </button>
                    <a href="#" class="navbar-brand">Exclusive</a>
                </div>     

                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#">Products</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div>                       

            </div>    
        </nav>
    <script src="bootstrap/js/jquery-1.11.3.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
</body>