Anzeige von Navbar auf mehreren HTML-Seiten mit Bootstrap

Ich habe die Antwort für eine Weile jetzt gesucht. Ich verwende das Bootstrap-Framework, um eine Portfolio-Website zu erstellen. Ich habe meine index.html mit einem Fest oben navbar beendet:Anzeige von Navbar auf mehreren HTML-Seiten mit Bootstrap

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

Diese navbar hat Links zu einer „Bio“ Seite eines „Projekte“ im Dropdown-Menü und eine „Kontakt“ Seite. Ich habe separate HTML-Seiten für jede von diesen erstellt (zB: ich habe index.html, bio.html, contact.html, video.html, design.html, etc.). Wenn ich jedoch die Links drücke, werden weder die Navigationsleiste noch andere Formatierungen angezeigt.

Ich habe diesen Code für die grafische Gestaltung html:

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

Und das ist, was oben zeigt: graphicdesign.html page

Ich wollte wissen, ob es einen Weg gibt, die navbar konsequent auf jeder haben HTML-Seite in einem Projekt

Ich habe gesehen: Bootstrap Navbar in multiple pages, aber ich habe es schwer, es mit jQuery zu laden.

Ich habe auch gesehen: Do I have to duplicate the navbar code on every page with Bootstrap?, aber ich möchte nicht PHP verwenden.

Vielen Dank für Ihre Zeit.

Quelle

2017-01-28 Abby

Um Ihre navbar in jede Seite zu integrieren, müssen Sie entweder php oder javascript verwenden. Andernfalls müssen Sie einfach kopieren den HTML-Markup auf jeder Seite kopieren. nur versuchen, dieses zwei steps--

HTML

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

</div>

JAVASCRIPT

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

HINWEIS: Achten Sie darauf, nicht Bootstrap CDN s in der footer.html Datei hinzufügen.

bearbeiten

Wie andrei im Kommentar erwähnt, ist ja, es sehr wichtig, dass meine Antwort jquery erfordert zu wissen.

Um jquery zu verwenden, müssen Sie die folgende cdn in Ihrem head Tag verwenden oder Sie können jquery herunterladen und es von Ihrem eigenen Dateisystem aus bedienen.

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

Quelle

2017-01-29 00:03:59 neophyte

Vielen Dank. Ich probiere das jetzt aus. Um Ihren zweiten Punkt zum Kopieren und Einfügen des HTML-Markups anzugehen, habe ich den gesamten index.html-Code kopiert und in die anderen Seiten eingefügt, aber sie wurden nicht korrekt angezeigt/wie der Index. – Abby

Greate hoffe es hilft! – neophyte

Downvote! Was war mit der Antwort? – neophyte

Zunächst einmal gratuliere ich Ihnen zu Ihrer Frage.
Es behandelt eines der grundlegenden Bedürfnisse und wichtigsten Prinzipien in der Programmierung: DRY, die der Hauptgrund hinter der Entwicklung und Implementierung der gängigsten Web-Technologien, wie php oder CSS (die weiter durch LESS oder TROY-ed sein kann) SASS).

php zum Beispiel erfunden wurde und sofort wegen dieser „sehr cool neu (zu der Zeit) Merkmal“ weit überwiegend angenommen: Alles, was Sie tun musste, war von .html zu .php die Erweiterung zu ändern und Sie konnten mit anderen Teilen enthalten:

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

referenzierten Regel als template/Komponente Laden, ist dies auch eine gemeinsame Aufgabe JavaScript verwenden. Etliche Bibliotheken stellen es zur Verfügung. Zum Beispiel jQuery bietet $.load() während AngularJS ermöglicht es Ihnen, s zu verwenden, um template s, die entweder als Inline-oder externe HTML definiert werden könnte. Tatsächlich stellen alle Paketabhängigkeitsmanager und alle Frameworks es in der einen oder anderen Form bereit, weil das heutige Web ohne wiederverwendbare Komponenten undenkbar ist.

Wenn Sie mehr Optionen zu finden, empfehle ich Ihnen für Kombinationen von html, include, templates, loading und components die Suche zu starten.

Seien Sie gewarnt, die meisten JavaScript Bibliotheken kommen mit Overhead. Die beliebtesten bieten jedoch in der Regel eine gewisse Flexibilität, sodass Sie selektiv nur die gewünschten Funktionen erstellen können.

Einschließlich Vorlagen werden höchstwahrscheinlich Teil des Kerns HTML, wenn (und wann) Microsofts HTML Components Übermittlung an das World Wide Web Consortium angenommen wird, unter Verwendung des <component> Tags.
Derzeit ist dies unter Verwendung der AngularJS s type:"E" Direktiven möglich.

Quelle

2017-01-29 00:22:20

Ich würde gerne den Grund für das Down-Vote wissen und was genau der Down-Voter denkt, ist entweder falsch oder unvollständig in Bezug auf meine Antwort. Ich würde mich freuen, es zu verbessern. –

Ich mag, wie diese Antwort das Problem im Kern angeht. Ich würde hier auch einige statische Site-Generatoren auflisten.Ich denke jedoch, es ist erwähnenswert, dass alle Javascript-Lösungen derzeit einen Overhead haben, da zusätzliche Bibliotheken und HTTP-Anfragen im Vergleich zu PHP und SSGs erforderlich sind. * - (nicht der Downvote) * – ppajer

-2

Kopieren Sie einfach Ihre HTML-Markup von navbar aus index.html (oder was auch immer Ihre Datei heißt) und fügen Sie sie auf eine andere Seite. Mach die Dinge nicht komplizierter. Siehe das Bild unten.

Quelle

2017-02-20 16:19:34 LXhelili

Also auf meiner Website, die 5, 10, 50, 100, X Anzahl der Seiten haben, muss ich meinen bearbeiteten Navbar-Code in * jeder * kopieren/einfügen? Das scheint äußerst zweifelhaft. – BruceWayne

Anzeige von Navbar auf mehreren HTML-Seiten mit Bootstrap

Antwort

Verwandte Themen