使用bootstrap中的栅格系统轻松实现网站响应式布局

网站分为主体和底部两大部分，使用bootstrap中的栅格系统实现网站响应式布局：

.html文件：

    
    
    
    
    
    
    


   
    

        
			
            

                

                    

                        
THE DIRECT MAIL PLATFORM FOR DIGITAL MARKETERS
                    
                    

                        
                    
                    

                        
We make acquiring customers with direct mail as easy as creating a Facebook campaign.
                    
                    

                        按钮
                    
                    
                
            
        
        
			
            

                

                    

                        

                            
Lookalikes for Direct Mail
                        
                        

                            
                        
                        

                            
Tidewater leverages machine learning to find similar businesses to your customers based on 200+ signals for your direct mail campaigns. You can also create a custom audience or use your own lists.
                        
                        

                            按钮
                        
                    
                    

                        
                    
                
            
        
        
							
            

                

                    

                        
                    
                    

                        

                            
Lookalikes for Direct Mail
                        
                        

                            
                        
                        

                            
Tidewater leverages machine learning to find similar businesses to your customers based on 200+ signals for your direct mail campaigns. You can also create a custom audience or use your own lists.
                        
                        

                            按钮
                        
                    
                    
                
            
        
        
					
            

                

                    

                        
CLIENTS
                    
                    

                        
                    
                    

                        

                            
                        
                        

                            
                        
                        

                            
                        
                        

                            
                        
                    
                
            
            
        
        
						
            
                

                    

                        
Partner with us
                        
We partner with data providers and marketing execution platforms to make marketing & sales teams lives easier.
                    
                    

                        按钮
                    
                
            
        
    
    
								
        

            

                

                    Opt out
                
                

                    ©2017 Tidewater
                
            
        
    

    
    

.css文件：

.ad{
    background: url('../img/chicago_large.jpg') no-repeat;
    background-size: cover;
    color: #fff;
}
.ad>div{
    padding: 30px 0 200px;
}
.ad a{
    padding: 10px 70px;
    color: rgb(119, 149, 248);
}
.ad p{
    max-width: 40%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    line-height: 40px;
}
.ad span{
    width: 150px;
    height: 1px;
    border-top: 1px solid #fff;
    display: inline-block;
    
}
.right-p{
    background: rgb(244, 243, 244);
    /* color: #fff; */
    padding: 100px 0;
}
.right-p span{
    width: 70px;
    height: 1px;
    border-top: 1px solid #fff;
    display: inline-block;
}
.right-p h1{
    padding-bottom: 20px;
}
.right-p p{
    line-height: 40px;
}
.right-p a{
    padding: 10px 70px;
    color: #fff;
    background: rgb(62, 207, 142);
}

@media only screen and (max-width:996px){
    .right-p img{
        padding-top: 30px;
    }
}


.left-p{
    /* background: rgb(244, 243, 244); */
    /* color: #fff; */
    padding: 100px 0;
}
.left-p span{
    width: 70px;
    height: 1px;
    border-top: 1px solid #ccc;
    display: inline-block;
}
.left-p h1{
    padding-bottom: 20px;
}
.left-p p{
    line-height: 40px;
}
.left-p a{
    padding: 10px 70px;
    color: #fff;
    background: rgb(62, 207, 142);
}


.four-fonts{
    padding: 40px;
}
.four-fonts span{
    width: 70px;
    height: 1px;
    border-top: 1px solid #ccc;
    display: inline-block;
}
.four-fonts .font{
    padding-top: 30px;
}

.last-text{
    background: rgb(244, 243, 244);
    padding: 20px;
}
.last-text a{
    margin-top: 30px;
    padding: 10px 70px;
    color: rgb(119, 149, 248);
    /* background: rgb(62, 207, 142); */
}

footer{
    color: #fff;
    background: #000;
    font-size: 18px;
    padding: 5px;
}

image resources：

响应式网站效果：



合理的使用栅格系统，使我们开发网站更加快速便捷！