bootstrap响应式使用————bootstrap

bootstrap响应式使用

我并不认为什么网址都适合响应式。
像：阿里云的pc与移动端的展示。
pc：aliyun.com
移动端：m.aliyun.com
阿里云的pc端与移动端是完全分开的。写了两个前端页面来展示的。

响应式必须满足：
1.简单展示，非功能性的网站。后期功能越多越难做到响应式的展示。
2.pc与移动端各个模块尽可能统一。（如果展示都要求全不一样的，那还不如直接做成两个来展示）

col-lg一般用于大屏设备，大屏幕PC (≥1200px)
(min-width:1200px);

col-md一般用于中屏设备，普通PC (≥992px)
(min-width：992px);

col-sm一般用于小屏设备，平板 (≥768px)
(min-width：768px);

col-xs用于超小型设备，手机 (<768px)
(max-width：768px);

bootstrap已经为你准备好4种情况了。适应所有机型！

关于使用，一般设置的话四个属性都用到会比较好，这样就可以在不同屏幕上很好的展示。
比如你有了12个section标签，你想让他们在不同屏幕大小的时候有不同的展示方式，大屏时一行显示6个，中屏时一行显示3个，小屏时一行展示2个，超小屏一行展示1个，你就可以在每一个section标签里面这样写:

<section class = ‘col-lg-2 col-md-4 col-sm-6 col-xs-12’></section>

举个最最最最最简单的例子！

pc端：头部 + 左边内容+右边内容+底部footer
手机端：头部+中间内容+底部（手机屏幕小！没有所谓的左右布局！）
头部：（最小分辨率都是100%的占位！）
<div class="col-xs-12"></div>
中间内容：（pc为9:3  ，手机端为：100%）
<div class="col-md-9 col-sm-12 col-xs-12 p-bottom"></div>
<div class="col-md-3 col-sm-12 col-xs-12 p-bottom"></div>
有位置的移动就会使用到这个！！

大屏的话是长条展示 左边字，右边图！

手机的话，字占满上面，图占满下面！

在这种规则下。排版就很容易了。
pc：内容左右排。
移动端：内容上下排。子内容不够排，也可以上下排！

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
col-md-pull能改变排序！小屏后排序互换了！

hidden-xs：手机版隐藏！ 其他显示
visible-xs: 手机显示!  其他隐藏

基本排版就到这里了！！基本满足pc，平板，手机 三大平台。