Advertisement

采用Bootstrap技术构建响应式布局方案

阅读量:

(1)首先获取BootStrap资源,将bootstrap.min.css文件复制到当前项目目录中。

(2)创建新的style.css文件,具体实现代码如下:

复制代码
 .row{

    
  
    
     margin-bottom: 20px;
    
  
    
  
    
 }
    
  
    
 .row .row{
    
  
    
     margin-top: 10px;
    
     margin-bottom: 0px;
    
  
    
 }
    
  
    
 [class*="col-"]{
    
     padding-top: 15px;
    
     padding-bottom: 15px;
    
     /*background-color: #eee;*/
    
     /*background-color: rgba(86,61,124,.15);*/
    
     /*border: 1px solid #dddddd;*/
    
     /*border: 1px solid rgba(86, 61, 214,.2);*/
    
  
    
 }
    
    
    
    

(3)创建新的index.html

全部评论 (0)

还没有任何评论哟~