Bootstrap布局实用程序

为了更快地实现移动友好型和响应式开发，Bootstrap 提供了数十个实用程序类，用于处理显示、隐藏、对齐和间距的需求。这些实用程序类可以与网格系统、内容或组件混合使用，以便在不同的视口尺寸下灵活控制元素的表现形式。

一、改变display

我们的显示实用程序类可以响应性地切换属性的公共值，使我们能够在特定视口中显示或隐藏网格系统、内容或组件。通过与网格系统、内容或组件混合使用这些显示实用程序类，我们可以根据不同的屏幕尺寸来控制元素的可见性。举个例子，我们可以使用类似 "d-flex" 的类来启用flexbox布局，或者使用类似 "d-none d-md-block" 的类来在中型屏幕及以上显示元素。

二、弹性框选项

Bootstrap 4是使用flexbox构建的，但并非每个元素都已经转换为flexbox布局，因为这样做可能会引入许多不必要的覆盖，并且意外地改变关键的浏览器行为。大多数组件都是在启用flexbox的情况下构建的。

如果需要将flexbox布局应用到元素中，请使用display: flex或其响应式变体之一（例如，.d-flex、.d-sm-flex）。将需要使用这些类或值，以便能够使用额外的flexbox实用程序来调整大小、对齐和间距等。通过应用这些类，可以根据需要在不同的屏幕尺寸下灵活地控制元素的表现形式，从而实现响应式设计和适配不同的设备。Bootstrap提供了一整套灵活的实用程序类，帮助更好地利用flexbox布局，从而创建出符合预期的页面布局和样式。

三、边距和填充

使用.margin和.padding实用程序可以控制元素和组件的间距和大小。Bootstrap 4包括一个基于变量默认值的间距实用程序，共有五个级别的刻度。可以选择应用到所有视口的数值（例如，.mr-3），或者选择响应式变体以针对特定视口（例如，.mr-md-3表示在中型屏幕及以上生效）。

四、切换visibility

在Bootstrap 4中可以使用可见性实用程序来控制元素的显示和隐藏，以达到对访问者进行视觉上的隐藏，而不会影响页面的布局。这两种实用程序分别是.d-*和.invisible。

1、.d-*类用于控制元素的显示。可以根据需要选择.d-none（完全隐藏元素）、.d-block（以块级元素显示）、.d-inline（以行内元素显示）等不同的类来调整元素的显示方式。

2、.invisible类用于将元素在视觉上隐藏，但仍然会影响页面布局。这个类会将元素设为visibility: hidden，但仍会占据其在文档流中的位置。

通过使用这些可见性实用程序，可以方便地控制元素的显示和隐藏，而无需直接操作display或visibility属性。这样可以更加灵活地管理页面中元素的可见性，同时保持良好的页面布局。