您好,欢迎访问一九零五行业门户网

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>    <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怎么实现自适应的详细内容。
其它类似信息

推荐信息