标签：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!--支持IE8的渲染模式--> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <!--移动设备优先--> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>我的开发</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="css/index.css"/> </head> <body> <!--1.导航条 role="navgation" 指定角色是导航条 --> <nav class="navbar navbar-default navbar-fixed-top " role="navgation"> <div class="container"> <!--1.1导航条的头部--> <div class="navbar-header"> <!--navbar-toggle 表示屏幕小于768px出现，其他隐藏 collapse 容器是否显示,也是根据屏幕的分辨率 data-toggle="collapse" data-target=".navbar-collapse(类选择器)" 这是js中的东西 --> <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <!--按钮上的三条线--> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!--如果是设置图片--> <!--<a class="navbar-brand" href="#"> <img alt="Brand" src="..."> </a>--> <a href="index.html" class="navbar-brand">我是LOGO</a> </div> <!--导航--> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#home">首页</a></li> <li><a href="#bbs">论坛</a></li> <li><a href="#html5">前端开发</a></li> <li><a href="#course">最新课程</a></li> <li><a href="#app">移动APP</a></li> <li><a href="#contact">联系我们</a></li> </ul> </div> <!--导航--> </div> </div> </nav> <!--注意：删除导航条锁定，内容的padding-top:50px设置才不会被导航条遮挡--> <!--2.删格系统 container-fluid 全屏宽度 --> <div class="container-fluid" style="padding-top:50px;"> <div class="row"> <div class="col-md-6"> <!--图片的响应式样式 width="100%" height="auto"--> <img src="#" class="img-responsive"/> </div> <div class="col-md-6">第二个</div> </div> </div> <!--导入时要特别注意：一定要先导入jquery js 再导入 bootstrap的js--> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js" ></script> <script> $(function(){ /*小屏幕导航点击关闭菜单*/ $(‘.navbar-collapse a‘).click(function(){ $(‘.navbar-collapse‘).collapse(‘hide‘); }); }) </script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/HJQ2016/p/5840768.html
