?
本文檔使用 php中文網(wǎng)手冊(cè) 發(fā)布
通過(guò)我們的顯示實(shí)用程序快速響應(yīng)地切換組件的顯示值。包括對(duì)一些更常見(jiàn)的值的支持,以及一些額外功能,用于控制打印時(shí)的顯示。
display
價(jià)值display
屬性接受了一些值,我們用實(shí)用程序類支持其中的許多值。我們故意不提供每個(gè)價(jià)值作為實(shí)用工具,所以我們支持:
.d-none
.d-inline
.d-inline-block
.d-block
.d-table
.d-table-cell
.d-flex
.d-inline-flex
通過(guò)將任何類應(yīng)用到您選擇的元素來(lái)使用它們。例如,下面介紹如何使用內(nèi)聯(lián),塊或內(nèi)聯(lián)塊實(shí)用程序(同樣適用于其他類)。
<div class="d-inline bg-success">d-inline</div><div class="d-inline bg-success">d-inline</div>
<span class="d-block bg-primary">d-block</span>
<div class="d-inline-block bg-warning">d-inline-block</div><div class="d-inline-block bg-warning">d-inline-block</div>
對(duì)于上面提到的每一個(gè)實(shí)用程序也都有響應(yīng)變化。
.d-none
.d-inline
.d-inline-block
.d-block
.d-table
.d-table-cell
.d-flex
.d-inline-flex
.d-sm-none
.d-sm-inline
.d-sm-inline-block
.d-sm-block
.d-sm-table
.d-sm-table-cell
.d-sm-flex
.d-sm-inline-flex
.d-md-none
.d-md-inline
.d-md-inline-block
.d-md-block
.d-md-table
.d-md-table-cell
.d-md-flex
.d-md-inline-flex
.d-lg-none
.d-lg-inline
.d-lg-inline-block
.d-lg-block
.d-lg-table
.d-lg-table-cell
.d-lg-flex
.d-lg-inline-flex
.d-xl-none
.d-xl-inline
.d-xl-inline-block
.d-xl-block
.d-xl-table
.d-xl-table-cell
.d-xl-flex
.d-xl-inline-flex
為了加速移動(dòng)設(shè)備的開(kāi)發(fā),請(qǐng)使用響應(yīng)式顯示類來(lái)顯示和隱藏設(shè)備中的元素。避免創(chuàng)建完全不同的同一站點(diǎn)版本,而是針對(duì)每個(gè)屏幕大小響應(yīng)地隱藏元素。
要隱藏元素,只需使用.d-none
類或其中一個(gè).d-{sm,md,lg,xl}-none
類來(lái)響應(yīng)任何屏幕變化。
要僅在給定的屏幕大小間隔上顯示元素,可以組合一個(gè).d-*-none
類的.d-*-*
類,例如.d-none.d-md-block.d-xl-none
將隱藏除中型和大型設(shè)備外的所有屏幕大小的元素。
屏幕尺寸 | 類別 |
---|---|
隱藏在所有 | d-none |
只在xs上隱藏 | d-none d-sm-block |
只隱藏在sm上 | d-sm-none d-md-block |
僅在md上隱藏 | d-md-none d-lg-block |
只隱藏在lg上 | d-lg-none d-xl-block |
僅在xl上隱藏 | d-xl-none |
全部可見(jiàn) | d-block |
僅在xs上可見(jiàn) | d-block d-sm-none |
僅在sm上可見(jiàn) | d-none d-sm-block d-md-none |
僅在md上可見(jiàn) | d-none d-md-block d-lg-none |
僅在lg上可見(jiàn) | d-none d-lg-block d-xl-none |
僅在xl上可見(jiàn) | d-none d-xl-block |
display
使用我們的打印顯示實(shí)用程序進(jìn)行打印時(shí)更改元素的值。
類別 | 打印樣式 |
---|---|
.d-print-block | 打印時(shí)應(yīng)用display:block到元素 |
.d-print-inline | 打印時(shí)應(yīng)用display:內(nèi)聯(lián)到元素 |
.d-print-inline-block | 打印時(shí)應(yīng)用display:inline-block到元素 |
.d-print-none | 打印時(shí),將元素display:none應(yīng)用于元素 |