bootstrap响应式导航

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0"> 
<title>Bootstrap Demo1</title> 
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
	
    <div class="navbar navbar-fixed-top navbar-inverse">
    	<div class="navbar-inner">
        	<div class="container" style="padding:0 20px;">
            	<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                	<span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="#">Bokebi</a>
                <div class="nav-collapse collapse">
                	<ul class="nav">
                    	<li class="active"><a href="#">首页</a></li>
                    	<li><a href="#">冠体</a></li>
                    	<li><a href="#">需求</a></li>
                    	<li class="dropdown">
                        	<a class="dropdown-toggle" data-toggle="dropdown" href="#">发布冠体<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                            	<li><a href="#">冠体1</a></li>
                            	<li><a href="#">冠体2</a></li>
                            	<li><a href="#">冠体3</a></li>
                            	<li><a href="#">冠体4</a></li>
                                <!--<li class="divider"></li>-->
                            </ul>
                        </li>
                    	<li><a href="#">发布需求</a></li>
                    </ul>
                    <form class="form-search navbar-form pull-right" action="">
                        <input class="form-search" placeholder="搜索产品..." type="text" name="" id="">
                        <button class="btn btn-danger">搜索</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
  	
</body>
</html>

预览效果截图

屏幕缩放后效果

屏幕缩放后展开导航效果

值得注意的地方：

1.<Meta name="viewport" content="width=device-width,initial-scale=1.0">,手机移动端必写，这里就不做解释了

2.bootstrap中css、js的引用，这里我要强调的是引用的顺序

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.js"></script>

先引用bootstrap.css，再引用 bootstrap-responsive.css，最后引用自己写的css文件，js是先引用jquery的库文件，然后引用bootstrap的库文件

顺序很重要，之前写这些，没注意顺序，响应式效果半天出不来，有点小郁闷，所以就写下这篇博客，提醒自己，记录自己在学习中遇到的问题。

bootstrap响应式导航

相关推荐