这节课我们讲解如何使用bootstrap 4 编写响应式布局。
参考图我们还是参照Angular中文社区
图中标注红色的部分,我自己不是很喜欢,所以做了一点小改动。
他这里也没有做响应式布局,所以样式就不抄他的,我们自己重写。
首先我们先简要的分析一下这个navbar。
整体是一个黑色的navbar。
参考代码: <nav> <!-- Navbar content --> </nav>
最左边是一个带有图片的标题。
参考代码:
中间部分和右边部分,我们使用分别是两组状态。
整体我们还要实现响应式的布局。
参考代码:
把上面的代码组合起来就能实现响应式的导航栏了。
但是要使用bootstrap 我们要先下载它的文件,并在我们的项目中使用它。
这里我们不下载,我们使用cdn的方式,直接从网络上加载资源。
在src\index.html文件中,加入bootstrap的逻辑和样式文件
新建一个navbar组件。(方法同上节课)运行 ng generate component main-navbar
刷新项目,在src\app\main-navbar\main-navbar.component.html中编写。 <nav> <a href="#"> <img src="" alt=""> Angular中文社区 </a> <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span></span> </button> <div> <ul> <li> <a href="#">动态</a> </li> <li> <a href="#">官方文档</a> </li> <li> <a href="http://blog.csdn.net/onil_chen">CSDN</a> </li> </ul> <ul> <li> <a href="#">注册</a> </li> <li> <a href="#">登录</a> </li> </ul> </div> </nav>
在src\app\app.component.html中使用main-navbar组件<app-main-navbar></app-main-navbar>
保存运行。(方法参见第三节在谷歌浏览器中调试Angular)
当屏幕较大时,效果如下。
当屏幕较小时,一般指手机页面。
点击右侧按钮,可以展开导航。
文中参考代码来自:https://getbootstrap.com/docs/4.0/components/navbar/
效果图来自:
源代码:百度云 链接: 密码:dd99
码云:https://gitee.com/xiaohuOni/oniplan-ng
有码云的帮忙给个star,感谢。