您的位置：首页 > Web前端 > BootStrap

Bootstrap的学习以及简单运用

2016-10-02 13:42 615 查看 
<!DOCTYPE html>
<html>
<head>
<title>柠檬学院</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/animate.min.css">

<link rel="stylesheet" href="css/main1.css">
<!--link rel href谨记-->

</head>
<body>
<div id="top01"></div>
<!--导航条-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!--logo和按钮-->
<div class="navbar-head">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#b1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div>
<a href="#" class="navbar-brand">柠檬学院</a>
</div>
</div>
<!--导航-->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">首页</a></li>
<li><a href="#ketang">柠檬课堂</a></li>
<li><a href="#shiji">学院事迹</a></li>
<li><a href="#jiuye">JavaEE就业班</a></li>
<li><a href="#jiangshi">讲师团</a></li>
<li><a href="#lianxi">联系我们</a></li>
</ul>
</div>
</div>
</nav>

<section id="home">
<div class="container">
<div class="row wow fadeInUp" data-wow-duration="1s">
<div class="col-sm-1"></div>
<div class="col-sm-10">
<p>
<h1>柠檬学院</h1>一家“专注培养高精端IT人才，全力打造在线教育知名品牌”的教育咨询公司。公司以在线网络授课平台为基础，整合社会更高品质、更具效率、更先进的教育资源，
配置智能化的学习帮助计划和最适合的教学方案，聘请IT领域高端人才和资深讲师亲自授课，制定资深讲师团队“一对一”服务策略，为学员提供完善的在线教育课程体系和优质的就业服务保障，最大程度地释
放每个学员的潜能，让每个学员都能线上的学习获得更为全面的职业素养。
</p>
</div>
<div class="col-sm-1"></div>
</div>
</div>
</section>

<section id="ketang">
<div class="container">
<div class="row wow rollIn bg-yellow" data-wow-delay="0.5s">
<div class="col-sm-6">
<a href="#" target="_blank">
<img src="images/6.jpg" class="img-responsive"/>
<h3>刘老-柠檬学院Java金牌讲师</h3>
<p>Java资深讲师，多年培训经验，曾参与开发过的项目：某省电信...</p>
</a>
</div>
<div class="col-sm-6">
<a href="#" target="_blank">
<img src="images/7.jpg" class="img-responsive"/>
<h3>李哥-柠檬学院Java银牌讲师</h3>
<p>京东研发工程师，精通Java研发。授课风格深入浅出，幽默接地气。</p>
</a>
</div>
</div>
</div>
</section>

<section id="shiji">
<div class="container">
<div class="row">
<div class="col-sm-6 wow swing bg-purple" data-wow-iteration="2">
<h3>李哥之漫漫IT路 </h3>
<p>       大学专业是电子信息工程，不甚喜欢。我更喜欢在室友上课的时候，独自一人待在宿舍抓肉鸡，并为之废寝忘食。每天拿着扫描器，导入成千上万的IP疯狂扫描。当我成功抓到第一只肉鸡并远程操控对方电脑的时候，兴奋不已。我按捺住内心的狂喜，用颤抖的双手在终端敲下了一行命令：shutdown -s -t 0 。
从窗户向外观望，宿舍楼左前方是几张乒乓球台。每当夜幕降临，华灯初上，我时常约乒协的小伙伴在此切磋球技。在昏黄的灯光下听着周董的稻香，挥舞着球拍，时间总是过的很快很快。
研究了整整一个学期的黑客技术。当我能熟练的抓鸡、拿站、提权的时候，我突然意识到这些事情没有任何意义。想明白了这一点，我毅然决然的告别了黑客时代，告别了曾经无比狂热的黑客精神。</p>
</div>
<div class="col-sm-6 wow swing bg-purple" data-wow-iteration="2">
<img src="images/11.jpg" class="img-circle"/>
</div>
</div>
</div>
</section>

