bootstrap响应式导航

本人正在学习前端,最近学会了利用bootstrap框架制作响应式导航

何为响应式导航呢，就是如果用户对屏幕进行拉伸，当屏幕的宽度小于748px，导航栏会被折叠，呈汉堡形状。如下图：

并且可以通过点击右侧折叠栏（汉堡状的）展开导航栏，如下图：

再次点击折叠栏导航条又会收缩，恢复为原状

当屏幕宽度在748px及以上时，导航栏又会展开，如下图：

这效果是不是很棒阿？不要急，下面我们来一步步去实现它：首先去bootstrap中文网下载bootstrap,然后解压，在disc文件夹中可以找到下面所需的CSS和JS文件。

第一步在新建的html文件中引入bootstrap框架的css样式文件

再在页面底部引入bootstrap的js脚本文件

注意jquery.js一定要在bootstrap.min.js文件前面

再在body里加入以下代码：

这就是我们bootstrap响应式导航的做法。里面用到的类名都bootstrap里封装好的css，如果不懂可以去bootstrap中文网浏览学习。好了，我的分享到此结束。谢谢大家