使用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文件，实现代码如下：

    
    
    

    



    
    

        

            
            

                
                    Toggle navigation
                    
                    
                    
                
                Project name
            

            
            

                

                    

                        
                    
                    

                        
                    
                    Sign in
                
            
            
        
        
    

    
    


        

            
Hello, world!

            
This is a template for a simple marketing or informational website. It includes a large callout called a
                jumbotron and three supporting pieces of content. Use it as a starting point to create something more
                unique.

            
Learn more »
        
    


    
    

        

            

                
Heading

                
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
                    mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna
                    mollis euismod. Donec sed odio dui.
                
            

            

                
Heading

                
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
                    mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna
                    mollis euismod. Donec sed odio dui.
                
            

            

                
Heading

                
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
                    mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna
                    mollis euismod. Donec sed odio dui.
                
            
        
    

    
    

    

        

        
© Company 2014
    

    

（4）最后的实现效果如下：这是模仿BootStrap中的某一个模板设计出来的。可见BootStrap使用起来非常方便。

。

github主页：https://github.com/chenyufeng1991  。欢迎大家访问！