Bootstrap是一个流行的前端框架，它提供了许多有用的工具和组件来帮助开发者快速构建响应式网站。在Bootstrap4中，
img-rounded
类被用来为图片添加圆角效果，这使得图片在网页上看起来更加美观和现代。本文将深入探讨Bootstrap4中的
img-rounded
类，并展示其响应式魅力。
1. 什么是img-rounded？
在Bootstrap4中，
img-rounded
类是一个CSS类，用于给图片添加圆角效果。当这个类应用于一个
元素时，图片的四个角会被平滑地圆滑处理，从而创建出一种更加柔和的外观。
2. 响应式设计
Bootstrap4的一个核心特性是其响应式设计。这意味着网站能够根据不同的屏幕尺寸和设备类型自动调整布局和样式。
img-rounded
类也不例外，它同样支持响应式设计。
2.1 媒体查询
Bootstrap使用媒体查询（Media Queries）来实现响应式设计。通过定义不同的CSS规则，可以根据屏幕尺寸应用不同的样式。
@media (max-width: 768px) {
.img-rounded {
border-radius: 5px;
}
}
@media (min-width: 769px) {
.img-rounded {
border-radius: 10px;
}
}
在上面的代码中，当屏幕宽度小于768px时，图片的圆角为5px；当屏幕宽度大于或等于769px时，圆角为10px。
2.2 响应式图片
除了媒体查询，Bootstrap还提供了响应式图片的解决方案。使用
img-responsive
类，可以确保图片在不同屏幕尺寸下都能保持良好的显示效果。
3. 实际应用
在实际应用中，
img-rounded
类可以与Bootstrap的其他组件结合使用，以创建更加丰富的布局和视觉效果。
3.1 卡片布局
Bootstrap的卡片布局（Card Layout）是一个流行的组件，可以用来展示图片、文本和其他内容。
卡片标题
这是卡片的内容…
3.2 图片网格
Bootstrap的图片网格（Image Grid）组件可以用来展示一系列图片。
4. 总结
Bootstrap4的
img-rounded
类为图片添加圆角效果提供了简单而有效的方法。通过结合响应式设计和Bootstrap的其他组件，可以创建出既美观又实用的网页布局。掌握这些技巧，可以帮助开发者提升网站的用户体验。