Notation
クラス名の形式は以下の通りです。
- xs の場合は
.display={value}というクラス名が付けられます。 - sm、md、lg、xl、xxl に対して
.display="{breakpoint}-{value}"があります。
value の種類は以下の通りです。
noneinlineinline-blockblockgridinline-gridtabletable-celltable-rowflexinline-flex
Examples
d-inline
d-inline
vue
<template>
<b-div
display="inline"
padding="2"
background-color="primary"
text-color="white"
>
d-inline
</b-div>
<b-div
display="inline"
padding="2"
background-color="dark"
text-color="white"
>
d-inline
</b-div>
</template>
<style lang="scss" scoped>
div {
margin: 0.25rem;
}
</style>
d-inline d-inline
vue
<template>
<b-span
display="block"
padding="2"
background-color="primary"
text-color="white"
>
d-inline
</b-span>
<b-span
display="block"
padding="2"
background-color="dark"
text-color="white"
>
d-inline
</b-span>
</template>
<style lang="scss" scoped>
span {
margin: 0.25rem;
}
</style>
Hiding elements
モバイルフレンドリーな開発を迅速に行うには、レスポンシブ表示属性を使用して、デバイスごとに要素を表示したり非表示にしたりします。同じサイトで全く異なるバージョンを作成することは避け、画面サイズごとにレスポンシブに要素を非表示にしましょう。
要素を非表示にするには、単にdisplay="none"クラスか、レスポンシブ画面のバリエーションに対してdisplay="{sm,md,lg,xl,xxl}-none"属性のいずれかを使用します。
特定の画面サイズ感覚でのみ要素を表示するには、1つのdisplay="*-none"クラスとdisplay="*-*"クラスを組み合わせることができます。たとえば、display="none display="md-block display="xl-none display="xxl-none"は、中型と大型のデバイスを除くすべての画面サイズに対して要素を非表示にします。
| Screen size | Display value |
|---|---|
| Hidden on all | none |
| Hidden only on xs | none sm-block |
| Hidden only on sm | sm-none md-block |
| Hidden only on md | md-none lg-block |
| Hidden only on lg | lg-none xl-block |
| Hidden only on xl | xl-none xxl-block |
| Hidden only on xxl | xxl-none |
| Visible on all | block |
| Visible only on xs | block sm-none |
| Visible only on sm | none sm-block md-none |
| Visible only on md | none md-block lg-none |
| Visible only on lg | none lg-block xl-none |
| Visible only on xl | none xl-block xxl-none |
| Visible only on xxl | none xxl-block |
hide on lg and wider screens
hide on screens smaller than lg
vue
<template>
<b-div display="lg-none">
hide on lg and wider screens
</b-div>
<b-div display="none lg-block">
hide on screens smaller than lg
</b-div>
</template>
Display in print
印刷表示ユーティリティ属性を使用して、印刷時に要素のdisplay値を変更できます。レスポンシブdisplay値と同じdisplay値のサポートが含まれています。
display="print-none"display="print-inline"display="print-inline-block"display="print-block"display="print-grid"display="print-inline-grid"display="print-table"display="print-table-row"display="print-table-cell"display="print-flex"display="print-inline-flex"
印刷属性と表示属性を組み合わせることができます。
Screen Only (Hide on print only)
Print Only (Hide on screen only)
Hide up to large on screen, but always show on print
vue
<template>
<b-div display="print-none">
Screen Only (Hide on print only)
</b-div>
<b-div display="none print-block">
Print Only (Hide on screen only)
</b-div>
<b-div display="none lg-block print-block">
Hide up to large on screen, but always show on print
</b-div>
</template>