实例讲解响应式框架Bootstrap栅格系统

PHPz
发布: 2018-10-15 15:48:39
原创
1876 人浏览过

栅格系统栅格系统英文为"grid systems",也有人翻译为"网格系统",运用固定的格子设计版面布局,其风格工整简洁,在二战后大受欢迎,已成为今日出版物设计的主流风格之一。本文主要为大家分享一篇响应式框架Bootstrap栅格系统的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧,希望能帮助到大家。

【相关视频推荐:Bootstrap教程

实例如下:




 
 
 
 
 
 

 

           //fluid表示用 百分比   

               //row 行    

        //col-md-12 每行桌面占12列     

     

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

      

       

      

       

        

                  

       

               

       

        

                  

        

         登录 |           注册         

       

      

     

    

   

  

 

    

当前为桌面显示

   //visible默认占满整行      

当前为平面显示

    

当前为手机显示

  

 

登录后复制

效果显示图:

 

相关推荐:

详解前端响应式布局、响应式图片,与自制栅格系统

Bootstrap栅格系统学习笔记

学习使用bootstrap3栅格系统_javascript技巧

以上是实例讲解响应式框架Bootstrap栅格系统的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!