断点是Bootstrap中的触发器，触发布局响应设备或视口大小的变化。断点是响应式设计的基石。使用它们来控制您的布局何时适合特定视口或设备尺寸。使用媒体查询构建带断点的CSS。媒体查询是CSS的一项功能，它允许您根据一组浏览器和操作系统参数有条件地应用样式。我们最常在媒体查询中使用最小宽度。移动优先、响应式设计是我们需要实现的目标。Bootstrap的CSS旨在应用最少的样式以使布局在最小的断点处工作，然后对样式进行分层以针对更大的设备调整该设计。这会优化您的CSS，缩短渲染时间，并为您的访问者提供出色的体验。Bootstrap包含六个默认断点，有时称为网格层，用于响应式构建。如果您使用我们的源Sass文件，可以自定义这些断点。引导程序中的默认媒体查询：每个断点大小都被选择为12的倍数，代表常见设备大小和视口大小的子集。它们并不特定于每个用例或设备，但提供范围为构建响应式应用程序提供了强大而一致的基础。媒体查询由于Bootstrap采用了模块优先的设计方法，我们使用一些媒体查询来为我们的布局和界面创建合理的断点。这些断点主要基于最小视口宽度，并允许我们在视口变化时缩放元素。以下代码的语义是：//Sourcemixins//xs断点不需要媒体查询，因为它实际上是`@media(min-width:0){...}`@includemedia-breakpoint-up(sm){...}@includemedia-breakpoint-up(md){...}@includemedia-breakpoint-up(lg){...}@includemedia-breakpoint-up(xl){...}@includemedia-breakpoint-up(xxl){...}//用法//示例：从`min-width:0`开始隐藏，然后在`sm`处显示breakpoint.custom-class{display:none;}@includemedia-breakpoint-up(sm){.custom-class{显示：块；在默认屏幕尺寸x-small,min-width:0元素中隐藏带有自定义类的DOM。但是，在sm和更大的屏幕上，使用display:block来显示。同样，以下代码的语义：%cx-product-facet-navigation{min-width:0;//在桌面体验中隐藏过滤器按钮@includemedia-breakpoint-up(lg){button.dialog-trigger{display:none;}}}在lg断点代表的屏幕尺寸上，用dialog-trigger隐藏按钮button。更多Jerry原创文章在这里：《王子熙》：
