Bootstrap Navbar in multiple pages - html

Question

Having a problem regarding bootstrap navbar.
I am placing the navbar code in every page or should I place the navbar code in a single file and access it in all pages?

Answer 1

Your question actually does not a question about bootstrap.
Since you are using the bootstrap, you must be using jQuery. You can use load() which is a function of ajax to do this.
You can get the detail of the API here .load() | jQuery API Documentation

Answer 2

The question is really not clear, but if you are asking if you should use the navbar and a dynamic site or just put the navbar in every page, the answer is w/e you want to do is okey, both are valid choices.
Examples:
<!-- Preloader -->
<div class="page-preloader preloader-wrapp">
<img src="assets/images/snr-logo.png" alt="">
<div class="preloader"></div>
</div>
<!-- /Preloader -->
<!-- Navbar -->
<nav class="navbar-youplay navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="off-canvas" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/"> <img
src="assets/images/batman.jpg" alt="flogo">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="home"><a href="#/"> <span
class="glyphicon glyphicon-home"></span> <strong>Home</strong><span
class="label">--->Inicio</span></a></li>
<li class="av navbar-nav"><a href="#/turno/portada"
class="dropdown-toggle" role="button" aria-expanded="false"> <strong>Sacar Turno</strong>
<span class="label">Más información</span>
</a></li>
<li class="av navbar-nav"><a href="#/turno/mod"
class="dropdown-toggle" role="button" aria-expanded="false"> <strong>Modificar un Turno</strong>
<span class="label">Más información</span>
</a></li>
<li class="av navbar-nav"><a href="#/horario"
class="dropdown-toggle" role="button" aria-expanded="false"> <strong>Horario</strong>
<span class="label">Más información</span>
</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#/login"><span class="glyphicon glyphicon-log-in"></span>
Iniciar</a></li>
</ul>
</div>
</div>
</nav>
<!-- /Navbar -->
<!-- Separation -->
<br>
<br>
<br>
<br>
<br>
<!-- /Separation -->
<!-- Main Dynamic Body -->
<div data-ng-view class="container"></div>
<!-- /Main Dynamic Body -->
<!-- Footer -->
<footer>
<p>
Informatica y Comunicaciones SNR © 2015-2016.
</footer>
<!-- /Footer -->
<!-- Loader -->
<script type="text/javascript" src="scripts/services/loader.js"></script>
<!-- init loader -->
<script>
if (typeof youplay !== 'undefined') {
youplay.init({
smoothscroll : false,
});
}
</script>
<script type="text/javascript">
$(".countdown").each(function() {
$(this).countdown($(this).attr('data-end'), function(event) {
$(this).text(event.strftime('%D days %H:%M:%S'));
});
})
</script>
##
I'm using AngularJs and a single Navbar with a container for showing all the data.
Hope it helps.