多个页面中的引导导航栏

Question

关于引导导航栏的问题。

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

Answer 1

您的问题实际上不是关于引导程序的问题。

由于您使用的是引导程序，因此您必须使用 jQuery。您可以使用 load() 这是 ajax 的一个功能来做到这一点。

您可以在这里.load() | jQuery API Documentation获取API的详细信息

Answer 2

这个问题真的不清楚，但是如果您问是否应该使用导航栏和动态站点，或者只是将导航栏放在每个页面中，答案是 w/e 您想要做的是好的，两者都是有效的选择。

例子：

<!-- 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 和一个带有用于显示所有数据的容器的导航栏。

希望对你有帮助。