学做Bootstrap的第一个页面

本文实例分享了第一个Bootstrap页面的实现代码，供大家参考，具体内容如下

效果图：

实现代码：

 
  
  
  
   
   
   
   
    .masthead{
     padding: 110px 0px 110px;
     margin-bottom: 0px;
    }
    .masthead:after{
     content: '';
     display: block;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0; 
     background: url(img/bg1.png) repeat center center;
     opacity: 0.4;
    }
    .masthead h1{
     font-weight: 700;
     font-size: 700%;
    }
    .active{font-size: 120%;font-weight: bold;}
    .masthead-a{
     opacity: 0.5;
     color: white;
     font-size: medium;
    }
    .masthead-a:hover{
     color: white;
     opacity: 1;
    }
    .modal-header li i{opacity: 0.5;}
    .text-align{
     display: inline;
    }
    .img-ls{
     width: 23%;
     border: 1px solid hsl(0, 0%, 87%);
     margin-right: 2%;
     padding: 4px 0px;
     margin-bottom: 6%;
     min-height: 350px;
     max-height: 600px;
     float: left;
    }
    .img-ls img{
     width: 97%;
     height: auto;
    }
    .img-ls img:hover{
     cursor: pointer;
    }
    .footer{
     padding: 50px 50px;
    }
    .navbar-nav li{display: inline;}
   
 
 
  
  
    
      
      Toggle navigation
      
      
      
      
      
Bootstrap中文网
     
      
 
Bootstrap2中文文档
Bootstrap3中文文档
Bootstrap 4.0 预览
Less 教程
jQuery API
网站实例
前端高薪职位
关于
      
     
    
  
  
    
     Bootstrap
     简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
     
Bootstrap3中文文档(v3.3.5)
     
Bootstrap2中文文档(v2.3.2)
    
  
  
   
    

     
Bootstrap技术交流群：318630708 | 
     
Bootstrap问答社区 | 
     
新浪微博：@Bootstrap中文网
    
   
  
  
   
    
     Bootstrap相关优质项目推荐
     
这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的
    
    
     
     
      Bootstrap 编码规范
by @mdo
     
     

      Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。
     
    
    
     
     
      jQuery API 
中文手册
     
     

      根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册。
     
    
    
     
     
      w3schools
原版国内镜像
     
     

      w3schools.com 是最受欢迎的前端技术教程网站，但是国内用户一直不能访问，并且国内的中文翻译版本十分陈旧。因此做了个镜像，希望英文好的同学直接去看原版教程吧！
     
    
    
     
     
      优站精选
Bootstrap网站实例
     
     

      Bootstrap优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。
     
    
   
  
  
 

相信大家一定还没过瘾吧，下面再为大家分享几篇文章：

《值得分享和收藏的Bootstrap学习教程》 《Bootstrap学习教程》

以上就是本文的全部内容，希望对大家的学习有所帮助。