ブートストラップを使用して複数のhtmlページにnavbarを表示

私はこれに対する答えを今少し探しています。私はポートフォリオWebサイトを作成するためにBootstrapフレームワークを使用しています。私は、固定トップナビゲーションバーで、私のindex.htmlを完了している：ブートストラップを使用して複数のhtmlページにnavbarを表示

This is the home page. The top shows the navbar.

このナビゲーションバーには、「バイオ」ページ、「プロジェクト」ドロップダウンメニュー、および「連絡先」のページへのリンクがあります。私はこれらのそれぞれに別々のhtmlページを作成しました（例：index.html、bio.html、contact.html、video.html、design.htmlなどがあります）。しかし、リンクを押すと、Navbarやその他の書式設定が表示されません。

私はグラフィックデザインHTMLのため、このコードがあります：私はすべてに一貫性のあるナビゲーションバーを持つ方法があるかどうかを知りたいと思った graphicdesign.html page

：

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Graphic Design</title> 
</head> 
<body> 
    <h1>Graphic Design</h1> 
    <p>Creating</p> 
</body> 
</html>

そして、これが現れるものですがプロジェクトのHTMLページ。

私はこれを見ました：Bootstrap Navbar in multiple pagesしかし、私はjQueryを使用して読み込みに苦労しています。

私もこれを見ました：Do I have to duplicate the navbar code on every page with Bootstrap?しかし、私はPHPを使いたくありません。

ありがとうございます。

出典

2017-01-28 Abby

すべてのページにnavbarを含めるには、phpまたはjavascriptのいずれかを使用する必要があります。それ以外の場合は、単に各ページにhtmlマークアップをコピーして貼り付けなければなりません。ちょうどこの2 steps--

HTMLに

<div class="container-fluid" id="footer"> 

</div>

JAVASCRIPT

<script type="text/javascript"> 
$(function(){ 
$("#footer").load("footer.html"); 
}); 
    </script>

注意をしてみてください：あなたはfooter.htmlファイルにブートストラップCDN sを追加していないことを確認してください。

編集

アンドレイによるコメントで述べたように、はい、私の答えはjqueryが必要であることを知ることは非常に重要です。

jqueryを使用するには、headタグで次のcdnを使用するか、jqueryをダウンロードして自分のファイルシステムから配信する必要があります。

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

出典

2017-01-29 00:03:59 neophyte

ありがとうございます。私は今これを試しています。 htmlマークアップをコピーして貼り付けるという2つ目のポイントを解決するために、index.htmlコード全体をコピーして他のページにコピーしましたが、インデックスとして正しく表示されませんでした。 – Abby

Greateは助けてくれることを願っています！ – neophyte

Downvote！答えには何がありますか？ – neophyte

最初にお詫び申し上げます。
DRYは、phpやCSSなどの最も一般的なWebテクノロジの開発と実装の主な理由であるプログラミングの基本的なニーズと最も重要な原則の1つに対処しています（LESSでさらにDRYできます）。 SASS）。

php、例えば、発明されたとすぐには広く、ほとんどこのため、「非常にクールな新しい（当時）機能」の採用：あなたがしなければならなかったすべては.phpとあなたに.htmlから拡張子を変更しました使用して他の部分が挙げられることができた：通常テンプレート/部品搭載として

<?php include "part.html"; ?>

を参照、これはまたJavaScriptを使用して一般的なタスクです。かなりの数のライブラリがそれを提供しています。たとえば、jQueryは$.load()を提供し、AngularJSはdirectiveを使用して、templateを含めることができます。これは、インラインまたは外部として定義することができますHTML。実際、すべてのパッケージ依存マネージャーとすべてのフレームワークは、今日のWebは再利用可能なコンポーネントなしで考えられないので、フォームまたは別のフレームワークでそれを提供します。

あなたはより多くのオプションを検索する場合、私はあなたがhtml、include、templates、loadingとcomponentsの組み合わせの検索を開始示唆しています。

ほとんどのJavaScriptライブラリにはオーバーヘッドが付属していますので、注意してください。しかし、最も一般的なのは、通常、柔軟性を提供し、必要な機能のみを選択的にビルドすることができます。

<component>タグを使用して、ワールドワイドウェブコンソーシアムへのMicrosoftのHTML Components提出が採用される場合、テンプレートを含めることはおそらくコアHTMLの一部になります。
現在、これはAngularJSのtype:"E"指令を使用して可能です。

出典

2017-01-29 00:22:20

私はダウン投票の理由とダウン投票者が自分の答えについて間違っているか不完全であると思うかを知りたいです。私はそれを改善してうれしいです。 –

私は、この回答がどのようにその問題を解決するのが好きです。私はここにいくつかの静的サイトジェネレータもリストアップします。しかし、PHPやSSGに比べて余分なライブラリやHTTPリクエストを必要とするため、JavaScriptのソリューションはすべてオーバーヘッドになっていることは注目に値すると思います。 * - （downvoteではない）* – ppajer

-2

navbarのhtmlマークアップをindex.html（またはファイルが呼び出されたもの）からコピーして別のページに貼り付けてください。物事を複雑にしないでください。下の図を参照してください。

出典

2017-02-20 16:19:34 LXhelili

5,10,50,100、Xのページがあるかもしれない私のウェブサイトでは、編集されたnavbarコードをコピーしてそれぞれにコピーする必要がありますか？それは非常に疑わしいと思われる。 – BruceWayne

ブートストラップを使用して複数のhtmlページにnavbarを表示

答えて

関連する問題