bootstrap响应式导航

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

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


并且可以通过点击右侧折叠栏(汉堡状的)展开导航栏,如下图:


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

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

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

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

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

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

再在body里加入以下代码:

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

你可能感兴趣的:(bootstrap响应式导航)