不久之前,我们只是为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- :
col-md-*采用连字符分为三个部分,第一部分都是col,标识列
第二部分标识屏幕大小。md标识middle(中等屏幕大小)
最后一部分是一个在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。只要:
打开devtools
点击toggle device toolbar
就可以打开页面,它会在原来的页面上方加入一行,显示responsible的下拉菜单以及设备的宽度和高度输入框。我们可以在设备宽度输入框内填写我们想要的设备宽度。并使用768px、992px做边界值测试。
当输入768px时,此时为小屏幕,页面输出如期望的分为2行。
当输入769px时,此时为小屏幕,页面输出如期望的分为2行。
当输入767px时,此时为超小屏幕,页面输出如期望的分为3行。
当输入992px时,此时为中等屏幕,页面输出如期望的分为1行。
当输入1200px时,此时为超大屏幕,因为并没有定义超大屏幕下的占据比例,它会沿用上一级屏幕的定义,也就是中等屏幕的定义,页面输出如期望的依然为1行。
成了。我们的页面可以因应屏幕的大小而显示不同的页面组合。这就是响应式编程了。