📜  Bootstrap-响应式实用程序

📅  最后修改于: 2020-10-27 06:06:01             🧑  作者: Mango


 

Bootstrap提供了一些帮助程序类,以加快对移动设备的友好开发。这些可用于通过媒体查询,结合大型,小型和中型设备,按设备显示和隐藏内容。

谨慎使用这些文件,并避免创建同一网站的完全不同的版本。响应实用程序当前仅可用于块和表切换

Classes Devices
.visible-xs Extra small (less than 768px) visible
.visible-sm Small (up to 768 px) visible
.visible-md Medium (768 px to 991 px) visible
.visible-lg Larger (992 px and above) visible
.hidden-xs Extra small (less than 768px) hidden
.hidden-sm Small (up to 768 px) hidden
.hidden-md Medium (768 px to 991 px) hidden
.hidden-lg Larger (992 px and above) hidden

打印类别

下表列出了打印类别。使用这些按钮切换要打印的内容。

Classes Print
.visible-print Yes Visible
.hidden-print Visible only to browser not to print.

下面的示例演示上面列出的帮助程序类的用法。调整浏览器的大小或将示例加载到其他设备上,以测试响应式实用程序类。

✔ Visible on x-small
✔ Visible on small
Medium ✔ Visible on medium
✔ Visible on large

选中标记表示该元素在当前视口中可见。