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

    文章標籤

    bootstrap css js web

    全站熱搜

    咪卡恰比 發表在 痞客邦 留言(0) 人氣()