Question

您好我在bootstrap3中编写导航栏时给出了两个示例。我不知道区别是什么我知道示例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>

示例二：

<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

差异很明显。第二段代码属于使用bootstrap的简单Navbar。而第一个是固定的Navbar，你最常在网站上看到。它包括列表项形式的虚拟导航数据。

您可以使用jsfiddle和plnkr等在线编辑来练习和查看这些示例的结果。

详细了解bootstrap navbar here。

Answer 2

在示例一中，它更高级，更复杂，它有一堆列表显示给网站的查看者，因此它有比例2更多的选项。

在示例二中，只有一堆图像和链接以及一些徽标空间。它看起来像页面的标题，我的意思是它的顶部。第一个示例，看起来像一个内容，可以是标题，或标题之后的描述部分。所以它可以放在正文部分或标题部分，取决于编码器想要如何放置它。对不起，这有点令人困惑。

请记住，标题或正文标记中的内容不会特别改变任何内容，它只是将代码分成几部分，使其更容易理解。

使用Bootstrap 3 /响应式设计进行Navbar编码

2 个答案: