Angular最新教程-第六節編寫響應式導航欄

這節課我們講解如何使用bootstrap 4 編寫響應式佈局。
參考圖我們還是參照Angular中文社區http://www.angularjs.cn/

圖中標註紅色的部分，我自己不是很喜歡，所以做了一點小改動。
他這裏也沒有做響應式佈局，所以樣式就不抄他的，我們自己重寫。
首先我們先簡要的分析一下這個navbar。
整體是一個黑色的navbar。
參考代碼：

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

最左邊是一個帶有圖片的標題。
參考代碼：

<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

中間部分和右邊部分，我們使用分別是兩組狀態。
整體我們還要實現響應式的佈局。
參考代碼：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</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">
      ...
    </ul>
    <ul class="navbar-nav my-2 my-lg-0">
      ...
    </ul>
  </div>
</nav>

把上面的代碼組合起來就能實現響應式的導航欄了。
但是要使用bootstrap 我們要先下載它的文件，並在我們的項目中使用它。
這裏我們不下載，我們使用cdn的方式，直接從網絡上加載資源。
在src\index.html文件中，加入bootstrap的邏輯和樣式文件

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

新建一個navbar組件。（方法同上節課）運行 ng generate component main-navbar

刷新項目，在src\app\main-navbar\main-navbar.component.html中編寫。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">
    <img src="../../assets/logo.png" width="30" height="30" 
    class="d-inline-block align-top" alt="">
    Angular中文社區
  </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="#">動態</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">官方文檔</a>
    </li>
    <li class="nav-item">
      <a class="nav-link " href="http://blog.csdn.net/onil_chen">CSDN</a>
    </li>
  </ul>
  <ul class="navbar-nav my-2 my-lg-0">
      <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>

在src\app\app.component.html中使用main-navbar組件<app-main-navbar></app-main-navbar>
保存運行。（方法參見第三節在谷歌瀏覽器中調試Angularhttp://blog.csdn.net/onil_chen/article/details/77964095）
當屏幕較大時，效果如下。

當屏幕較小時，一般指手機頁面。

點擊右側按鈕，可以展開導航。