生活随笔
收集整理的這篇文章主要介紹了
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）
當屏幕較大時，效果如下。
當屏幕較小時，一般指手機頁面。
點擊右側按鈕，可以展開導航。
文中參考代碼來自：https://getbootstrap.com/docs/4.0/components/navbar/
效果圖來自：http://www.angularjs.cn/
源代碼：百度云 鏈接：http://pan.baidu.com/s/1eRUMJVc 密碼：dd99
碼云：https://gitee.com/xiaohuOni/oniplan-ng
有碼云的幫忙給個star，感謝。
這節課的內容就到這里完成了。
感謝您的閱讀。
我是莽夫，希望你開心。
如果你覺得本文對你有幫助，請掃描文末二維碼，支持博主原創。
希望大家關注我的個人公眾號ionic_
轉載于:https://www.cnblogs.com/xiaohuoni/p/7642251.html
總結
以上是生活随笔為你收集整理的Angular最新教程-第六节编写响应式导航栏的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
