1. 可见性类：
- .visible: 始终可见
- .invisible: 始终隐藏
- .visible-{breakpoint}: 在指定断点（sm、md、lg、xl）可见
- .invisible-{breakpoint}: 在指定断点（sm、md、lg、xl）隐藏
示例：
<div class="visible">始终可见</div>
<div class="invisible">始终隐藏</div>
<div class="visible-sm">在小屏幕可见</div>
<div class="invisible-md">在中等屏幕及以上隐藏</div>
2. 偏移类：
- .offset-{breakpoint}-{n}: 在指定断点（sm、md、lg、xl）偏移 n 列
示例：
<div class="col-md-6 offset-md-3">在中等屏幕上偏移3列</div>
3. 隐藏/显示类：
- .d-{breakpoint}-{display}: 在指定断点（sm、md、lg、xl）显示/隐藏
- display 可选值：none、inline、inline-block、block、table、table-cell 等
示例：
<div class="d-none d-md-block">在中等屏幕及以上显示</div>
<div class="d-sm-none">在小屏幕上隐藏</div>
4. 可伸缩的媒体对象：
- .img-fluid: 图片具有响应式的最大宽度
- .img-thumbnail: 图片具有圆角和边框
示例：
<img src="example.jpg" class="img-fluid" alt="Responsive Image">
<img src="example.jpg" class="img-thumbnail" alt="Thumbnail Image">
5. 响应式的工具类：
- .d-{size}-{none/block/inline}: 在指定大小下显示/隐藏/改为行内
- .d-{size}-flex: 在指定大小下显示为弹性盒子
- .d-{size}-grid: 在指定大小下显示为网格布局
- .d-{size}-inline-flex: 在指定大小下显示为行内弹性盒子
示例：
<div class="d-sm-none">在小屏幕上隐藏</div>
<div class="d-md-flex">在中等屏幕及以上显示为弹性盒子</div>
这些实用工具类可以帮助你更好地控制页面在不同设备上的显示效果，提升用户体验。在使用这些类时，记得根据具体需求合理选择，并在不同断点下进行测试。详细的文档可以在 Bootstrap 官方网站找到。
转载请注明出处：http://www.pingtaimeng.com/article/detail/12608/Bootstrap