<section id="shiji01">
<div class="container">
<div class="row">
<div class="col-sm-6 wow pulse bg-red" data-wow-iteration="5" data-wow-duration="0.15s">
<h3>柠檬缘</h3>
<p>       
凡是都是冥冥中注定的，我一出生就注定了，在一个农村家庭，而且父母都没有上过学。我的妈妈重男轻女，在我童年的记忆中都是打骂我，有时候我在想这难道是后妈吗？为啥老这样对我呢（后来才明白，家庭经济不好，愁的了）？但是我爸爸对我很亲，深深记得，我爸爸拿16元给我买了一件黄色的衣服，超级好看，就因为那件衣服，爸妈还吵架了…….
由于自己家庭贫穷，穿的衣服都是很破很旧，同学都不跟我玩而且很排斥我。但是我很喜欢学习，小学语文老师管的很严，有一次迟到，在教室外被罚站了一节课。从此再也没有迟到过。后来由于频繁换数学老师，不负责任，成绩就不行了….
记忆中的初中老师都很势力眼，对老师和家境好的孩子都是很好，按成绩排座位，学习不好的没有关系的都排后面，我呢，学习不好，后面太乱，就要求做讲台前。高中的生活是比较开心的，目标只有一个，就是考一个好大学，每天早上四点左右起床，特别是冬天，好冷，但是有目标的人就是有闯劲，Never give up ！只想考上大学，但是结果并不理想。因为从小心灵就受打击，一直都是耻辱感很强，别人越是看不起我，我就偏偏要做到。想通过自己的努力改变人生都不容易。
</p>
</div>
<div class="col-sm-6 wow pulse bg-red" data-wow-iteration="5" data-wow-duration="0.15s">
<img src="images/12.jpg" class="img-circle"/>
</div>
</div>
</div>
</section>
<div id="buy"></div>
<section id="jiuye">
<div class="row wow lightSpeedIn bg-yellow">
<div class="col-sm-12 d1">
<h2>JavaEE就业班</h2>
</div>
<div class="col-sm-4">
<div class="d2">
<img src="images/9.jpg"/>
<a href="#" class="btn btn-warning">6500RMB-加入购买</a>
</div>
</div>
<div class="col-sm-4">
<div class="d3">
<img src="images/16.jpg"/>
<a href="#" class="btn btn-warning">7500RMB-加入购买</a>
</div>
</div>
<div class="col-sm-4">
<div class="d4">
<img src="images/15.jpg"/>
<a href="#" class="btn btn-info">开始试听</a>
</div>
</div>
</div>
</section>
<div id="teacher"></div>
<section id="jiangshi">
<div class="container">
<div class="row wow bounceInDown bg-green">
<div class="col-sm-3">
<div class="p1">
<a href="#" target="_blank">
<img src="images/3.jpg" class="img-circle"/>
<h3>李哥</h3>
<p>李老师-柠檬学院Java银牌讲师
京东研发工程师，精通Java研发。授课风格深入浅出，幽默接地...
</p>
</a>
</div>
</div>
<div class="col-sm-3">
<div class="p2">
<a href="#" target="_blank">
<img src="images/17.jpg" class="img-circle"/>
<h3>刘老</h3>
<p>刘老师-柠檬学院Java金牌讲师
Java资深讲师，多年培训经验，曾参与开发过的项目：某省电信...
</p>
</a>
</div>
</div>
<div class="col-sm-3">
<div class="p3">
<a href="#" target="_blank">
<img src="images/19.jpg" class="img-circle"/>
<h3>任老师</h3>
<P>任老师-柠檬学院Java金牌讲师
从事开发5年，之后从事IT教育行业10年，在IT教育方面始终...
</p>
</a>
</div>
</div>
<div class="col-sm-3">
<div class="p4">
<a href="#" target="_blank">
<img src="images/20.jpg" class="img-circle"/>
<h3>储哥</h3>
<P>储老师-柠檬学院Java银牌讲师
精通JavaEE企业级开发，对SSM架构有深入理解...
</p>
</a>
</div>
</div>
</div>
</div>
</section>

