為了更快地實(shí)現(xiàn)移動(dòng)友好型和響應(yīng)式開發(fā)，Bootstrap 提供了數(shù)十個(gè)實(shí)用程序類，用于處理顯示、隱藏、對(duì)齊和間距的需求。這些實(shí)用程序類可以與網(wǎng)格系統(tǒng)、內(nèi)容或組件混合使用，以便在不同的視口尺寸下靈活控制元素的表現(xiàn)形式。

一、改變display

我們的顯示實(shí)用程序類可以響應(yīng)性地切換屬性的公共值，使我們能夠在特定視口中顯示或隱藏網(wǎng)格系統(tǒng)、內(nèi)容或組件。通過與網(wǎng)格系統(tǒng)、內(nèi)容或組件混合使用這些顯示實(shí)用程序類，我們可以根據(jù)不同的屏幕尺寸來控制元素的可見性。舉個(gè)例子，我們可以使用類似 “d-flex” 的類來啟用flexbox布局，或者使用類似 “d-none d-md-block” 的類來在中型屏幕及以上顯示元素。

二、彈性框選項(xiàng)

Bootstrap 4是使用flexbox構(gòu)建的，但并非每個(gè)元素都已經(jīng)轉(zhuǎn)換為flexbox布局，因?yàn)檫@樣做可能會(huì)引入許多不必要的覆蓋，并且意外地改變關(guān)鍵的瀏覽器行為。大多數(shù)組件都是在啟用flexbox的情況下構(gòu)建的。

如果需要將flexbox布局應(yīng)用到元素中，請(qǐng)使用display: flex或其響應(yīng)式變體之一（例如，.d-flex、.d-sm-flex）。將需要使用這些類或值，以便能夠使用額外的flexbox實(shí)用程序來調(diào)整大小、對(duì)齊和間距等。通過應(yīng)用這些類，可以根據(jù)需要在不同的屏幕尺寸下靈活地控制元素的表現(xiàn)形式，從而實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)和適配不同的設(shè)備。Bootstrap提供了一整套靈活的實(shí)用程序類，幫助更好地利用flexbox布局，從而創(chuàng)建出符合預(yù)期的頁面布局和樣式。

三、邊距和填充

使用.margin和.padding實(shí)用程序可以控制元素和組件的間距和大小。Bootstrap 4包括一個(gè)基于變量默認(rèn)值的間距實(shí)用程序，共有五個(gè)級(jí)別的刻度。可以選擇應(yīng)用到所有視口的數(shù)值（例如，.mr-3），或者選擇響應(yīng)式變體以針對(duì)特定視口（例如，.mr-md-3表示在中型屏幕及以上生效）。

四、切換visibility

在Bootstrap 4中可以使用可見性實(shí)用程序來控制元素的顯示和隱藏，以達(dá)到對(duì)訪問者進(jìn)行視覺上的隱藏，而不會(huì)影響頁面的布局。這兩種實(shí)用程序分別是.d-*和.invisible。

1、.d-*類用于控制元素的顯示?？梢愿鶕?jù)需要選擇.d-none（完全隱藏元素）、.d-block（以塊級(jí)元素顯示）、.d-inline（以行內(nèi)元素顯示）等不同的類來調(diào)整元素的顯示方式。

2、.invisible類用于將元素在視覺上隱藏，但仍然會(huì)影響頁面布局。這個(gè)類會(huì)將元素設(shè)為visibility: hidden，但仍會(huì)占據(jù)其在文檔流中的位置。

通過使用這些可見性實(shí)用程序，可以方便地控制元素的顯示和隱藏，而無需直接操作display或visibility屬性。這樣可以更加靈活地管理頁面中元素的可見性，同時(shí)保持良好的頁面布局。