2016-07-05 17 views
2

index.phpファイルで使用する予定のHTMLコードを下回っていますが、問題があるようです。include()を使用したときにPHPがブートストラップを使用できない

<!-- 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> 

私はthisのような出力をしたいが、私は取得していますすべてがthisです。 は、ブートストラップなどを完全に使用することで問題になります。 私の主な目的は、私のコードを最小限にするためにPHPのinclude()機能を使うことです。 PHPページにヘッダーやフッターのテンプレートやコードを含めることができる他の方法はありますか? ありがとうございます!

+0

ブートストラップファイルのパスが正しいことを確認してください。あなたのブラウザでリンクhref urlを試して、ファイルが正しく配置されたことを確認してください。 –

+1

あなたのブートストラップ資産のためのhttpパスではなく、ローカルファイルパス(J:\ foo \ bar)を持っています。これらは正しく見えません。 – Progrock

+0

これはファイルパスの問題でなければなりません。 – modesitt

答えて

1

リンクjQueryを使用すると、ブートストラップ

<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)

2デベロッパーツール(F12)を開きが含まれる前には)ページ

3をリフレッシュします)、 "コンソール" タブを確認し

Iあなたがコンソールで答えを見つけるだろうと思う。 とにかく、(ブートストラップディレクトリと一の木レベルでのファイルのindex.phpを仮定して)相対的にあなたのパスを変更します。

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

の代わりに:

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

そして、すべてのファイルのためにそれを行う、あるいは単に接続それCDNから - それは素晴らしいことでしょう。)

1

コールjquery.min.js 前bootstrap.min.js

スクリプトbootstrap.min.jsは、ほとんどのアクションでjQueryプラグインを使用します。

また、ファイルが実際に説明されているパスに含まれているかどうかを確認してください。メインプロジェクトディレクトリからファイルを呼び出すことを強くお勧めします。

+1

私はプロジェクトディレクトリにブートストラップファイルをコピーしました。それは魅力のように動作します、ありがとう、私の日を救った –

関連する問題