首页 > 代码库 > 第十篇、HTML5实战篇——1

第十篇、HTML5实战篇——1

 

<!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="http://www.mamicode.com/#">                        <img alt="Brand" src="http://www.mamicode.com/...">                      </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>

 

第十篇、HTML5实战篇——1