Grid system Grid system is called "grid systems" in English, and some people translate it as "grid system". It uses a fixed grid to design the layout. Its style is neat and concise. It became very popular after World War II and has become a popular publication in today's publishing industry. One of the mainstream styles of object design. This article mainly shares with you an example of the responsive framework Bootstrap grid system. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor to take a look, I hope it can help everyone.

【Related video recommendation: Bootstrap tutorial】

The example is as follows:

 
 
 
 
 
 



 
 　　　　　　　　　　//fluid表示用 百分比
  
　　　　　　　　　　　　　　　//row 行
   
　　　　　　　　//col-md-12 每行桌面占12列
    

     
　　　//col-md-offset-1 列偏移1列
      

      

       

      

       

        

         
        
       

       

        

         
风格
         
         
造型师
         
众分享
         
         
我的美丽衣橱
        
       

       

        

         
        
        

         登录 | 
         注册
        
       



      

     

    

   

  


 

    
当前为桌面显示
　　　//visible默认占满整行　
    
当前为平面显示

    
当前为手机显示

  

 

The effect display picture:

Related recommendations:

Detailed explanation of front-end responsive layout, Responsive images, and homemade grid system

Bootstrap grid system study notes

Learn to use bootstrap3 grid system_javascript skills

The above is the detailed content of Examples to explain the responsive framework Bootstrap grid system. For more information, please follow other related articles on the PHP Chinese website!