Bootstrap Html Php

问题描述 投票:0回答:1

我有一个导航切换它出现在屏幕很小之后我包含1个php文件,这是bootstrap模式,包括我的导航切换在打开后没有关闭。我无法关闭导航菜单。我既包括文件索引也包括请求,即数据模式文件

 <?php require 'request.php';?>
<header class="navigation navbar navbar-fixed-top">
   <div class="container">
      <div class="navbar-header">
         <!-- responsive nav button -->
         <button type="button" class="navbar-toggle" 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>
         <!-- /responsive nav button -->
         <!-- logo -->
         <a class="navbar-brand logo" href="index.html">
         <img class="logo-white" src="images/logo1.png" alt="logo"  style="width:40px;float:left;"/>
            <p class="logo-white" style="float:right;font-size:  30px;color:  white;font-family:  initial;margin-top:5px;margin-left:8px;">Expert Web Solutions</p>
             <img class="logo-default" src="images/logo2.png" alt="logo"  style="width:40px;float:left;"/>
            <p class="logo-default" style="float:right;font-size:  30px;color:  #000;font-family:  initial;margin-top:5px;margin-left:8px;">Expert Web Solutions</p>
         </a>
         <!-- /logo -->
      </div>
      <!-- main nav -->
      <nav class="collapse navbar-collapse navbar-right">
         <ul id="nav" class="nav navbar-nav menu">
               <li>
                  <a href="index.html" >Home </span></a>

               </li>
               <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                     <li><a href="mobile.html">Mobile App Development</a></li>
                  <li><a href="webdevelopment.html">Web Development</a></li>
                  <li><a href="softdevelopment.html">Software Development</a></li>
               <li><a href="softconsultancy.html">Software Consultancy</a></li>
                <li><a href="softtesting.html">Software Testing and<br> Quality Assurance</a></li>
                  </ul>
               </li>
               <li><a href="technologies.html">Technologies</a></li>
               <li><a href="about.html">About Us</a></li>
               <li><a href="careers.html">Careers</a></li> 
               <li><button type="button"  data-toggle="modal" data-target="#myModal">Request A Quote</button></li> 
               <li><a href="contact.html">Contact Us</a></li>


            </li>
         </ul>
      </nav>

      <!-- /main nav -->
   </div>
</header>



<this is request.php>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <link rel="stylesheet" href="form.css" >
        <script src="form.js"></script>
  </head>
<body>

<div class="container">

  <!-- Trigger the modal with a button -->


  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Request A Quote</h4>
        </div>
        <div class="panel-body">
                                <form id="reused_form">
                                    <div class="form-group">

                                        <input type="text" name="name" required class="form-control" placeholder="Enter Name">
                                    </div>
                                    <div class="form-group">

                                        <input type="email" name="email" required class="form-control" placeholder="Enter Email">
                                    </div>
                                    <div class="form-group">

                                        <input name="phone" class="form-control" placeholder="Enter Phone Number">
                                    </div>
                                    <div class="form-group">

                                        <textarea rows="3" name="message" class="form-control" placeholder="Write Your Requirements"></textarea>
                                    </div>

                                    <div class="form-group">
                                        <button class="btn btn-raised btn-lg btn-warning" type="submit" style="
    border: none;
    padding: 15px 0;
    width: 100%;
    margin: 0;
    background: #2b315d;
    color: #fff;
    border-radius: 0;
">Send</button>
                                    </div>
                                </form>
                                <div id="error_message" style="width:100%; height:100%; display:none; ">
                                    <h4>
                                        Error
                                    </h4>
                                    Sorry there was an error sending your form. 
                                </div>
                                <div id="success_message" style="width:100%; height:100%; display:none; ">
<h2 style="color:#000; font-size:22px;text-align:center;">Thank You! <br>Your Message was Sent Successfully.<br>One of our representatives will contact you shortly.</h2>

</div>
                            </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

</body>
</html>
php html bootstrap-modal
1个回答
0
投票

我认为require.php会再次打破html,包括head部分,打开和关闭html和body标签。

也许这会奏效吗?

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link rel="stylesheet" href="form.css" >
    <script src="form.js"></script>
</head>
<body>
<header class="navigation navbar navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <!-- responsive nav button -->
            <button type="button" class="navbar-toggle" 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>
            <!-- /responsive nav button -->
            <!-- logo -->
            <a class="navbar-brand logo" href="index.html">
                <img class="logo-white" src="images/logo1.png" alt="logo"  style="width:40px;float:left;"/>
                <p class="logo-white" style="float:right;font-size:  30px;color:  white;font-family:  initial;margin-top:5px;margin-left:8px;">Expert Web Solutions</p>
                <img class="logo-default" src="images/logo2.png" alt="logo"  style="width:40px;float:left;"/>
                <p class="logo-default" style="float:right;font-size:  30px;color:  #000;font-family:  initial;margin-top:5px;margin-left:8px;">Expert Web Solutions</p>
            </a>
            <!-- /logo -->
        </div>
        <!-- main nav -->
        <nav class="collapse navbar-collapse navbar-right">
            <ul id="nav" class="nav navbar-nav menu">
                <li>
                    <a href="index.html" >Home </span></a>

                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="mobile.html">Mobile App Development</a></li>
                        <li><a href="webdevelopment.html">Web Development</a></li>
                        <li><a href="softdevelopment.html">Software Development</a></li>
                        <li><a href="softconsultancy.html">Software Consultancy</a></li>
                        <li><a href="softtesting.html">Software Testing and<br> Quality Assurance</a></li>
                    </ul>
                </li>
                <li><a href="technologies.html">Technologies</a></li>
                <li><a href="about.html">About Us</a></li>
                <li><a href="careers.html">Careers</a></li>
                <li><button type="button"  data-toggle="modal" data-target="#myModal">Request A Quote</button></li>
                <li><a href="contact.html">Contact Us</a></li>


                </li>
            </ul>
        </nav>

        <!-- /main nav -->
    </div>
</header>
<?php require 'request.php';?>
</body>
</html>

below request PHP

        <!-- Trigger the modal with a button -->


        <!-- Modal -->
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Request A Quote</h4>
                    </div>
                    <div class="panel-body">
                        <form id="reused_form">
                            <div class="form-group">

                                <input type="text" name="name" required class="form-control" placeholder="Enter Name">
                            </div>
                            <div class="form-group">

                                <input type="email" name="email" required class="form-control" placeholder="Enter Email">
                            </div>
                            <div class="form-group">

                                <input name="phone" class="form-control" placeholder="Enter Phone Number">
                            </div>
                            <div class="form-group">

                                <textarea rows="3" name="message" class="form-control" placeholder="Write Your Requirements"></textarea>
                            </div>

                            <div class="form-group">
                                <button class="btn btn-raised btn-lg btn-warning" type="submit" style="
    border: none;
    padding: 15px 0;
    width: 100%;
    margin: 0;
    background: #2b315d;
    color: #fff;
    border-radius: 0;
">Send</button>
                            </div>
                        </form>
                        <div id="error_message" style="width:100%; height:100%; display:none; ">
                            <h4>
                                Error
                            </h4>
                            Sorry there was an error sending your form.
                        </div>
                        <div id="success_message" style="width:100%; height:100%; display:none; ">
                            <h2 style="color:#000; font-size:22px;text-align:center;">Thank You! <br>Your Message was Sent Successfully.<br>One of our representatives will contact you shortly.</h2>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>

            </div>
        </div>
© www.soinside.com 2019 - 2024. All rights reserved.