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_