4-1 第四週 - 網站導航

參考網站：https://kkbruce.tw/bs3/Components#navbar
示範網站：https://www.ugm.com.tw/tncomu/nav.html

加入 .navbar-fixed-top 類別可以讓巡覽列固定至頂端，包含 .container 或 .container-fluid 類別讓巡覽列內容置中對齊和左右加入 padding 設置。
 

<!--導覽列 start-->
    <nav class="navbar navbar-default" role="navigation">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <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="#">網站名稱</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">首頁</a></li>
            <li><a href="#">最新消息</a></li>
            <li><a href="#">關於我們</a></li>
            <li><a href="#">聯絡我們</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">管理 <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">後台</a></li>
                <li><a href="#">新聞管理</a></li>
                <li><a href="#">聯絡我們管理</a></li>
                <!--分隔線-->
                <li class="divider"></li>
                <li><a href="#">關於我們</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav><!-- /.nav -->