bootstrap-导航菜单

最新推荐文章于 2022-12-08 22:58:56 发布

鲸鱼编程pyhui

最新推荐文章于 2022-12-08 22:58:56 发布

阅读量603

点赞数

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/ifubing/article/details/95293143

版权

导航条

在这里插入图片描述

在这里插入图片描述

注，要先写导航条，再写菜单

是导航条包container

开始

在这里插入图片描述

放样式
在这里插入图片描述
效果

在这里插入图片描述

没有背景

在这里插入图片描述

在这里插入图片描述
因味儿死

灰色的

在这里插入图片描述

在这里插入图片描述

黑色背景

在这里插入图片描述
效果虽然出来了

不过边界有圆角
在这里插入图片描述

解决圆角

在这里插入图片描述

在这里插入图片描述

效果

在这里插入图片描述

小结定义LOGO

在这里插入图片描述

定义菜单

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

定义菜单里面的表单

在这里插入图片描述

在这里插入图片描述

让表单到右边去

在这里插入图片描述

在这里插入图片描述

希望go这里变成图象

使用组件

组件 · Bootstrap v3 中文文档
https://v3.bootcss.com/components/

在这里插入图片描述

替换go，替换前后比较

在这里插入图片描述

在这里插入图片描述

这样子做的导航是具有响应式的

拉小试一试
在这里插入图片描述

在这里插入图片描述

boot的官网的响应试也体验一下

缩小了以后在这里插入图片描述

点击右上角的菜单

在这里插入图片描述

目标菜单

放置的位置

代码写在这里，白色块块的区域

在这里插入图片描述

位于logo同一级上面

在这里插入图片描述

随便打点字，再看效果

在这里插入图片描述

有内容了，但是，目标的效果是小横杠

放入三个小横杠

在这里插入图片描述

效果

在这里插入图片描述

切换效果

期望的效果，菜单一开始是藏起来的

点了右上角的小横杠才出来

原来的样子

在这里插入图片描述

在这里插入图片描述

包裹盒子的样式

在这里插入图片描述

在这里插入图片描述

小结一下，加了两个东西

1，右上角的横杠菜单

在这里插入图片描述

2，给菜单的内容添加盒子

在这里插入图片描述

效果

菜单藏起来了

不过点的时候没有效果

在这里插入图片描述

还需要添加东西

通过属性来加

先来一个用法说明

在这里插入图片描述

通过给id，锁定一个目标

data-toggle用于指定特效是什么

collapse表示踏陷

在这里插入图片描述

再次点击，就可以看见收起与展开的效果了
在这里插入图片描述

至此为止，导航菜单的制作完成

实现了响应式的效果

而且还有小屏时右上角菜单的点击收缩功能

鲸鱼编程pyhui

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
bootstrap-导航菜单

导航条注，要先写导航条，再写菜单是导航条包container开始放样式效果没有背景灰色的黑色背景效果虽然出来了不过边界有圆角解决圆角效果小结定义LOGO定义菜单定义菜单里面的表单让表单到右边去希望go这里变成图象使用组件组件 · Bootstrap v3 中文文档https://v3.bootcss.com...
复制链接

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

打赏作者

鲸鱼编程pyhui 你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20

扫码支付：¥1

获取中

扫码支付

您的余额不足，请更换扫码支付或充值

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。