bootstrap首页案例
<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="data: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="data:images/a.png" class="img-responsive" />
<h3>Android在线视频播放下载</h3>
<p>累计下载1039万次</p>
</a>
</div>
<div class="col-md-4">
<a href="#">
<img src="data:images/i.png" class="img-responsive" />
<h3>IOS在线视频播放下载</h3>
<p>累计下载705万次</p>
</a>
</div>
<div class="col-md-4">
<a href="#">
<img src="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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();
-->
bootstrap首页案例的更多相关文章
- 8 个实用的 Bootstrap 3 案例教程
Bootstrap 3发布各大设计论坛议论纷纷.这次Bootstrap 3最大的特点就是--扁平化.下面就是一些早期的Bootstrap 3例子,不过亲们注意咯,因为大部分最早期的测试案例,可能用到一 ...
- 【使用DIV+CSS重写网站首页案例】步骤分析与代码实现
使用DIV+CSS重写网站首页案例 步骤分析: 第一步:先定义一个大的 div(整个页面),然后嵌套 8 个小的 div(共八行): 第二步:(第一行)在第一个 div 里面嵌套 3 个小的 div: ...
- bootstrap首页制作
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>我的 ...
- BootStrap布局案例
BootStrap布局 bootstrap 2.3版与3.0版的使用区别 http://www.weste.net/2013/8-20/93261.html 以一个博客系统的首页,来介绍如何布局 1, ...
- QQ首页 案例
一.知识点 ①background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动.scroll默认值.背景图像会随着页面其余部分的滚动而移动.fixed当页面的其余部分滚动时 ...
- bootstrap入门案例
创建文档基本结构, 包括导入CSS,JS bootstrap初学者模板 添加元件 先添加一个导航栏, 直接粘贴即可使用 https://v4.bootcss.com/docs/4.0/componen ...
- 【使用DIV+CSS重写网站首页案例】CSS选择器
使用表格<table></table>对网站首页进行布局有缺陷,不能拖动版块,不灵活. DIV Div是一个html的标签,单独使用没有意义,必须结合CSS使用: 是一个块级元 ...
- 【使用DIV+CSS重写网站首页案例】CSS盒子模型
CSS盒子模型 取值问题: 默认情况,padding.border.margin都为0: 设定区域内容的width和height,是区域内容框的尺寸: 如果设定padding/border/margi ...
- 【使用DIV+CSS重写网站首页案例】CSS浮动
CSS浮动: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边缘为止 由于浮动框不在文件的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 选择器之 float属性 ...
随机推荐
- android LinearLayout设置selector不起作用解决
设置方法 : android:background="@drawable/fen_selector" 如果只有这个的话,是不起作用的.还必须加上: android:clickabl ...
- 线程的属性和 线程特定数据 Thread-specific Data
一.posix 线程属性 POSIX 线程库定义了线程属性对象 pthread_attr_t ,它封装了线程的创建者可以访问和修改的线程属性.主要包括如下属性: 1. 作用域(scope) 2. 栈尺 ...
- Linux内核同步 - Read/Write spin lock
一.为何会有rw spin lock? 在有了强大的spin lock之后,为何还会有rw spin lock呢?无他,仅仅是为了增加内核的并发,从而增加性能而已.spin lock严格的限制只有一个 ...
- Unix环境高级编程(七)fork函数总结
在Unix/Linux中用fork函数创建一个新的进程.进程是由当前已有进程调用fork函数创建,分叉的进程叫子进程,创建者叫父进程.该函数的特点是调用一次,返回两次,一次是在父进程,一次是在子进程. ...
- hive sql 行列转换
-- 对一张大表的每一行,后面加多种label值 -- 其实就是笛卡尔积,举例 -- SELECT * FROM dev.dev_jiadian_user_yuge_temp -- CROSS JOI ...
- spring boot 整合 redis
自己开发环境需要安装 redis 服务,百度一下很多,下面主要说明Springboot 集成 redis 讲解 我的版本 java8 + redis3.0 + springboot 1.5.9. Sp ...
- 常用IP核
前言 记录自己用到的模块,随时补充. 主要分类: 一.常用模块 1-FIFO FIFO分为两种,一是输入输出时钟相同(Common clock)的 fifo ;二是输入输出时钟不相同(Independ ...
- ORM是什么？
对象关系映射(Object Relational Mapping,简称ORM)是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术. 简单的说,ORM是通过使用描述对象和数据库之间映射的元数据 ...
- servlet中 getRealPath deprecated（被废弃）
servlet中, HttpRequestServlent req; req.getRealPath 被废弃,使用this.getServletContext().getRealPath()替代:
- 算法导论--装备线调度（升序&&降序输出）
题意就先不用讲了吧,感觉自己还没有掌握核心的东西. //心得 //如何保持路径,递归的实现 #include<iostream> #include<cstdio> #inclu ...