bootstrapv3.37源码(响应式工具)

visible-*​ (常用类)

visible-xs
visible-sm
visible-md
visible-lg

.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
  display: none !important;
}
/* 屏幕小于767px，显示元素 */
@media (max-width: 767px) {
  .visible-xs {
    display: block !important;
  }
}

/* 屏幕在768px ~ 991px 之间显示元素*/
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm {
    display: block !important;
  }
}

/* 屏幕在992x ~ 1199px 之间显示元素*/
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md {
    display: block !important;
  }
}

/* 屏幕大于1200px，显示元素 */
@media (min-width: 1200px) {
  .visible-lg {
    display: block !important;
  }
}
/* 总结: 默认给这些类名设置display: none​, 然后再使用媒体查询检测屏幕宽度，设置disaply: block !important */

​hidden-* (常用类)

​hidden-xs
​hidden-sm
​hidden-md
​hidden-lg

/* 屏幕小于767px,隐藏 */
@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
/* 屏幕大于1200px，隐藏 */
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}
/* 总结: 直接使用@media来检测屏幕宽度，设置display: none!important（同上面几种hidden-*）​ */