Bootstrap写的丑丑响应式布局小案列

简介：

Bootstrap是一种前端开发框架，它由规范的css，javascript插件构成

好处：其最大的优势是响应式布局，
使得开发者可以方便的让网页无论在台式机、平板设备、手机上都获得最佳的体验. Bootstrap在以下方面优势比较显著

盒子关于各种尺寸下的隐藏

先看看效果图：
这是正常屏幕下，也就是超大屏视图下，蓝色背景的盒子被隐藏了

这大屏视图下，灰色背景的盒子被隐藏了

这是中屏视图下，绿色背景的盒子被隐藏了

这是小屏视图下，红色背景的盒子被隐藏了

这是超小屏视图下，黄色背景的盒子被隐藏了

总结：不管在什么尺寸下都只会显示4个盒子

实现原理：

<div class="row mt-5">
  <div class="col bg-primary text-white d-xl-none">超大屏以外显示</div>
  <div class="col bg-secondary text-white d-lg-none d-xl-block">大屏以外显示</div>
  <div class="col bg-success text-white d-md-none d-lg-block">中屏以外显示</div>
  <div class="col bg-danger text-white d-sm-none d-md-block">小屏以外显示</div>
  <div class="col bg-warning text-white d-none d-sm-block">超小屏以外显示</div>
</div>

盒子关于各种尺寸下的显示

看完隐藏再来看看显示
超大屏幕下显示

大屏下显示

中屏下显示

小屏下显示

超小屏幕下显示

总结：这就是不管在什么尺寸下只显示一个盒子

实现原理：

<div class="row mt-5">
<div class="col bg-primary text-white d-xl-block d-none">超大屏显示</div>
  <div class="col bg-secondary text-white d-xl-none d-lg-block d-none">大屏显示</div>
  <div class="col bg-success text-white d-lg-none d-md-block d-none">中屏显示</div>
  <div class="col bg-danger text-white d-md-none d-sm-block d-none">小屏显示</div>
  <div class="col bg-warning text-white d-block d-sm-none">超小屏显示</div>
</div>