当前位置:Gxlcms > JavaScript > bootstrap怎么实现自适应

bootstrap怎么实现自适应

时间:2021-07-01 10:21:17 帮助过:90人阅读

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

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怎么实现自适应的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行