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 -->
<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 &copy; 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.