http://www.neropois.com

                                                                  【五分PK10】bootstrap col-sm col-md区别-Bootstrap教程

                                                                  bootstrap栅栏系统css中的col-xs-*、col-sm-*、col-md-* 的意义,就是根据显示屏幕宽度的大小,自动的选用对应的类的样式:

                                                                  .col-xs- 超小屏幕 手机 (<768px)(推荐学习:Boots(trap视频教程)

                                                                  .col-sm- 小屏幕 平板 (≥768px)

                                                                  .col-md- 中等屏幕 桌面显示器 (≥9[92px)

                                                                  .col-lg- 大屏幕 大桌面显示器 (≥1200px)

                                                                  首先说明:

                                                                  1、col-列;

                                                                  2、xs-maxsmall,超小;sm-small,小;md-medium,中等;lg-large,大;

                                                                  3、-*表示占列,即占自动每行row分12列栅格系统比;

                                                                  4、col-xs-*超小屏幕 手机 (<768px),

                                                                  .col-sm-*小屏幕 平板 (≥768px),

                                                                  ,

                                                                  .col-md-*中等屏幕 桌面显示器 (≥992px)(栅格参数).

                                                                  5、不管在哪种屏幕上,栅格系统都会自动的每行row分12列 col-xs-*和col-sm-* 和col-md-*后面跟的参数表示在当前的屏幕中每个div所占列数。

                                                                  例如 <div class="col-xs-6 col-md-3"> 这个div在屏幕中占的位置是: .col-xs-6 在超小屏幕中占6列 也就是屏幕的一半(12/6列=2个div) ,.col-md-3 在中单屏幕中占3列也就是1/4(12/3列=4个div)。

                                                                  6、反推,如果我们要在小屏幕上并排显示3个div(12/3个=每个占4 列 ),则col-xs-4;在大屏幕上显示6个div(12/6个=每个占2列 ) ,则 col-md-2;这样我们就可以控制我们自己想要的什么排版了。

                                                                  更多Bootst)ra]p相关技术文章,请访问Bootstrap教程栏目进行学习!

                                                                  以上就是bootstrap col-sm col-md区别的详细内容,更多请关注php中文网其它相关文章!

                                                                1. 微信
                                                                2. 分享php中文网最新课程二维码相关标签:bootstrap
                                                                3. 本文原创发布php中文网
                                                                4. 郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

                                                                  上一篇:TCL:预计2019年上半年净利润26-28亿,比上年同期上升52%-65% - TCL
                                                                  下一篇:没有了