<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>bootstrap项目实战</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no"> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" ></script> <script src="js/bootstrap.min.js" ></script> <script src="js/jquery.singlePageNav.min.js"></script> <script src="js/wow.min.js"></script> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/animate.css" /></head><body> <!--导航模块开始--> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <!--小屏幕时候的按钮--> <div class="navbar-header"> <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 href="#" class="navbar-brand color-a">LOL大神学院</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="#bootsrtap">搞笑视频</a></li> <li><a href="#list">比赛直播</a></li> <li><a href="#app">App下载</a></li> <li><a href="#contact">联系我们</a></li> </ul> </div> <!--导航结束--> </div> </nav> <!--导航模块结束--> <!--首页内容模块开始--> <section id="home"> <div class="lvjing"> <div class="container" > <div class="row wow bounce fadeInUp media-top-div" data-wow-duration="1s" data-wow-delay="1s"> <div class="col-md-1"></div> <div class="col-md-10"> <h1>英雄联盟S4赛季</h1> <p>比赛分四个阶段进行:1.海选赛 2.预选赛 3.晋级赛 4.全国决赛<br/> 奖励规则:1.1000万RBM(冠军) 2.500万RBM(亚军) 3.300万RBM(季军) </p> <img src="images/php.jpg" class="img-responsive" alt="lol大赛"/> </div> <div class="col-md-1"></div> </div> </div> </div> </section> <!--首页内容模块结束--> <section id="bbs"> <div class="container"> <div class="row wow flipInY" data-wow-offset="10" data-wow-duration="2s" data-wow-delay="1s"> <div class="col-md-4"> <a href="#"> <img src="images/a.png" class="img-responsive" /> <h3>Android在线视频播放下载</h3> <p>累计下载1039万次</p> </a> </div> <div class="col-md-4"> <a href="#"> <img src="images/i.png" class="img-responsive" /> <h3>IOS在线视频播放下载</h3> <p>累计下载705万次</p> </a> </div> <div class="col-md-4"> <a href="#"> <img src="images/b.png" class="img-responsive" /> <h3>平板在线视频播放下载</h3> <p>累计下载458万次</p> </a> </div> </div> </div> </section> <!-- 作者：offline 时间：2016-03-02 描述：html5 --> <section id="html5"> <div class="container"> <div class="col-md-6 wow bounceInLeft" data-wow-duration="1s" data-wow-delay="1s" data-wow-offset="10"> <h2>HTML5前端开发</h2> <p>一线资深前端开发工程师倾情打造！助你完成普通程序员到优秀工程师的华丽升级！</p> <p><span class="glyphicon glyphicon-grain mai-icon"></span>使用HTML5与CSS3技术轻松实现设备自适应展示。</p> <p><span class="glyphicon glyphicon-grain mai-icon"></span>清晰明了的语义代码结构，更高的可读性、更利于页面维护的。</p> </div> <div class="col-md-6 wow bounceInRight" data-wow-duration="1s" data-wow-delay="1s" data-wow-offset="10"> <img src="images/html5.jpg" class="img-responsive" /> </div> </div> </section> <!-- 作者：offline 时间：2016-03-03 描述：bootstrap区域 --> <section id="bootstrap"> <div class="container"> <div class="col-md-6 wow zoomInRight" data-wow-duration="1s" data-wow-delay="1s" data-wow-offset="10" > <img src="images/Bootstrap.jpg" class="img-responsive" /> </div> <div class="col-md-6 wow zoomInLeft" data-wow-duration="1s" data-wow-delay="1s" data-wow-offset="10"> <h2>BOOTSTRAP前端开发</h2> <p>一线资深前端开发工程师倾情打造！助你完成普通程序员到优秀工程师的华丽升级！</p> <p><span class="glyphicon glyphicon-grain mai-icon"></span>使用HTML5与CSS3技术轻松实现设备自适应展示。</p> <p><span class="glyphicon glyphicon-grain mai-icon"></span>清晰明了的语义代码结构，更高的可读性、更利于页面维护的。</p> </div>
</div> </section> <!-- 作者：offline 时间：2016-03-03 描述：列表页 --> <section id="list"> <div class="container"> <div class="row "> <div class="col-md-12 wow wobble" data-wow-duration="1s" data-wow-delay="1s" data-wow-offset="10"> <h2>最新课程</h2> </div> <div class="col-md-3 wow fadeInDown" data-wow-duration="1s" data-wow-delay="1s" > <div class="list_div"> <img src="images/swift.jpg" class="img-responsive" /> <a class="btn btn-primary" target="_blank" role="button" href="#" target="_blank">加入学习</a> </div> </div> <div class="col-md-3 wow jello" data-wow-duration="1s" data-wow-delay="1s"> <div class="list_div"> <img src="images/swift.jpg" class="img-responsive" /> <a class="btn btn-primary" target="_blank" role="button" href="#" target="_blank">加入学习</a> </div> </div> <div class="col-md-3 wow bounce" data-wow-duration="1s" data-wow-delay="1s"> <div class="list_div"> <img src="images/swift.jpg" class="img-responsive" /> <a class="btn btn-primary" target="_blank" role="button" href="#" target="_blank">加入学习</a> </div> </div> <div class="col-md-3 wow lightSpeedIn" data-wow-duration="1s" data-wow-delay="1s"> <div class="list_div"> <img src="images/swift.jpg" class="img-responsive" /> <a class="btn btn-primary" target="_blank" role="button" href="#" target="_blank">加入学习</a> </div> </div> <div class="col-md-3 wow rubberBand" data-wow-duration="1s" data-wow-delay="1s"> <div class="list_div"> <img src="images/swift.jpg" class="img-responsive"/> <a class="btn btn-primary" target="_blank" role="button" href="#" target="_blank">加入学习</a> </div> </div> <div class="col-md-3 wow lightSpeedIn" data-wow-duration="1s" data-wow-delay="1s"> <div class="list_div"> <img src="images/swift.jpg" class="img-responsive" /> <a class="btn btn-primary" target="_blank" role="button" href="#" target="_blank">加入学习</a> </div> </div> <div class="col-md-3 wow jello" data-wow-duration="1s" data-wow-delay="1s"> <div class="list_div"> <img src="images/swift.jpg" class="img-responsive" /> <a class="btn btn-primary" target="_blank" role="button" href="#" target="_blank">加入学习</a> </div> </div> <div class="col-md-3 wow rubberBand" data-wow-duration="1s" data-wow-delay="1s"> <div class="list_div"> <img src="images/swift.jpg" class="img-responsive" /> <a class="btn btn-primary" target="_blank" role="button" href="#" target="_blank">加入学习</a> </div> </div> </div> </div> </section> <!-- 作者：offline 时间：2016-03-03 描述：app --> <section id="app"> <div class="container"> <div class="row"> <div class="col-md-6 wow slideInLeft" data-wow-duration="1s" data-wow-delay="1s" data-wow-offset="10"> <h2>LOL APP讨论社区下载</h2> <p> 全球5000W撸友互动，与新网站数据同步，更加丰富的视频，开启精彩无限，语音搜索视频，喊出你想要的比赛视频，一件收藏，方便自己重复看，离线下载比赛视频，在哪儿都能看！ </p> <button class="btn btn-primary"> <span class="glyphicon glyphicon-download-alt"></span> iPhone版 </button> <button class="btn btn-primary"> <span class="glyphicon glyphicon-download-alt"></span> Android版 </button> </div> <div class="col-md-6 wow slideInRight" data-wow-duration="1s" data-wow-delay="1s" data-wow-offset="10"> <img src="images/app-banner.jpg" class="img-responsive" alt=""/> </div> </div> </div> </section> <!-- 作者：offline 时间：2016-03-03 描述：联系我们区域 --> <section id="contact"> <div class="lvjing"> <div class="container"> <div class="row"> <div class="col-md-6 wow bounceInRight" data-wow-duration="1s" data-wow-delay="1s" data-wow-offset="10"> <h2> <span class="glyphicon glyphicon-send"></span> 联系小麦 </h2> <p> 麦子学院是成都麦子信息技术有限公司旗下一个IT在线教育平台，目前已有30万注册用户，10万以上APP下载量，5000小时视频内容。 我们从不说空话，专注于IT在线教育，脱离传统教育的束缚，让你走哪学哪，想学就学。逗比的老师，贴心的助教，在这儿你能感受到来自五 湖四海伙伴们热情和踏实的学习态度！ </p> <address> <p> <span class="glyphicon glyphicon-home"></span> 地址:成都市高新区天府软件园D5-11 </p> <p> <span class="glyphicon glyphicon-phone-alt"></span> 联系电话：028-86567913 </p> <p> <span class="glyphicon glyphicon-envelope"></span> 邮箱:hr@maiziedu.com </p> </address> </div> <div class="col-md-6 wow bounceInLeft" data-wow-duration="1s" data-wow-delay="1s" data-wow-offset="10"> <form action="#" method="post"> <div class="col-md-6"> <input type="text" class="form-control" placeholder="您的姓名"/> </div> <div class="col-md-6"> <input type="email" class="form-control" placeholder="您的邮箱"/> </div> <div class="col-md-12"> <input type="text" class="form-control" placeholder="标题"/> </div> <div class="col-md-12"> <textarea class="form-control" placeholder="留言内容" rows="4"></textarea> </div> <div class="col-md-8"> <input type="submit" class="form-control" value="提交"/> </div> </form> </div> </div> </div> </div> </section> <!-- 作者：offline 时间：2016-03-04 描述：底部 --> <footer> <div class="container"> <div class="row"> <div class="col-md-12"> <p> Copyright © 2012-2015 www.maiziedu.com 蜀ICP备13014270号-4 </p> </div> </div> </div> </footer> <script> $(function(){ //导航慢慢定位(跳转插件) $(".nav").singlePageNav({ offset:70 //移出覆盖导航的高度 }); /** * 小屏幕导航点击就关闭按钮 */ $(".navbar-collapse a").click(function(){ $(".navbar-collapse").collapse("hide"); }); //动画初始化 new WOW().init(); }); </script></body></html>
<!-- (1)sublime编辑器的安装htmlhttp://www.haorooms.com/post/sublime_use(2)sublimt编辑器快速编写htmlhttp://www.haorooms.com/post/emmet_s(3)生成html快捷键盘 输入!号，在按住ctrl+E 就可以生成！--><!-- 《笔记》 (1)bootstrap官网:bootcss.com (2)引入百度cnd的JQ文件：http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js (3)思维导图xmind下载：http://jstel.ddooo.com:8081/uuauth/XMindPro_61977.rar?9c87223b200e7daf74ebedf88be8ee5c.rar (4)IE8开启标准渲染模式：<meta http-equiv="X-UA-Compatible" content="IE=edge"> (5)配置视窗口：<meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no"> 参数解释:<1>width=device-width(当前页面的宽度等于当前设备的宽度) <2>initial-scale=1(缩放的比例为1:1) <3>user-scalable=no(是否允许用户手动缩放) (6)动画插件 1.jquery.singlePageNav.min.js(单页面导航插件) 2.初始化 //导航慢慢定位(跳转插件) $(".nav").singlePageNav({ offset:70 //移出覆盖导航的高度 }); --------------------------------- 1.wow.min.js (动画插件js) animate.css(动画效果) 2.data-wow-duration="2s" (动画持续时间) 3.data-wow-delay="5s" (动画延迟时间) 4.data-wow-offset="10" (距离可视区域多远开始执行动画) 5.data-wow-iteration="10" (重复次数) 6.动画效果网址:http://daneden.github.io/animate.css/ 7.在某个具体的html标签中必须先加class="wow 然后在加显示具体的效果" 8.插件初始化 new WOW().init();-->
转载于:https://www.cnblogs.com/hgj123/p/5241951.html
相关资源：Bootstrap布局的网站首页DEMO