Bootstrap响应式导航

2024-04-27 15:05:35

字体：大中小

来源：转载

供稿：网友

效果展示 宽屏的时候中屏的时候窄屏的时候

引用需要注意的 不要忘记引用Bootstrap的js文件！不要忘记引用Bootstrap的js文件！不要忘记引用Bootstrap的js文件！不然在窄屏的时候点击右边的图标不会出现下拉菜单。

代码

<div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> 　 <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>  <a href="##" class="navbar-brand">慕课网</a> </div>  <div class="collapse navbar-collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="##">网站首页</a></li> <li><a href="##">系列教程</a></li> <li><a href="##">名师介绍</a></li> <li><a href="##">成功案例</a></li> <li><a href="##">关于我们</a></li> </ul> </div></div>

笔记来源

上一篇：Struts2——拦截器(interceptor)

下一篇：Swiper库的一些基本使用