Bootstrap 3 之 Bootstrap 响应式实用工具

Bootstrap 提供了一系列的响应式实用工具,可以帮助开发者在不同设备上实现更好的排版和布局效果。在本章节中,我们将介绍一些常用的响应式实用工具,并给出示例代码。

响应式工具类

Bootstrap 提供了一系列的类来控制元素在不同屏幕尺寸下的显示与隐藏,这些类都是以 hidden-*visible-* 开头的。

隐藏元素

  • hidden-xs:在超小屏幕下隐藏元素(<768px)
  • hidden-sm:在小屏幕下隐藏元素(≥768px)
  • hidden-md:在中等屏幕下隐藏元素(≥992px)
  • hidden-lg:在大屏幕下隐藏元素(≥1200px)
---- -----------------------------------
---- ----------------------------------
---- -----------------------------------
---- ----------------------------------

显示元素

  • visible-xs:在超小屏幕下显示元素(<768px)
  • visible-sm:在小屏幕下显示元素(≥768px)
  • visible-md:在中等屏幕下显示元素(≥992px)
  • visible-lg:在大屏幕下显示元素(≥1200px)
---- ------------------------------------
---- -----------------------------------
---- ------------------------------------
---- -----------------------------------

响应式图像

Bootstrap 还提供了一些响应式图像的类,可以让图片根据屏幕尺寸自动调整大小。

  • img-responsive:让图片在父元素内自适应大小
  • img-rounded:让图片呈现圆角
  • img-circle:让图片呈现圆形
  • img-thumbnail:让图片呈现缩略图效果
---- --------------- ---------------------- ------------
---- --------------- ------------------- -----------
---- --------------- ------------------ -----------
---- --------------- --------------------- ----------

以上就是 Bootstrap 响应式实用工具的介绍,通过合理地运用这些类,可以让页面在不同设备上呈现出更好的效果。在下一章节中,我们将继续介绍 Bootstrap 的其他功能。


上一篇:Bootstrap 辅助类
下一篇:Bootstrap 字体图标