http://www.kharebov.com

                                                                  【分分pk10】bootstrap怎么实现自适应-Bootstrap教程

                                                                  自适应: 不管屏幕多大,都尽量不换行,而只是横向缩放。

                                                                  Boostrap的“栅栏”模式(推荐学习:Bootstrap视频教程)

                                                                  Boostrap自适应功能的基础就是“栅栏"模式,它是将浏览器以行列形式去划分:一共12列,行数自定义,根据你所要显示的元素,确定每个元素显示的大小即需要的列数,如果超过范围,就会自动转行。每列的大小是Boostrap根据当前浏览器的大小自动平均分配。

                                                                  Boostrap的自适应功能

                                                                  其实理解栅栏模式之后,自适应功能就简单很多了,根据浏览器的大小,Boostrap有四种)栅栏类名提供使用,用法与Css样式表类名选择器样式调用是一样的:

                                                                  xs:col-xs-1 ~ col-xs-12,多列始终在一行内。

                                                                  sm:col-sm-1 ~ col]-sm-12,多列在浏览器像素宽度大于等于768px时才在一行内。

                                                                  md:col-md-1 ~ col-md-12,多列在浏览器像素宽度大于等于992px时才在一行内。

                                                                  lg:col-lg-1 ~ col-lg-12,多列在浏览器像素宽度大于等于1200px时才在一行内。

                                                                  我贴一段伪代码,:

                                                                  <div class="row">   <div class="col-sm-4  col-md-1"></div>   <div class="col-sm-4  col-md-1"></div>    &l(t;div class="col-sm-4  col-md-10"></div></div>

                                                                  这段的意思[是当浏览器的宽度在768——992之间时,采取4:4:4的模式呈现,当浏览器宽度大于992时,就按1:1:10的模式呈现。

                                                                  当然你也可以四种都是用,细分的在仔细点,不管怎么样,Boostrap会根据浏览器的宽度自动分配列宽度,从而匹配你所想要的呈现模式。

                                                                  至于它怎么做到的,你不用关心,你只需要考虑你在手机上的网页呈现样式,或者PC上的呈现样式的设计就行了,接下来,就交给Boostrap吧。

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

                                                                  以上就是bootstrap怎么实现自适应的详细内容,更多请关注php中文网其它相关文章!

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

                                                                  上一篇:宽带不能上网了是什么原因-常见问题
                                                                  下一篇:没有了