Bootstrap header - 正确的顺序

Question

我必须用 bootstrap 创建一个 header/navbar，但我不确定正确的顺序和方法。

我需要这样的：

折叠时：

我应该把所有东西都放在 NAV 标签里吗？
我正在使用 header，我应该保留它吗？

<header id="main-nav">
  <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-responsive">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand hidden-xs" href="/"><img class="img-responsive" src="/images/logo.png"></a>
        <a class="navbar-brand visible-xs" href="/"><img class="img-responsive" src="/images/logo-xs.png"></a>
      </div>
      <div class="collapse navbar-collapse" id="navbar-responsive">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="/home">Home</a></li>
          <li><a href="/empresa">Empresa</a></li>
          <li><a href="/servicos">Serviços</a></li>
          <li><a href="/sistemas">Sistemas</a></li>
          <li><a href="/planos">Planos</a></li>
          <li><a href="/contato">Contato</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

非常感谢任何帮助！ =)

Answer 1

您可以从 the default navbar 开始，然后使用 Home link 而不是 Brand。将logo等link放在导航栏前面
将 hidden-xs 和 visible-xs 类应用于图像本身。并将它们放在一个普通的 link 中。

<header id="main-nav">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 text-right">
        <a href="/call-now">call-now</a>
        <a href="/support">support</a>
      </div>
    </div>
    <div class="row">
      <a class="header-logo" href="/">
        <img class="img-responsive hidden-xs" src="//placehold.it/1600x120/936/c69/?text=logo.png">
        <img class="img-responsive visible-xs" src="//placehold.it/800x90/693/9c6/?text=logo-xs.png">
      </a>
    </div>
  </div>

  <nav class="navbar navbar-inverse navbar-static-top">
    <div class="container">
      <div class="navbar-header">
        <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar-responsive" aria-expanded="false">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/home">Home</a>
      </div>
      <div class="collapse navbar-collapse" id="navbar-responsive">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="/empresa">Empresa</a></li>
          <li><a href="/servicos">Serviços</a></li>
          <li><a href="/sistemas">Sistemas</a></li>
          <li><a href="/planos">Planos</a></li>
          <li><a href="/contato">Contato</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Bootstrap header - 正确的顺序

Bootstrap header - correct order

html

navbar

twitter-bootstrap-3