bootstrap - responsive layout

不久之前,我们只是为PC做页面。比如经典的左中右结构网页布局就可以使用bootstrap直接搞定:

<nav class="container">
    <section class="row">
        <div  class="col-md-2">
            left
        </div>
        <div  class="col-md-8">
         middle
        </div>
        <div  class="col-md-2">
          right
        </div> 
    </section>
</nav>

在进一步解释之前,我们首先背下来一个事实:bootstrap布局系统会把每个屏划分为12等分。并提供划分这个等分的方法。

然后继续。每个.container的容器内都可以加入.row作为行,在行内通过col-md-来指定划分每个子元素的占据宽度。解释下col-md- :

  1. col-md-*采用连字符分为三个部分,第一部分都是col,标识列

  2. 第二部分标识屏幕大小。md标识middle(中等屏幕大小)

  3. 最后一部分是一个在12内的数字,它表示在总宽度下,当前元素占据的比例。比如col-md-2指定为2/12,col-md-8标识占据8/12。

这段代码的含义,换成白话就是:在中等屏幕大小的情况下,三个div块分别占据当前行总宽度的2/12、8/12、2、12。

屏幕大小使用代号,全面屏幕和代号列表如下:

屏     代号 范围            
大屏幕  lg  大于等于1200px
中等屏  md 宽度在992px和1200px之间
小屏幕  sm  宽度大于768px和992px之间
超小屏  xs  宽度小于768px

所以,几个屏幕大小的临界点值为768px、992px、1200px。

这个左中右结构,在小屏情况下就会显得太挤了(比如ipad的竖屏情况下屏宽刚刚好768px)。此时我希望把前两个div占据一行,分别占据3/12、9/12 ,第3个div放到下一行。怎么办?只要使用col-sm-*来指定比例即可:

 <nav class="container">
    <section class="row">
        <div  class="col-sm-3 col-md-2">
            left
        </div>
        <div  class="col-sm-9 col-md-8">
         middle
        </div>
        <div  class="col-sm-12 col-md-2">
          right
        </div> 
    </section>
</nav>

就是说,在小屏幕的情况下,第一个div占据第一行的3/12,第二个div占据第一行的9/12,第三个div占据下一个的12/12。

如何验证这样做的效果确实是如我的期望呢?现在隆重请出chrome devtools。只要:

  1. 打开devtools

  2. 点击toggle device toolbar

就可以打开页面,它会在原来的页面上方加入一行,显示responsible的下拉菜单以及设备的宽度和高度输入框。我们可以在设备宽度输入框内填写我们想要的设备宽度。并使用768px、992px做边界值测试。

  • 当输入768px时,此时为小屏幕,页面输出如期望的分为2行。

  • 当输入769px时,此时为小屏幕,页面输出如期望的分为2行。

  • 当输入767px时,此时为超小屏幕,页面输出如期望的分为3行。

  • 当输入992px时,此时为中等屏幕,页面输出如期望的分为1行。

  • 当输入1200px时,此时为超大屏幕,因为并没有定义超大屏幕下的占据比例,它会沿用上一级屏幕的定义,也就是中等屏幕的定义,页面输出如期望的依然为1行。

成了。我们的页面可以因应屏幕的大小而显示不同的页面组合。这就是响应式编程了。

    原文作者:1000copy
    原文地址: https://segmentfault.com/a/1190000006855206
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