Bootstrap 3 /レスポンシブデザインを使用したNavbarコーディング

Question

こんにちは私は、bootstrap3でnavbarをコーディングする際に2つの例を挙げました。私は違いが何であるか分かりません。例1は固定で応答性がありますが、ex 1は<div>にあり、ex 2はヘッダーに設定されています。両方がうまくいくので混乱しますが、どちらが良いですか。

例1

<!-- Fixed navbar --> 
    <div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <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="#">COMPANY</a> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a href="#">Welcome</a></li>  
       <li><a href="#about">Create</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">lorem<b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
       <li class="dropdown-header"> lorem</li> 
       <li class="dropdown-header">lorem</li 
        <li class="divider"></li> 
        <li class="dropdown-header">lorem</li> 
        <li class="dropdown-header">lorem</li> 
       <li class="divider"></li> 
       <li class="dropdown-header">lorem</li> 
       <li class="dropdown-header">lorem</li> 
       </ul> 
      </li>    
      <li><a href="#">Dashboard</a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </div> 

例2：

<header> 
    <nav id="header-nav" class="navbar navbar-default"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <a href="index.html" class="pull-left visible-md visible-lg"> 
      <div id="logo-img"></div> 
      </a> 
      <div class="navbar-brand"> 
      <a href="index.html"><h1>David Chu's China Bistro</h1></a> 
      <p> 
       <img src="images/star-k-logo.png" alt="Kosher certification"> 
       <span>Kosher Certified</span> 
      </p> 
      </div> 
     </div> 
     </div> 
    </nav> 
    </header> 

Answer 1

差は非常に明白です。 2番目のコードスニペットは、ブートストラップを使用する単純なNavbarに属しています。最初のものは、あなたがウェブサイトのほとんどで見た固定Navbarです。それは、リストアイテムの形でダミーのナビゲーションデータを含む。

jsfiddleおよびplnkrのようなオンラインエディタを使用して、これらの例の実践と結果を表示できます。

詳細については、ブートストラップnavbar hereを参照してください。

Answer 2

例1では、これは高度で複雑なので、Webサイトの閲覧者に表示されるリストがたくさんあるので、例2よりも多くのオプションがあります。

例2では、​​画像とリンクの束とロゴのためのスペースがあります。それはちょうどページのヘッダーのように見える、私はそれのまさにトップを意味する。 最初の例は、ヘッダーか、ヘッダーの後に来る記述的な部分のどちらかの内容のように見えます。だから、それはボディパーツかヘッダーパーツのどちらかに置くことができ、コーダーがそれをどのように置くかに依存します。申し訳ありませんが混乱の種です。

ヘッダーまたはボディタグ内にあるコンテンツは特に変更されず、コードを部分に分割するだけで理解しやすくなります。