2016-07-05 13 views
2

Ich habe unter HTML-Code, den ich mit der Datei index.php verwenden möchte, aber es scheint ein Problem.PHP kann Bootstrap nicht verwenden, wenn include() verwendet wird

<!-- nav bar --> 
<nav id="top"> 
<nav class="navbar navbar-xs navbar-custom"> 
    <div class="container-fluid" > 

     <div class="nav pull-right"> 
     <font face="bebas"> 
     <ul class="list-inline"> 
     <li><a href="#"> 123456789 </a></li> 
     <li class="dropdown"><a href="#" title="My Account" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> My Account <span class="caret"></span></a> 
      <ul class="dropdown-menu dropdown-menu-right"> 
         <li><a href="#">Register</a></li> 
      <li><a href="#">Login</a></li> 
         </ul> 
     </li> 
     <li><a href="#" id="wishlist-total" title="Wish List (0)"><i class="fa fa-heart"></i> Wish List (0)</a></li> 
     <li><a href="#" title="Shopping Cart"><i class="fa fa-shopping-cart"></i> Shopping Cart</a></li> 
     <li><a href="#" title="Checkout"><i class="fa fa-share"></i> Checkout</a></li> 
     </ul> 

    </div> 
    </div> 
</nav> 
</nav> 

<!-- searchbar and logo --> 

<header id="margin"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-xs-4"> 
     <div id="logo"> 
        <center> <span class="tab-space"></span> <a href="J:\lawn\home\home2.htm"><img src="J:\lawn\home\artwork\lawn.png" height="42px" /></a> 
        </div> 
     </div> 
     <div class="col-xs-5"> 
     <div id="search" class="input-group"> 
     <input type="text" name="search" value="" placeholder="Search" class="form-control" border-rad> 
      <span class="input-group-btn"> 
       <button class="btn btn-secondary" type="button" style="border-radius: 0;">Search</button> 
      </span> 
     </div>  
     </div> 
     <div class="col-xs-3"> 
     </div> 
    </div> 
    </div> 
    </font> 
</header> 

index.php

<!DOCTYPE html> 

<html> 
<head> 

<title> experiment ground </title> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

<!-- <meta name="viewport" content="width=device=width, initial-scale=1"> omitted to remove unresponsiveness of columns --> 

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 



<link href="J:\bootstrap\bootstrap-3.3.6-dist\css\bootstrap.min.css" rel="stylesheet" type="text/css"> 

<link href="J:\bootstrap\bootstrap-3.3.6-dist\css\cutom.css" rel="stylesheet" type="text/css"> 
<script src="J:\bootstrap\bootstrap-3.3.6-dist\js\bootstrap.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 


</head> 

<body> 

<?php include('includes\header.html'); ?> 


</body> 
</html> 

Ich möchte eine Ausgabe wie this aber alles, was ich ist this immer bin. ist es ein Problem bei der Verwendung von Bootstrap oder etwas ganz anderes. mein Hauptzweck ist es, include() -Funktion von PHP zu verwenden, um meinen Code minimal zu machen. Gibt es eine andere Möglichkeit, Kopf- oder Fußzeilenvorlagen oder Codes in eine PHP-Seite einzubinden? danke!

+0

Stellen Sie sicher, dass der Bootstrap-Dateipfad korrekt ist. Probieren Sie die Link-href-URL in Ihrem Browser aus und bestätigen Sie, dass die Dateien korrekt platziert wurden. –

+1

Sie haben lokale Dateipfade (J: \ foo \ bar) anstelle von HTTP-Pfaden für Ihre Bootstrap-Assets. Diese sehen nicht ganz richtig aus. – Progrock

+0

Dies muss ein Dateipfadproblem sein. – modesitt

Antwort

1

Link-jQuery, bevor Sie umfassen Bootstrap

<link href="J:\bootstrap\bootstrap-3.3.6-dist\css\bootstrap.min.css" rel="stylesheet" type="text/css"> 
<link href="J:\bootstrap\bootstrap-3.3.6-dist\css\cutom.css" rel="stylesheet" type="text/css"> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"</script> 
<script src="J:\bootstrap\bootstrap-3.3.6-dist\js\bootstrap.min.js"></script> 
1

1) öffnen Sie Ihre Entwicklertools (F12)

2) aktualisieren Seite

3) auf "Konsole" Tab

I denke, du wirst Antworten in der Konsole finden. Wie auch immer, die Pfade zu relativ (unter der Annahme Datei mit Bootstrap-Verzeichnis an einen Baum Ebene index.php) ändern:

href="bootstrap\bootstrap-3.3.6-dist\css\bootstrap.min.css" 

Statt:

href="J:\bootstrap\bootstrap-3.3.6-dist\css\bootstrap.min.css" 

Und tut es für alle Dateien, oder einfach nur anschließen es von CDN - es wird groß sein;)

1

Anruf jquery.min.js vor bootstrap.min.js

Das Skript bootstrap.min.js verwendet in den meisten Aktionen das jQuery-Plug-in.

Überprüfen Sie auch, ob sich die Dateien tatsächlich in dem beschriebenen Pfad befinden. Es wird dringend empfohlen, dass Sie die Dateien aus dem Hauptprojektverzeichnis aufrufen.

+1

Ich kopierte Bootstrap-Dateien in das Projektverzeichnis und es funktioniert wie ein Zauber, danke, du hast meinen Tag gerettet –

Verwandte Themen