bootstrap（四）响应式工具与按钮

一、响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。另外还包含了针对打印机显示或隐藏内容的工具类。

1.通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。

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

2.打印类

和常规的响应式类一样，使用下面的类可以针对打印机隐藏或显示某些内容。

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

二、按钮

按钮预定义样式

（默认样式）Default

（首选项）Primary

（成功）Success

（一般信息）Info

（警告）Warning

（危险）Danger

（链接）Link

 

按钮尺寸

  （大按钮）Large button
  （大按钮）Large button


  （默认尺寸）Default button
  （默认尺寸）Default button


  （小按钮）Small button
  （小按钮）Small button


  （超小尺寸）Extra small button
  （超小尺寸）Extra small button

响应式图片

通过为图片添加 .img-responsive 类可以让图片支持响应式布局。