ブートストラップヘッダー - 正しい順序

Question

ブートストラップでヘッダー/ナビゲーションバーを作成する必要がありますが、正しい順序と方法については疑問があります。

私はこのようにそれを必要とする：

、いつ崩壊：

私はNAVタグ内にすべてをかけるべきでしょうか？
ヘッダーを使用していますが、そのまま使用しますか？

<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

1. あなたはthe default navbarで始まり、代わりにBrandのHomeリンクを使用することができます。ナビゲーションバーの前にロゴやその他のリンクを配置します。

2. 画像自体にhidden-xsとvisible-xsクラスを適用します。そしてそれらを1つの共通のリンクの中に入れてください。

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