<section id="lianxi">
<div class="container">
<div class="row wow bounceInUp bg-red">
<div class="col-sm-6">
<h2>联系我们</h2>
<p>       聘请IT领域高端人才和资深讲师亲自授课，制定资深讲师团队“一对一”服务策略，为学员提供完善的在线教育课程体系和优质的就业服务保障，最大程度地释放每个学员的潜能，让每个学员都能线上的学习获得更为全面的职业素养。</p>
<p>地址：北京市xxxx</p>
<p>电话：152xxxxxxxx</p>
<p>电子邮件：xxxx@xx.com</p>
<p>旗下网站：Java资源库 www.java1995.com</p>
</div>
<div class="col-sm-6">
<form method="post">
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="请输入您的姓名"/>
</div>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="请输入您的电子邮件"/>
</div>
<div class="col-sm-12">
<input type="text" class="form-control" placeholder="移动电话">
</div>
<div class="col-sm-12">
<input type="text" class="form-control" placeholder="标题">
</div>
<div class="col-sm-12">
<textarea placeholder="留言内容" class="form-control" rows="4"></textarea>
</div>
<div class="col-sm-6">
<input type="submit" class="form-control btn btn-warning" value="提交"/>
</div>
</form>
</textarea>
</div>
</div>
</div>
</section>

<section id="banquan">
<div class="row wow bounceInDown bg-green" data-wow-delay="0.01s">
<div class="col-sm-6">
<img src="images/1.png"/>
</div>
<div class="col-sm-6">
<h5>课程存档 课程内容版权均归北京阳光柠檬科技有限公司所有     
京ICP备16040204号-1
</h5>
<p>
Powered by EduSoho v7.2.0 ©2014-2016
</p>
</div>
</section>

<section id="top">
<div class="row wow bounceInDown bg-green" data-wow-delay="0.01s">
<div class="col-sm-12">
<a href="#top01" class="btn btn-warning">顶部</a>
<a href="#buy" class="btn btn-danger">购买</a>
<a href="#teacher" class="btn btn-info">讲师</a>
</div>
</div>
</section>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>


.navbar-default .navbar-brand{
font-size:36px;
color:#02B980;
font-weight:bold;
height:70px;
line-height:35px;
}
.navbar-collapse li a{
font-size:20px;
height:70px;
line-height:35px;
font-weight:bold;
//background-color:#02B980;
}

#home{
height:400px;
margin-top:70px;
font-weight:bold;
text-align:center;
width:100%;
background-color:#02B980;
padding:90px 0;
}
#home h1{
color:white;
}
#ketang{
text-align:center;
padding:70px;
}

#ketang a img{
width:400px;
height:250px;
margin:0 auto;
}
#ketang a{
text-decoration:none;
}

#shiji{
background-color:pink;
padding:40px 0;
text-align:center;
height:370px;
}
#shiji01{
background-color:purple;
padding:40px 0;
text-align:center;
height:370px;
}
#shiji h3,#shiji01 h3{
font-weight:bold;
font-size:24px;
}
#shiji p,#shiji01 p{
line-height:20px;
}
#jiuye{
text-align:center;
//padding:80px 0;
}
#jiuye .d1{
background-color:#02B980;
}
#jiuye .d2,#jiuye .d3,#jiuye .d4{
background-color:pink;
width:430px;
}
#jiuye img{
width:430px;
height:250px;
}
#jiuye a{
font-size:24px;
text-decoration:none;
margin-top:30px;
margin-bottom:20px;
}
#jiuye a:hover{
color:blue;
background-color:yellow;
}
#jiangshi{
margin-top:80px;

}
#jiangshi .p1,#jiangshi .p2,#jiangshi .p3,#jiangshi .p4{
background-color:#ECECEC;
width:216px;
height:270px;
}
#jiangshi a{
text-decoration:none;
}
#jiangshi img{
margin:10px 40px;
}
#lianxi{
background-color:pink;
margin-top:30px;
}
#lianxi h2{
font-size:36px;
font-weight:bold;
}
#lianxi p{
font-weight:bold;
line-height:30px;
}
#lianxi input{
margin-top:20px;
height:40px;
margin-bottom:20px;
}
#banquan{
background-color:white;
height:120px;
}
#banquan img{
margin-top:30px;
margin-left:100px;
}
#banquan h5{
text-align:right;
margin-right:200px;
margin-top:35px;
}
#banquan p{
text-align:right;
margin-right:200px;

}
#banquan a{
margin:0 auto;
}
#top a{
float:right;
margin-right:50px;
}


案例所需要的引用，和素材，源码

链接：http://pan.baidu.com/s/1bpKaqfH 密码：robl
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航