数据目标不能与bootstrap 3一起使用

时间:2018-04-28 10:48:35

标签: php html css

 header.php code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html lang="EN">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="images/logo.jpg" type="image/x-icon" />
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="styles/bootstrap.min.css" />
<link rel="stylesheet" href="styles/mystyles.css" />
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
<script src="js/bootstrap.min.js" ></script>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>

nav.php

<div class="navbar navbar-default" id="navbar">
<div class="container">
<div class="navbar-header">    
<a class="navbar-brand home" href="#">
<img src="images/ico.JPG" class="hidden-xs" style="height:50px;">
<img src="images/icosmall.png" class="visible-xs" height="50px" width="auto">
</a>    

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation">
    <span class="sr-only">Toggle Navigation</span>
    <i class="fa fa-align-justify"></i>
    </button>


    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#search">
    <span class="sr-only">Toggle Navigation</span>
    <i class="fa fa-search"></i>
    </button>

</div>  <!----end of navbar header--->  
<div class="navbar-collapse collapse" id="navigation">
<div class="padding-nav">
    <ul class="nav navbar-nav navbar-left">
    <li><a href="#">Colors</a></li>
    <li><a href="#">How-To</a></li>
    <li><a href="#">Inspiration</a></li>
    <li><a href="#">Shop</a></li>
    <li><a href="#">Contact Us</a></li>

</ul>      <!----end of navbar-left--->
</div>    <!----end of padding nav---> 
<a class="btn btn-primary navbar-btn right" href="#" >
    <i class="fa fa-shopping-cart"></i>
    <span>Cart 0</span>
</a>
<div class="navbar-collapse collapse right">
  <button class="btn navbar-btn btn-primary" type="button" data-toggle="collapse" data-target="#search">
    <span class="sr-only">Toggle Search</span>
    <i class="fa fa-search"></i>
    </button>  
</div>  <!----navbar-collapse collapse right ends here--->
<div class="collapse clearfix" id="search">
 <form class="navbar-form" method="get" action="results.php">
  <div class="input-group">
 <input class="form-control" type="text" placeholder="Search......" name="user_query" required />
 <span>
 <button type="submit" value="Search" name="search" class="btn btn-primary">    
  <i class="fa fa-search"></i>
</button>
</span>
 </div> <!----input-group ends here--->  

</form> <!----navbar-form ends here--->  
</div> <!----collapse clearfix ends here---> 
</div> <!----navbar-collapse ends here--->
</div> <!----end of container--->
</div> <!----end of navbar-navbar--->

的index.php

<?php
include_once 'header.php';

?>

<?php
include_once 'nav.php';

?>


<div class="container" id="slider">
<div class="col-md-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
 </ol> <!---carousel-indicators ends here ---->
<div class="carousel-inner">
<div class="item active">
<img src="admin_area/slide_images/1.jpg">
</div>  
<div class="item">
<img src="admin_area/slide_images/2.jpg">
</div>
<div class="item">
<img src="admin_area/slide_images/3.jpg">
</div>
<div class="item">
<img src="admin_area/slide_images/4.jpg">
</div>
<div class="item">
<img src="admin_area/slide_images/5.jpg">
</div>
</div> <!---carousel-inner ends here ---->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
 <span class="glyphicon glyphicon-chevron-left"></span>
 <span class="sr-only">Previous</span> 
</a>   <!---left carousel-control ends here ---->

<a class="right carousel-control" href="#myCarousel" data-slide="next">
 <span class="glyphicon glyphicon-chevron-right"></span>
 <span class="sr-only">Next</span> 
</a>   <!---right carousel-control ends here ---->


</div> <!---carousel slide ends here ---->
</div> <!---col-md-12 ends here ---->
</div> <!---container ends here ---->

<div class="advantages">
<div class="container">
<div class="same-height-row">
<div calss="col-sm-4">
<div class="box same-height">
<div class="icon">
<i  class="fa fa-globe" aria-hidden="true"></i>    
</div>
<h3><a href="#">FAST GLOBAL SERVICE</a></h3>
<p>We are know to provide best possible service ever</p>
</div> <!---box same-height ends here ---->  
 </div> <!---col-sm-4 ends here ----> 
<div calss="col-sm-4">
<div class="box same-height">
<div class="icon">
<i  class="fa fa-cc-paypal" aria-hidden="true"></i>    
</div>
<h3><a href="#">EASY AND SAFE TRANSACTION</a></h3>
<p>Encrypted payment gateway through PayPal</p>
</div> <!---box same-height ends here ---->
<div calss="col-sm-4">
<div class="box same-height">
<div class="icon">
<i  class="fa fa-credit-card-alt" aria-hidden="true"></i>    
</div>
<h3><a href="#">NO INTERMEDIARIES</a></h3>
<p>Avoid any business with middlemen</p>
</div> <!---box same-height ends here ---->  
 </div> <!---col-sm-4 ends here ----> 



</div> <!---same-height-row ends here ----> 
</div> <!---container ends here ---->
</div> <!---advantages ends here ---->





<?php include_once 'footer.php'; ?>

这是我的完整代码。 这是我的浏览器的屏幕截图 ScreenShot

当我点击搜索按钮时,我应该得到一个有搜索框的下拉分区。但我不明白!我需要有人可以查看代码并帮助解决我的问题。我目前正在处理周三到期的项目。

1 个答案:

答案 0 :(得分:0)

这是我的footer.php。我编辑了我的header.php并删除了jquery和bootstrap.js然后将它放到了页脚

  <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js" ></script>
    </body>
    </html>

感谢您帮我修复了我的问题。现在它完美无缺。