All geek questions in one place

Showing navigation bar on multiple html pages using bootstrap

I have been looking for an answer to this question for some time. I use the Bootstrap framework to create a portfolio website. I completed my index.html with navbar with a fixed top:

This is the home page. The top shows the navigation bar.

This navigator has links to the bio page, the projects drop-down menu, and the contact page. I created separate html pages for each of them (for example: I have index.html, bio.html, contact.html, video.html, design.html, etc.). However, when I click links, they do not display the navigation bar and other formatting.

I have this html graphic design code:

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

And here is what appears: graphicdesign.html page

I wanted to know if there is a way to harmonize the navigator on every HTML page in the project.

I saw this: Bootstrap Navbar on several pages , but I find it hard to load it using jQuery.

I also saw this: Do I need to duplicate the navigator code on each page using Bootstrap? but I do not want to use PHP.

Thank you for your time.

+6
source share
4 answers

First of all, I congratulate you on your question.
It addresses one of the basic needs and most important principles of programming: DRY , which is the main reason for developing and implementing most common web technologies, such as php or CSS (which can be additionally DRY-ed on LESS or SASS ).

php , for example, was invented and instantly widely accepted mainly due to this “very cool new (at that time) function”: all you had to do was change the extension from .html to .php , and you could enable other parts using:

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

Commonly referred to as loading a template / component , it is also a common task using JavaScript . This gives several libraries. For example, jQuery provides $.load() , and AngularJS allows you to use directive to include template s, which can be defined as embedded or external HTML . In fact, all package dependency managers and all frameworks provide it in one form or another, because today the network is unthinkable without reusable components.

If you want to find more options, I suggest you start looking for combinations of HTML , include , templates , loading and components .

Be careful, most JavaScript libraries have overhead. However, the most popular ones tend to provide some flexibility, allowing you to selectively create only the features you want.

The inclusion of templates is likely to become part of the core of the HTML if (and when) Microsoft HTML components in the World Wide Web Consortium will be adopted using the <component> .
This is currently possible with the AngularJS type:"E" directives.

+6
source

To enable your navbar on every page, you must use either php or javascript . Otherwise, you just have to copy the html markup paste to each page. just try these two steps -

HTML

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

JAVASCRIPT

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

Note: Make sure that you do not add bootstrap CDN s to the footer.html file.

Edit

As mentioned in the andrei comment, yes, it is very important to know that my answer requires jquery .

To use jquery, you need to use the following cdn in the head tag, or you can load jquery and feed it from your own file system.

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

Since the title of the question attracts people interested in the Bootstrap navigation bar, here is a demo of the navigation bar. Both Bootstrap and jQuery are assumed.

My main task is to show how to properly activate the navigation link, which should be different on each page.

nav-bar.html

 <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <a class="navbar-brand" href="#"> <img alt="Brand" src="icon.png"> <span class=px-2>My Site</span> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav ml-auto"> <li class="nav-item "> <a class="nav-link" href="#">Home Page </a> </li> <li class="nav-item"> <a class="nav-link" href="#">Page1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Page2</a> </li> </ul> </div> </nav>

Now put the following code in the <head> section of each page where the navigation bar should be displayed.

Note the li:nth-child(2) . The number must be adapted in each HTML source according to its position in the navigation bar.

 <script type="text/javascript"> window.onload = function(){ $.get("navbar.html", function(data){ $("#common-navbar").html(data); $('.navbar-nav').find('li:nth-child(2)') .addClass('active') .find('a').append('<span class="sr-only">(current)</span>'); }); } </script>

Now it remains to launch each page with a div in which the navigation bar will be loaded:

 <body> <div id="common-navbar"></div>
0
source

Just copy the navbar html markup from index.html (or whatever file is being called) and paste it into another page. Do not complicate things. See the figure below. enter image description here

-3
source

Source: https://habr.com/ru/post/1263518/

More articles:


All Articles