<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編輯器的安裝html
http://www.haorooms.com/post/sublime_use
(2)sublimt編輯器快速編寫html
http://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();
-->