栅格响应式工具

bootstrap3 | 本篇文章共245字,预计阅读1分钟
文章目录

利用媒体查询功能使用工具类可以方便的针对不同设备展示或隐藏页面内容

1
2
3
4
5
6
7
8
9
10
11
12
<div class="container">
<div class="row hidden-sm">
<div class="bg-info col-lg-3">col-lg-3</div>
<div class="bg-success col-lg-6">col-lg-6</div>
<div class="bg-info col-lg-3">col-lg-3</div>
</div>
<div class="row visible-sm">
<div class="bg-info col-lg-4">col-lg-4</div>
<div class="bg-success col-lg-2">col-lg-6</div>
<div class="bg-info col-lg-6">col-lg-2</div>
</div>
</div>
  1. visible-xs
    -sm
    -md
    -lg 开始时隐藏,媒体查询到指定区域时才显示
  2. hidden-xs
    -sm
    -md
    -lg 开始时显示,媒体查询到指定区域时隐藏
  3. 该属性指定到外层包裹器上

本文作者: moofing

本文链接: https://moofing.gitee.io/posts/a32ed02f.html

版权声明: 本文采用 CC BY-NC-SA 4.0进行许可,转载或引用时请遵守该协议