BS4(3)-首頁

範例結果

二、導覽列

【Documentaion(文件)】>【Components(元件)】>【NavBar(導覽列)】(連結處)

S1:準備工作:依BS官網結構貼入後,進行修改

  <header>
    <!-- Carousel 廣告輪播-->
        ...
        ...
    <!-- NavBar 導覽列 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">巨匠電腦</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
        aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">首頁
              <span class="sr-only">(current)</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">開課查詢</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
              aria-expanded="false">
              課程總覽
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
              aria-expanded="false">
              政府補助
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">全國分校</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">學員專區</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>

S2:CSS美化

S2-1:Html 修改

  <header>
    <!-- Carousel 廣告輪播-->
        ...
    <!-- NavBar 導覽列 -->
    <nav class="navbar navbar-expand-lg navbar-dark">
      <div class="container">
        <a class="navbar-brand  text-hide" href="#">巨匠電腦</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
          aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        ...
        ...
      </div>
    </nav>
  </header>

S2-2:CSS修改

/* NavBar 調整 */
  .navbar{
    background-image: url(../images/navbg.jpg)
  }
  .navbar-brand{
    /* 設定為 text-hide 便於SEO */
    background: url(../images/logo.png) no-repeat;
    width: 190px; height: 36px;
  }

S3:導覽列捲動至[.carousel]高度後置頂

S3-1:JS加入

    // NavBar 導覽列 捲動後至頂
    $(window).scroll(function () {
      if ($(window).scrollTop() > $('.carousel').innerHeight()) {
        $(".navbar").addClass("navFixed");
      }
      else {
        $(".navbar").removeClass("navFixed");
      }
    });

S3-2:CSS美化

.navFixed{
  position: fixed;
  z-index: 100;
  width: 100%;
  top: 0;
  box-shadow: 0 -1px 5px #000;
}