Question

有关bootstrap导航栏的问题。

我将导航栏代码放在每个页面中，还是应该将导航栏代码放在一个文件中并在所有页面中访问它？

Answer 1

你的问题实际上不是关于bootstrap的问题。

由于您使用的是bootstrap，因此您必须使用jQuery。您可以使用load()这是ajax的函数来执行此操作。

您可以在.load() | jQuery API Documentation

获取API的详细信息

Answer 2

这个问题真的不太清楚，但是如果你问是否应该使用导航栏和动态网站，或者只是将导航栏放在每个页面中，答案就是你要做的就是okey，两者都是有效的选择。

示例：

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

##

我正在使用AngularJs和一个带有容器的Navbar来显示所有数据。

希望它有所帮助。

Bootstrap Navbar有多个页面

2 个答案: