导航条
注,要先写导航条,再写菜单
是导航条包container
开始
放样式
效果
没有背景
因味儿死
灰色的
黑色背景
效果虽然出来了
不过边界有圆角
解决圆角
效果
小结定义LOGO
定义菜单
定义菜单里面的表单
让表单到右边去
希望go这里变成图象
使用组件
组件 · Bootstrap v3 中文文档
https://v3.bootcss.com/components/
替换go,替换前后比较
这样子做的导航是具有响应式的
拉小试一试
boot的官网的响应试也体验一下
缩小了以后
点击右上角的菜单
目标 菜单
放置的位置
代码写在这里,白色块块的区域
位于logo同一级上面
随便打点字,再看效果
有内容了,但是,目标的效果是小横杠
放入三个小横杠
效果
切换效果
期望的效果,菜单一开始是藏起来的
点了右上角的小横杠才出来
原来的样子
包裹盒子的样式
小结一下,加了两个东西
1,右上角的横杠菜单
2,给菜单的内容添加盒子
效果
菜单藏起来了
不过点的时候没有效果
还需要添加东西
通过属性来加
先来一个用法说明
通过给id,锁定一个目标
data-toggle用于指定特效是什么
collapse表示踏陷
再次点击,就可以看见收起与展开的效果了
至此为止,导航菜单的制作完成
实现了响应式的效果
而且还有小屏时右上角菜单的点击收缩功能