bootstrap响应式导航

发布时间：2020-12-17 21:11:39 所属栏目：安全来源：网络整理

导读：!DOCTYPE html html lang="en" head meta charset="utf-8"meta name="viewport" content="width=device-width,initial-scale=1.0" titleBootstrap Demo1/title link href="css/bootstrap.css" rel="stylesheet"link href="css/bootstrap-responsive.css" rel

<!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的库文件

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!