Bootstrap 自适应导航栏

注意:
点击滑动出内容貌似jquery 版本要高于1.9.2才可以,我开始1.7.2的不起作用,后来换成了3.1.1版本。

为公司制作一个信息展示页面,使用了bootstrap组件,除头底部外,中间是三栏的页面,如下:

Bootstrap 自适应导航栏

左边的导航栏,在自适应后会变成下面的样子:
默认
Bootstrap 自适应导航栏
点击按钮后
Bootstrap 自适应导航栏

导航栏处的代码

<nav class="nav">											
											<div class="navbar-header">
												 <button class="navbar-toggle" data-toggle="collapse" data-target="#menu">
						                <span class="icon-bar"></span>
						                <span class="icon-bar"></span>
						                <span class="icon-bar"></span>
						            	</button>
			            				<li class="page-bor-dh font_dh text-center">信息导航栏</li>
			        				</div>
											
											<div id="menu" class="collapse navbar-collapse">
			            				<ul class="nav navbar-nav">
														<li class="gd"><a href="">首页</a></li>
														<li class="gd"><a href="">介绍</a></li>
														<li class="gd"><a href="">团队</a></li>
														<li class="gd"><a href="">活动</a></li>
													</ul>
			        				</div>								
								</nav>

css部分修改

因为默认导航组件是将li元素浮动,让所有内容横排,但我们在电脑端需要坚排,所以需要修改一下。
如果你的是横排,下面的第一行不需要修改。
.navbar-header,.navbar-nav,.navbar-nav>li { float:none;}  /* 祛除列表横行排列*/
.navbar-toggle .icon-bar { background:#000} /*我使用后那个三条线按钮不显示,自己加了个颜色*/

要点:

以上代码嵌入到页面中,你只需改两处即可,其它的都不用动(当然css可能需要略修改)。
第一处
下面这块是你要在自适应时显示的内容,如果没有直接删掉。
<li class="page-bor-dh font_dh text-center">信息导航栏</li>
第二处
下面属于点击按钮才会出现的内容。
<li class="gd"><a href="/">首页</a></li>
<li class="gd"><a href="">介绍</a></li>
<li class="gd"><a href="">团队</a></li>
<li class="gd"><a href="">活动</a></li>



评论

大侠名号:   验证暗号: 点击我更换图片

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND