Question

问题： 我有这个代码，它包含在每个网页的顶部：

<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
..metas...
<link rel="shortcut icon" href="img/logo.png">

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/custom.css" rel="stylesheet" media="screen">

<script src="js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/custom.js"></script>

<title><?php echo $pageTitle; ?></title>

当jquery之前包含bootstrap.min.js时，导航栏崩溃（对于小屏幕）可以工作（即它会下降并折叠起来）。 Navbar代码在这里：

<body style="background-image: url('img/subtle.png');">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="index.php"><img height="50" src="img/brand.png"></a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
  <form class="navbar-form navbar-left" role="search">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="contact.php">Contact</a></li>
  </ul>
</div><!-- /.navbar-collapse -->
</nav>
<!--body continues -->

但是模态不起作用：

<script type="text/javascript">
    $(window).load(function(){
        $('#updateModal').modal('show');
    });
</script>
<!-- Update modal -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <a class="close" href="index.php" aria-hidden="true">&times;</a>
                <h4 class="modal-title" id="updateLabel">Update a user</h4>
            </div>
            <div class="modal-body">
                <blockquote>
                    <form action="" method="post">
                        <label for="email">Change email</label>
                        <input type="text" name="email" value="<?php echo escape($user->data()->email); ?>" autocomplete="off"><br>

                        <input class="btn btn-primary" type="submit" value="Update">
                    </form>
                </blockquote>
            </div>
            <div class="modal-footer">
                <a class="btn btn-primary" href="index.php">Cancel</a>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

当我在bootstrap之前包含jQuery时，模态工作并且导航栏没有。

有什么想法吗？谢谢！

Answer 1

Bootstrap的javascript文件（bootstrap.min.js）永远不应该在jQuery之前加载，因为它依赖于jQuery。将订单更改为：

<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

原因是bootstrap js文件包含一堆jQuery插件，要定义它们，jQuery必须可用。

（bootstrap）导航栏或模态不起作用，具体取决于导入顺序

1 个答案: