Bootstrap Navbar In Multiple Pages

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?

Solution 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

Solution 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 --><divclass="page-preloader preloader-wrapp"><imgsrc="assets/images/snr-logo.png"alt=""><divclass="preloader"></div></div><!-- /Preloader --><!-- Navbar --><navclass="navbar-youplay navbar navbar-default navbar-fixed-top"><divclass="container"><divclass="navbar-header"><buttontype="button"class="navbar-toggle collapsed"data-toggle="off-canvas"data-target="#navbar"aria-expanded="false"aria-controls="navbar"><spanclass="sr-only">Toggle navigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="#/"><imgsrc="assets/images/batman.jpg"alt="flogo"></a></div><divid="navbar"class="navbar-collapse collapse"><ulclass="nav navbar-nav"><liclass="home"><ahref="#/"><spanclass="glyphicon glyphicon-home"></span><strong>Home</strong><spanclass="label">--->Inicio</span></a></li><liclass="av navbar-nav"><ahref="#/turno/portada"class="dropdown-toggle"role="button"aria-expanded="false"><strong>Sacar Turno</strong><spanclass="label">Más información</span></a></li><liclass="av navbar-nav"><ahref="#/turno/mod"class="dropdown-toggle"role="button"aria-expanded="false"><strong>Modificar un Turno</strong><spanclass="label">Más información</span></a></li><liclass="av navbar-nav"><ahref="#/horario"class="dropdown-toggle"role="button"aria-expanded="false"><strong>Horario</strong><spanclass="label">Más información</span></a></li></ul><ulclass="nav navbar-nav navbar-right"><li><ahref="#/login"><spanclass="glyphicon glyphicon-log-in"></span>
                        Iniciar</a></li></ul></div></div></nav><!-- /Navbar --><!-- Separation --><br><br><br><br><br><!-- /Separation --><!-- Main Dynamic Body --><divdata-ng-viewclass="container"></div><!-- /Main Dynamic Body --><!-- Footer --><footer><p>
        Informatica y Comunicaciones SNR &copy; 2015-2016.
</footer><!-- /Footer --><!-- Loader --><scripttype="text/javascript"src="scripts/services/loader.js"></script><!-- init loader --><script>if (typeof youplay !== 'undefined') {
        youplay.init({
            smoothscroll : false,
        });
    }
</script><scripttype="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.