在学校里面参加了一个服创比赛，我的任务是前端，一个半月的寒假打算好好学Js，bootstrap，Vue，jQuery，现在先开始学习bootstrap。发现在实战项目中学习是一个不错的方法。
话不多说，直接上源码与做完后的图片，很多知识点我都在源码里详细注释了供大家参考，希望大家不断进步。
现在挂在了网上 http://www.cloudfarm.top/，欢迎大家一起进步一起学习。
Bootstrap实战项目秦时明月全屏
Bootstrap实战项目秦时明月响应式
秦时明月之沧海横流
《秦时明月之沧海横流》是国产大型3D动画《秦时明月》系列的第六部。
（故事背景取自秦始皇统一六国到咸阳城被攻陷这段英雄辈出的历史时期，是一部以武侠为主题的全民型动漫）
少司命
少司命，中国首部3D武侠动漫《秦时明月》系列中的职位
掌管五行派系中的木部，与云中君、大司命、
湘君、湘夫人并列阴阳家五大长老之一。
传说她美若天仙，但这世上还没有人
见过她面纱之下的真正面目。自登场起就没有说过一句话，是一位迷之少女，阴阳功力相当雄厚。
白凤
白凤凰，又称白凤，中国3D武侠动画《秦时明月》系列中的原创男性角色
神秘优雅的白衣美男子，轻功举世无双，能够借助
鸟类或羽毛飞翔，时常驾驭着白色的巨鸟在天空飞过。
天赋异禀，具有控制与指挥鸟类的能力，
被称为"百鸟之王"。加入以卫庄为首领的杀手组织"流沙"。
最新秦时资讯
做中国动画，讲中国的侠。未来可期，与君相约，沧海横流！
沧海明珠月无缺，万江奔海化冬雪。
《秦时明月陆沧海横流》暖冬预告即将上线！
你们期待的终将化“雪”而来！
这个冬天，期待与你惊喜相逢的那天！玄机现在更新的是三部动画，武庚纪，天行九歌，斗罗大陆.
天行九歌第一季终，秦时明月新季可期！
地址:杭州玄机科技信息技术有限公司
联系电话：4006661551
邮箱:kefu@52qinshi.com
The Legend of Qin秦時明月。前5部正片(共175集)已完结;第6部上映中，敬请期待。
body{
font-family: "Microsoft YaHei",sans-serif;
}
.detail{
background: #40d2b1;
color: #fff;
width: 40px;
height: 40px;
border-radius: 50%;/*设置圆角边框*/
text-align: center;
line-height: 3;
margin-right: 15px;
}
.navbar-default{
box-shadow: 0px 2px 8px 0px rgba(50,50,50,0.25);
/*向框增加阴影box-shadow: h-shadow必需。水平阴影的位置 v-shadow必需。垂直阴影的位置。
blur后面均可选。模糊距离。 spread 阴影的尺寸 color 阴影的颜色*/
background-color: #fff;
}
.navbar-header .navbar-brand{
font-size: 30px;
font-weight: bold;
color: #40D2B1;
height: 70px;
line-height: 35px;
}
.navbar-default .navbar-nav > li > a{
font-size: 16px;
font-weight: bold;
color: #666;
height: 70px;
line-height: 35px;
}
.navbar-default .navbar-toggle .icon-bar{
background-color:rgba(110, 231, 203, 1);
}
.navbar-default .navbar-toggle:hover{
border-color:#40d2b1;
background-color:rgba(91, 185, 153, 1);
}
.navbar-toggle{
margin-top:17px;
}
/*home*/
#home{
margin-top: 70px;/*距离最上面70px*/
background:url("../images/homebg.jpg");
background-size: cover;
color:#ffffff;
text-align:center;
width: 100%;
}
.lvjing{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);/*前面为红黄蓝的混合。最后为透明度0-1的越大越暗*/
padding: 90px,0;
}
#home h1{
font-weight: bold;
margin-top: 75px;/*在这个块里距离上面75px*/
}
#home p{
font-weight: bold;
line-height: 30px;
}
#home img{
margin-top: 30px;
display: inline-block;
padding-bottom: 50px;
/*块级对象元素会单独占一行显示，多个block元素会各自新起一行，并且可以设置width,height属性;*/
/*而内联对象元素前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满，
对inline元素设置width,height属性无效。*/
/*既希望元素具有宽度高度特性，又具有同行特性，这个时候我们可以使用inline-block。*/
/*将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。*/ }/*bbs*/
#bbs{
padding: 80px 0;/*上下80左右0在缩小时顶左右格*/
text-align: center;
}
#bbs a{
color:#212121;
text-decoration:none;/*去掉链接下面的下划线*/
}
#bbs img{
margin: 0,auto;/*图片居中*/
}
#bbs h3{
font-weight: bold;
}
#bbs .col-md-4{
padding: 15px;
}
#bbs .col-md-4:hover{/*浮动在上面*/
background: #f1e1ed;
box-shadow:1px 1px 4px #ccc;
}
#people img,#baifeng img{
height: 300px;
width: 400px;
}
#people,#baifeng{
background: #f8f8f8;
padding: 80px 0;/*设置此块的外间距上下80 左右0*/
}
#people h2,#baifeng h2{
font-weight: bold;
}
#people p,#baifeng p{
line-height: 25px;
}
#course{
background: #f8f8f8;
padding: 80px 0;
text-align:center;
/*padding-bottom底部填充边距 padding上右下左 内容 内边距padding 边框border 外边框margin*/
}
#course h2{
font-weight: bold;
padding-bottom: 60px;
}
#course .col-md-3{
margin-bottom: 30px;
}
#course .btn{
background: transparent;/*全透明*/
border: 1px solid #40D2B1;/*dotted solid double dashed;点状 实线 双线 虚线*/
border-radius: 0px;/*圆角边框*/
color: #40D2B1;
margin-top: 20px;
margin-bottom: 30px;
padding: 8px 20px;
transition: all 3s;
}
/* transition 过渡，把鼠标指针放到btn元素上，其背景颜色会用2s变化成hover规定的*/
#course .btn:hover{
background: #1a1fd2;
color: #fff;
}
#course img{
width: 500px;
height: 260px;
}
#app{
padding: 80px 0;
}
#app p{
line-height: 30px;
}
#app h2{
font-weight: bold;
padding-bottom: 30px;
}
#app .btn{
margin: 10px 0;
background: rgb(64, 210, 177);
border-color: rgb(64, 210, 177);
border-radius: 0px;
padding: 6px 30px;
transition: all 2s;
}
#app .btn:hover{
background: rgb(142, 13, 141);
}
#app img{
width: 500px;
height: 260px;
}
/*contact*/
#contact{
background: url("../images/contact-bg .jpg") no-repeat;
background-size: cover;/*全覆盖整个块*/
color: #ffffff;/*里面的字体颜色白色*/
/*height: 500px;一开始加上显示图片，再删除掉为了自适应屏幕大小*/
}
#contact h2{
font-weight: bold;
margin-top: 85px;
margin-bottom: 25px;
}
#contact p{
line-height: 25px;
margin-bottom: 20px;
}
#contact form{
margin-top: 85px;
}/*整体的外间距85Px，和左侧的高度对齐了*/
#contact .form-control {
border: none;/*去掉边框*/
border-radius: 0;/*去掉圆角*/
height: 70px;
margin-bottom: 20px;
}
#contact textarea.form-control{
height: auto;/*自适应高度*/
}
#contact input[type="submit"]{/*选取Input里面的submit属性*/
background: #40D2B1;
color: #fff;
font-weight: bold;
transition: all 2s;
}
#contact input[type="submit"]:hover{
background: rgb(102, 30, 142);
}
footer{
font-weight: 500px;/*400px正常,700px相当于bold*/
text-align: center;
padding: 20px;
}