1 <!-- bootstrap导航条 2 1、navbar 申明导航条 3 2、navbar-default 申明默认的导航条样式 4 3、navbar-inverse 申明反白的导航条样式 5 4、navbar-static-top 去掉导航条的圆角 6 5、navbar-fixed-top 固定到顶部的导航条 7 6、navbar-fixed-bottom 固定到底部的导航条 8 7、navbar-header 申明logo的容器 9 8、navbar-brand 针对logo等固定内容的样式 10 9、nav navbar-nav 定义导航条中的菜单 11 10、navbar-form 定义导航条中的表单 12 11、navbar-btn 定义导航条中的按钮 13 12、navbar-text 定义导航条中的文本 14 13、navbar-left 菜单靠左 15 14、navbar-right 菜单靠右 --> 16 <!DOCTYPE html> 17 <html lang="en"> 18 <head> 19 <meta charset="UTF-8"> 20 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 21 <title>Document</title> 22 <script type="text/javascript" src="../jquery-1.12.4.min.js"></script> 23 <script type="text/javascript" src="./js/bootstrap.min.js"></script> 24 <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"> 25 </head> 26 <body> 27 <div class="navbar navbar-inverse navbar-static-top"> 28 <div class="container"> 29 <!-- 定义logo --> 30 <div class="navbar-header"> 31 <button class="navbar-toggle" data-toggle="collapse" data-target="#mymenu"> 32 <span class="icon-bar"></span> 33 <span class="icon-bar"></span> 34 <span class="icon-bar"></span> 35 </button> 36 <a href="#" class="navbar-brand">LOGO</a> 37 </div> 38 39 <div class="collapse navbar-collapse" id="mymenu"> 40 <!-- 定义菜单 --> 41 <ul class="nav navbar-nav"> 42 <li class="active"><a href="#">首页</a></li> 43 <li><a href="#">公司简介</a></li> 44 <li><a href="#">解决方案</a></li> 45 </ul> 46 47 <!-- 定义菜单里的表单 --> 48 <form class="navbar-form navbar-right"> 49 <div class="form-group"> 50 <div class="input-group"> 51 <input type="text" name="" class="form-control"> 52 <span class="input-group-btn"> 53 <button class="btn btn-default"> 54 <span class="glyphicon glyphicon-search"></span> 55 </button> 56 </span> 57 </div> 58 </div> 59 </form> 60 </div> 61 </div> 62 </div> 63 </body> 64 </html>
第四十九节 jQuery之bootstrap导航条
猜你喜欢
转载自www.cnblogs.com/kogmaw/p/12506489.html
今日推荐
周排行