bootstrap响应式使用————bootstrap
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了bootstrap响应式使用————bootstrap，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1846字，纯文字阅读大概需要3分钟。
内容图文
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，平板，手机 三大平台。
内容总结
以上是互联网集市为您收集整理的bootstrap响应式使用————bootstrap全部内容，希望文章能够帮你解决bootstrap响应式使用————bootstrap所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。