bootstrap实战项目总结 源码及知识点

在学校里面参加了一个服创比赛，我的任务是前端，一个半月的寒假打算好好学Js，bootstrap，Vue，jQuery，现在先开始学习bootstrap。发现在实战项目中学习是一个不错的方法。

话不多说，直接上源码与做完后的图片，很多知识点我都在源码里详细注释了供大家参考，希望大家不断进步。

我是用webstrom做的，加上一点快捷键：ctrl+F在文件内快速查找代码   ctrl+D复制当前行   ctrl+W选中单词  ctrl+D 删除一行    shift+enter重新开始一行（无论光标在哪个位置）

Bootstrap实战项目秦时明月全屏 Bootstrap实战项目秦时明月响应式

 

    
    
    
    
    
    
    
    
    




  

  
  

  
    
    
    
    
    
    
  
  秦时明月
  
  
  

  

    

      
      
秦时明月之沧海横流
      
精彩图例
      
少司命
      
白凤
      
最新视频
      
往季信息
      
最新资讯
    
  
  



  
  

    

      

        
        

        

          
秦时明月之沧海横流
          

            《秦时明月之沧海横流》是国产大型3D动画《秦时明月》系列的第六部。

            （故事背景取自秦始皇统一六国到咸阳城被攻陷这段英雄辈出的历史时期，是一部以武侠为主题的全民型动漫）
          
          
          
        
        

      
    
  




    

      

        

          
          
          
精彩图一
          
有些梦想虽然遥不可及，但不并是不可能实现，只要我足够的强。 
          
        
        

          
          
          
精彩图二
          
杀戮永远不是变强的理由,一个人,若以打败别人而证明自己,那他就已经输了.  
          
        
        

          
          
          
精彩图三
          
这个世上，胜者生，而败者亡，在世事的胜负面前，生与死不过是必然的因果。
          
        
      
    





  

    

    
少司命
    
少司命，中国首部3D武侠动漫《秦时明月》系列中的职位
    
掌管五行派系中的木部，与云中君、大司命、
      湘君、湘夫人并列阴阳家五大长老之一。
    
    
传说她美若天仙，但这世上还没有人
      见过她面纱之下的真正面目。自登场起就没有说过一句话，是一位迷之少女，阴阳功力相当雄厚。
  
  

    
  

  





  

    

      
    
  

    
白凤
    
白凤凰，又称白凤，中国3D武侠动画《秦时明月》系列中的原创男性角色
    
神秘优雅的白衣美男子，轻功举世无双，能够借助
      鸟类或羽毛飞翔，时常驾驭着白色的巨鸟在天空飞过。
    
    
天赋异禀，具有控制与指挥鸟类的能力，
      被称为"百鸟之王"。加入以卫庄为首领的杀手组织"流沙"。
  
  




  

    

      

        
最新视频
      
      

        

          
          
            
            
            点击观看
          
        
      
      

        

          
          
            点击观看
          
        
      
      

        

          
          
            点击观看
          
        
      
      

        

          
          
            点击观看
          
        
      
      

        

          
          
            点击观看
          
        
      
      

        

          
          
            点击观看
          
        
      
      

        

          
          
            点击观看
          
        
      
      

        

          
          
            点击观看
          
        
      
    
  





  

    

      

        
秦时明月之君临天下往季信息
        

          网络动画《秦时明月之君临天下》是由沈乐平执导，杭州玄机科技信息技术有限公司出品的中国3D武侠动画《秦时明月》系列的第五部作品。
          动画讲述了天明、少羽、石兰三人误打误撞登上了停泊在海边的蜃楼后开始了奇幻莫测的探险逃亡之旅的故事  。
        
        
          
          迅雷地址
        
        
          
          网盘地址
        
      
      

        
      
    
  





  

    

      

        

          

            
             
            最新秦时资讯
          
          

            做中国动画，讲中国的侠。未来可期，与君相约，沧海横流！ ​​​​
            沧海明珠月无缺，万江奔海化冬雪。
            《秦时明月陆沧海横流》暖冬预告即将上线！
            你们期待的终将化“雪”而来！
            这个冬天，期待与你惊喜相逢的那天！玄机现在更新的是三部动画，武庚纪，天行九歌，斗罗大陆.
            天行九歌第一季终，秦时明月新季可期！
          
          

            

              
               
              地址:杭州玄机科技信息技术有限公司
            
            

              
               
              联系电话：4006661551
            
            

              
               
              邮箱:[email protected]
            
          
        
        

          

            
                      
                          

                              
                          
                          

                              
                          
                          

                              
                          
                          

                              
                            
                          
                          
                          

                              
                          
                      
                  
              
          
      
  
  

  

    

      

        

          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;
}