如何用bootstrap做出一个响应式汉堡导航

本人菜鸡一枚,最近刚学完,趁热给大家分享一下。

1.解释一下什么叫做响应式汉堡导航。

就是在屏幕小于750px的时候,导航条自动折叠成汉堡式。


未折叠之前:


折叠之后


点击汉堡

2.关于如何制作

(1)首先要在bootstrap上面下载bootstrap的组件,然后要html头部引用bootstrap.min.css或者bootstrap.css

(2)在导航头部写入button标签,button标签中包含span标签,同时引用bootstrap中的导航折叠类。具体如下

部分代码

(3)编辑完导航部分的html后,再去另建一个CSS或者在style中编辑自己想要的样式结果即可。

3.如有错误,欢迎指正。谢谢大家!

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,338评论 3 119
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,315评论 1 92
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 16,515评论 4 61
  • 树能奉献它的花朵和芳香,鸟儿能奉献它的歌声。小朋友们也能奉献哦,而且是独一无二——爱心。 生活智能——《有爱的小天...
    RYB塔塔班2阅读 481评论 0 0
  • 我叫福艾君是福慧艾灸贴的小编,是一个工作狂人,熬夜加班是常态,三餐基本靠外卖,运动五分钟 喘气一小时,时时感觉身体...
    至此年各天涯阅读 301评论 0 0

友情链接更多精彩内容