咪卡四處看

STEP 1：

第一層：使用 .navbar
附加設訂：

• bootstrap v4：
  設定適應度：.navbar-expand{-sm|-md|-lg|-xl}
  設定顏色：color scheme class
• bootstrap v3：
  設定顏色 2版 .navbar-default(灰底) 、.navbar-inverse(黑底)
  設定位置：.navbar-fixed-top(置頂)、.navbar-fixed-bottom(置底)

          PS：Navbar 列印的預設情況為隱藏，如果需要列印時顯示要修改display屬性

內層：
          標頭品牌

• bootstrap v4：
       使用 .navbar-brand
       EX:

    //link
    <a class="navbar-brand" href="#">MybrandName</a>
    //text  
    <span class="navbar-brand">MybrandName</span>
    //pic + text 
    <a class="navbar-brand" href="#">
      <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
      MybrandName
   </a>

• bootstrap v3：
      外包 .navbar-header， 再使用 .navbar-brand
      EX:

    //link
    <div class="navbar-header">
  	<a class="navbar-brand" href="#">MybrandName</a>
    </div>
    //text
    <div class="navbar-header">
  	<span class="navbar-brand">MybrandName</span>
    </div>
    //pic + text
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="" src="/assets/brand/bootstrap-solid.svg">MybrandName
      </a>
    </div>

完整程式

<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#top_menu" aria-expanded="false">
     <span class="sr-only">Toggle navigation</span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
  </button>
  <a id="web_top_logo" class="navbar-brand web-top-brand" href="#">
    <img class="web-top-brand-img" alt="Brand" src="small.png">
  </a>
</div>
<div id="top_menu" class="navbar-collapse collapse">
......
</div>

調整適應性方法 

		
        @media (max-width: 1020px) {
		    .navbar-header {
		        float: none;
		    }
		    .navbar-toggle {
		        display: block;
		    }
		    .navbar-collapse {
		        border-top: 1px solid transparent;
		        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
		    }
		    .navbar-collapse.collapse {
		        display: none!important;
		    }
		    .navbar-collapse.collapse.in {
		        display: block!important;
		        overflow-y: auto;
		    }
           .navbar-fixed-top .navbar-collapse,
       .navbar-static-top .navbar-collapse,
       .navbar-fixed-bottom .navbar-collapse {
          padding-right: 15px;
         padding-left: 15px;
       }
		    .navbar-nav {
		        float: none!important;
		        margin: 7.5px -15px;
		    }
		    .navbar-nav>li {
		        float: none;
		    }
		}

TAG

使用 .navbar-nav

• bootstrap v4：

  <ul class="navbar-nav">
  	<li class="nav-item"><a class="nav-link" href="#">FIRST</a></li>
  	<li class="nav-item"><a class="nav-link" href="#">SECOND</a></li>
  	<li class="nav-item dropdown">
  		<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  		  THIRD<b class="caret"></b>
  		</a>
  		<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
  		  <a class="dropdown-item" href="#">THIRD_FIRST</a>
  		  <a class="dropdown-item" href="#">THIRD_SECOND</a>
  		</div>
  	</li>
  </ul>

• bootstrap v3：

  <ul class="nav navbar-nav"> //.navbar-nav可改其他樣式 .nav-tabs、.nav-pills
    <li role="presentation"><a href="#">FIRST</a></li>
    <li role="presentation"><a href="#">SECOND</a></li>
    <li role="presentation" class="dropdown" >
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">  //data-toggle 點擊該超連結時，出現下拉式選單
          THIRD<b class="caret"></b>
      </a>
      <ul class="dropdown-menu">  //下拉選單內容
          <li><a href="#">THIRD_FIRST</a></li>
  	    <li><a href="#">THIRD_SECOND</a></li>
      </ul>
    </li>
  </ul>

參考網址：

https://v3.bootcss.com/

http://www.runoob.com/bootstrap/bootstrap-navbar.html

https://bootstrap.hexschool.com/docs/4.0/getting-started/introduction/

V.4官方範例 https://v4.bootcss.com/docs/4.0/examples/#navbars

V.3 V.4 差異 https://getbootstrap.com/docs/4.0/migration/#navbar

https://pjchender.blogspot.com/2015/04/bootstraptabsnavigation-bar.html