bootstrap是怎么实现自适应的?

自适应: 不管屏幕多大,都尽量不换行,而只是横向缩放。而Boostrap是通过“栅栏系统”实现自适应的。

栅栏系统是通过定义容器大小,并将其等分12份,通过一系列行(row)与列(column),结合媒体查询制作成强大的响应式栅格系统。

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

工作原理:

  • 数据行(row)必须包含在 .container(固定宽度) 或 .container-fluid(100%宽度)中。以便为其赋予合适的排列(aligment)和内补(padding)。

  • 通过行(row)在水平方向上创建一组列(column),随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。。

  • 通过列(row)设置padding属性来创建列之间的间隔。通过.row设置负值margin从而抵消.container元素设置的padding(简介为行(row)所包含的列(column)抵消padding,也即后面实例中向外突出的原因)。

  • 超过12列,多余的列另起一行

栅栏参数表:

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  @media (min-width: 768px) {
  .container {
    width: 750px;
  }
  @media (min-width: 992px) {
  .container {
    width: 970px;
  }
  @media (min-width: 1200px) {
  .container {
    width: 1170px;
  }

如上,栅栏系统最外层区分了四种宽度的浏览器:

DescribeWidthClass Prefix
超小屏<768px(auto).col-xs-
小屏>=768px(750ox).col-sm-
中屏>=992px(970px).col-md-
大屏>=1200px(1170px).col-lg-

基本用法:

创建一个响应式行:

<div class="container">
    <div class="row">...</div>
</div>

1.通过更改数字合并列(列总和<=12)

        <div class="container">
            <div class="row">
                <div class="col-md-4" style="border:1px solid #1B6D85;">.col-md-4</div>
                <div class="col-md-8" style="border:1px solid #1B6D85;">.col-md-8</div>
            </div>
            <div class="row">
                <div class="col-md-4" style="border:1px solid #1B6D85;">.col-md-4</div>
                <div class="col-md-4" style="border:1px solid #1B6D85;">.col-md-4</div>
                <div class="col-md-4" style="border:1px solid #1B6D85;">.col-md-4</div>
            </div>
            <div class="row">
                <div class="col-md-6" style="border:1px solid #1B6D85;">.col-md-6</div>
                <div class="col-md-6" style="border:1px solid #1B6D85;">.col-md-6</div>
            </div>

1.png

2.列排序

改变列的方向,就是改变左右浮动,并且设置浮动的距离。(通过添加类名“col-md-push-number”和“col-md-pull-number”)

<div class="container">
            <div class="row">
                <div class="col-md-4 col-md-push-8" style="border: 1px solid silver;">.col-md-4</div>
                <div class="col-md-8 col-md-pull-4" style="border: 1px solid silver;">.col-md-8</div>
            </div>
        </div>

2.png3.列的嵌套

<div class="container">
    <div class="row" style="border: 1px solid red;">
        <div class="col-md-8">
            <!--嵌套,将父层宽度视为100%-->
            <div class="row">
                <div class="col-md-6" style="border: 2px dashed green;">col-md-6</div>
                <div class="col-md-6"style="border: 2px dashed green;">col-md-6</div>
            </div>
        </div>
        <div class="col-md-4">col-md-4</div>
    </div>
</div>

3.png

更多web开发知识,请查阅 HTML中文网 !!

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

赞(0) 打赏
未经允许不得转载:web前端首页 » Bootstrap 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