Bootstrap 提供了一系列的响应式实用工具，可以帮助开发者在不同设备上实现更好的排版和布局效果。在本章节中，我们将介绍一些常用的响应式实用工具，并给出示例代码。
响应式工具类
Bootstrap 提供了一系列的类来控制元素在不同屏幕尺寸下的显示与隐藏，这些类都是以 hidden-* 和 visible-* 开头的。
隐藏元素
hidden-xs：在超小屏幕下隐藏元素（<768px）hidden-sm：在小屏幕下隐藏元素（≥768px）hidden-md：在中等屏幕下隐藏元素（≥992px）hidden-lg：在大屏幕下隐藏元素（≥1200px）
<div class="hidden-xs">在超小屏幕下隐藏的内容</div> <div class="hidden-sm">在小屏幕下隐藏的内容</div> <div class="hidden-md">在中等屏幕下隐藏的内容</div> <div class="hidden-lg">在大屏幕下隐藏的内容</div>
显示元素
visible-xs：在超小屏幕下显示元素（<768px）visible-sm：在小屏幕下显示元素（≥768px）visible-md：在中等屏幕下显示元素（≥992px）visible-lg：在大屏幕下显示元素（≥1200px）
<div class="visible-xs">在超小屏幕下显示的内容</div> <div class="visible-sm">在小屏幕下显示的内容</div> <div class="visible-md">在中等屏幕下显示的内容</div> <div class="visible-lg">在大屏幕下显示的内容</div>
响应式图像
Bootstrap 还提供了一些响应式图像的类，可以让图片根据屏幕尺寸自动调整大小。
img-responsive：让图片在父元素内自适应大小img-rounded：让图片呈现圆角img-circle：让图片呈现圆形img-thumbnail：让图片呈现缩略图效果
<img src="image.jpg" class="img-responsive" alt="响应式图片"> <img src="image.jpg" class="img-rounded" alt="圆角图片"> <img src="image.jpg" class="img-circle" alt="圆形图片"> <img src="image.jpg" class="img-thumbnail" alt="缩略图">
以上就是 Bootstrap 响应式实用工具的介绍，通过合理地运用这些类，可以让页面在不同设备上呈现出更好的效果。在下一章节中，我们将继续介绍 Bootstrap 的其他功能。