Html 在每页之间保留导航栏_Html_Css_Twitter Bootstrap 3

Html 在每页之间保留导航栏

html css twitter-bootstrap-3

Html 在每页之间保留导航栏,html,css,twitter-bootstrap-3,Html,Css,Twitter Bootstrap 3,我刚刚开始搞web开发，我只有struts2开发的经验，我用sitemesh装饰页面。我对web开发很好奇，我想开始只使用twitter bootstrap创建一个网站，但我不确定如何在页面之间保持导航栏我有点迷路了所以。。。在这个问题上有什么“好的做法”吗？我在谷歌上搜索了一段时间，在这个话题上没有找到什么帮助。我是否应该创建一个HTML文件，并在所有页面上以任何方式“导入”它？您通常是如何操作的？只需将您的导航栏div从index.html移动到另一个文件，比如navbar.php，然后在

我刚刚开始搞web开发，我只有

struts2

开发的经验，我用

sitemesh

装饰页面。我对web开发很好奇，我想开始只使用

twitter bootstrap

创建一个网站，但我不确定如何在页面之间保持导航栏

我有点迷路了所以。。。在这个问题上有什么“好的做法”吗？我在谷歌上搜索了一段时间，在这个话题上没有找到什么帮助。我是否应该创建一个

HTML

文件，并在所有页面上以任何方式“导入”它？您通常是如何操作的？

只需将您的导航栏div从

index.html

移动到另一个文件，比如

navbar.php

，然后在删除导航栏的行中添加以下内容：

<?php include ('navbar.php'); ?>

确保：

将索引文件的扩展名从index.html重命名为index.php

将navbar.php与索引文件保持在同一目录中。（如果您将其保存在不同的目录中，则在上面的php代码中相应地指定它）

示例：

如果这是您当前的代码：

<body>
  <nav role="navigation" class="navbar navbar-default">
      <div class="navbar-header">
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">Brand</a>
      </div>
        <div id="navbarCollapse" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Messages</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Login</a></li>
          </ul>
        </div>
    </nav>
    <!--Rest of your page contents-->
    ....
</body>


切换导航








....

然后只需提取navbar部分并将其移动到navbar.php文件中，您的索引文件现在将如下所示：

<body>
      <?php include ('navbar.php'); ?>
      <!--Rest of your page contents-->
      ....
</body>


....

谢谢，这就是我要找的。顺便说一句，我浏览了一下你的个人网站和作品集：）