Bootstrap 提供了一些辅助类，以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。

需要谨慎使用这些工具，避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。

  超小屏幕
手机 (<768px)		 小屏幕
平板 (≥768px)		 中等屏幕
桌面 (≥992px)		 大屏幕
桌面 (≥1200px)
.visible-xs-* 可见 隐藏 隐藏 隐藏
.visible-sm-* 隐藏 可见 隐藏 隐藏
.visible-md-* 隐藏 隐藏 可见 隐藏
.visible-lg-* 隐藏 隐藏 隐藏 可见
.hidden-xs 隐藏 可见 可见 可见
.hidden-sm 可见 隐藏 可见 可见
.hidden-md 可见 可见 隐藏 可见
.hidden-lg 可见 可见 可见 隐藏

从 v3.2.0 版本起，形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体，每个针对 CSS 中不同的 display 属性，列表如下：

类组 CSS display
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

因此，以超小屏幕（xs）为例，可用的 .visible-*-* 类是：.visible-xs-block、.visible-xs-inline 和 .visible-xs-inline-block。

.visible-xs、.visible-sm、.visible-md 和 .visible-lg 类也同时存在。但是从 v3.2.0 版本开始不再建议使用。除了 <table> 相关的元素的特殊情况外，它们与 .visible-*-block 大体相同。

打印类

下表列出了打印类。使用这些切换打印内容。

class 浏览器 打印机
.visible-print-block
.visible-print-inline
.visible-print-inline-block		 隐藏 可见
.hidden-print 可见 隐藏

实例

下面的实例演示了上面所列举的帮助器类的用法。调整浏览器的窗口大小，或者在不同的设备上加载实例，测试响应式实用工具类。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <title>Bootstrap 实例 - 响应式实用工具</title>
  5.    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
  6.    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  7.    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
  8. </head>
  9. <body>
  10.  
  11. <div class="container" style="padding: 40px;">
  12.    <div class="row visible-on">
  13.       <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
  14.          box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
  15.          <span class="hidden-xs">特别小型</span>
  16.          <span class="visible-xs">✔ 在特别小型设备上可见</span>
  17.       </div>
  18.       <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
  19.          box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
  20.          <span class="hidden-sm">小型</span>
  21.          <span class="visible-sm">✔ 在小型设备上可见</span>
  22.       </div>
  23.       <div class="clearfix visible-xs"></div>
  24.       <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
  25.          box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
  26.          <span class="hidden-md">中型</span>
  27.          <span class="visible-md">✔ 在中型设备上可见</span>
  28.       </div>
  29.       <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
  30.          box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
  31.          <span class="hidden-lg">大型</span>
  32.          <span class="visible-lg">✔ 在大型设备上可见</span>
  33.       </div>
  34. </div>
  35.  
  36. </body>
  37. </html>

结果如下所示：

勾号（✔） 表示元素在当前视口中可见。

Bootstrap<基础十> 响应式实用工具的更多相关文章

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：响应式实用工具

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. Bootstrap-CSS：响应式实用工具

    ylbtech-Bootstrap-CSS:响应式实用工具 1.返回顶部 1.  Bootstrap 响应式实用工具 Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发.这些可以 ...

  3. bootstrap响应式实用工具

  4. Bootstrap <基础十九>分页

    Bootstrap 支持的分页特性.分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页. 分页(Pagination) 下表列出了 Bootstrap 提 ...

  5. Bootstrap <基础十八>面包屑导航（Breadcrumbs）

    面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航( ...

  6. Bootstrap<基础十六> 导航元素

    Bootstrap 提供的用于定义导航元素的一些选项.它们使用相同的标记和基类 .nav.Bootstrap 也提供了一个用于共享标记和状态的帮助器类.改变修饰的 class,可以在不同的样式间进行切 ...

  7. Bootstrap<基础十五> 输入框组

    Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输 ...

  8. Bootstrap<基础十四> 按钮下拉菜单

    使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...

  9. Bootstrap <基础十二>下拉菜单（Dropdowns）

    Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 ...

随机推荐

  1. ognl.OgnlException: target is null for setProperty(null, "emailTypeNo", [Ljava.lang.String;@1513fd0)

    [com.opensymphony.xwork2.ognl.OgnlValueStack] - Error setting expression 'emaiTypeDto.emailTypeNo' w ...

  2. 关于OJ1028的参考解法

    其中运用了最小公倍数与最大公约数乘积等于两数相乘的定理. #include <stdio.h> int main(int argc, char *argv[]) { int a,b,c,d ...

  3. ASP.NET MVC: Razor中的@:和语法

    本文将讨论新版Razor里视图引擎中支持的两个有用的语法功能:@:和<text>语法. 用Razor实现流畅编程 ASP.NET MVC 3配有一个新的名为“Razor”的视图引擎选项(除 ...

  4. jquery.trim() vs JS.trim()

    如果你在IE8浏览器下开发网站,其实这是个假命题,因为原生的javascript 并不支持 .trim()方法,如果你写了类似document.getElementByID().trim();的代码, ...

  5. J2EE版本

    Different versions of JEE: Note: JPE (Java Professional Edition) project announced in May 1998 at Su ...

  6. nginx rewrite 实现二级域名跳转

    当访问http://cbs.test.com跳转到http://www.test.com/test/cbs/方法一: (这种方法浏览器地址会变www.test.com/test/cbs)server ...

  7. [经验] 新版SkyIAR、Easy Image X在有些PE里不能运行的解决办法

    [经验] 新版SkyIAR.Easy Image X在有些PE里不能运行的解决办法 xxwl2008 发表于 2013-1-26 11:58:38 https://www.itsk.com/threa ...

  8. openssl lhash 数据结构哈希表

    哈希表是一种数据结构,通过在记录的存储位置和它的关键字之间建立确定的对应关系,来快速查询表中的数据: openssl lhash.h 为我们提供了哈希表OPENSSL_LHASH 的相关接口,我们可以 ...

  9. SAP销售模块塑工常见问题和解决方案(自己收藏)

    当创建订单时出现提示不存在该产品层次,如图: 解决方案:将该物料正确的产品层次提供给创建物料主数据的相关人员,将其改正. 对于包装膜类物料,在创建完销售订单进行后续的动作时,如开票,发现没有带出相应的 ...

  10. .net 导出Excel功能

    将DataSet对象导出成Excel文档 一.不带格式控制 void btnExport_Click(object sender, EventArgs e) { IList<string> ...