你可以使用以下显示类之一:
is-block
is-flex
is-inline
is-inline-block
is-inline-flex
例如,下面是is-flex
如何工作的:
显示隐藏(Visibility)
根据窗口的宽度显示/隐藏内容
你可以使用以下显示类之一:
is-block
is-flex
is-inline
is-inline-block
is-inline-flex
例如,下面是is-flex
如何工作的:
Class |
Mobile Up to 768px
|
Tablet Between 769px and 1023px
|
Desktop Between 1024px and 1215px
|
Widescreen Between 1216px and 1407px
|
FullHD1408px and above
|
---|---|---|---|---|---|
is-flex-mobile
|
Flex | Unchanged | Unchanged | Unchanged | Unchanged |
is-flex-tablet-only
|
Unchanged | Flex | Unchanged | Unchanged | Unchanged |
is-flex-desktop-only
|
Unchanged | Unchanged | Flex | Unchanged | Unchanged |
is-flex-widescreen-only
|
Unchanged | Unchanged | Unchanged | Flex | Unchanged |
要在特定断点之前或从该断点开始显示的类 |
|||||
is-flex-touch
|
Flex | Flex | Unchanged | Unchanged | Unchanged |
is-flex-tablet
|
Unchanged | Flex | Flex | Flex | Flex |
is-flex-desktop
|
Unchanged | Unchanged | Flex | Flex | Flex |
is-flex-widescreen
|
Unchanged | Unchanged | Unchanged | Flex | Flex |
is-flex-fullhd
|
Unchanged | Unchanged | Unchanged | Unchanged | Flex |
对于其他显示选项,只需将is-flex
替换为 is-block
is-inline
is-inline-block
or is-inline-flex
Class |
Mobile Up to 768px
|
Tablet Between 769px and 1023px
|
Desktop Between 1024px and 1215px
|
Widescreen Between 1216px and 1407px
|
FullHD1408px and above
|
---|---|---|---|---|---|
is-hidden-mobile
|
Hidden | Visible | Visible | Visible | Visible |
is-hidden-tablet-only
|
Visible | Hidden | Visible | Visible | Visible |
is-hidden-desktop-only
|
Visible | Visible | Hidden | Visible | Visible |
is-hidden-widescreen-only
|
Visible | Visible | Visible | Hidden | Visible |
隐藏到特定断点或从特定断点隐藏的类 |
|||||
is-hidden-touch
|
Hidden | Hidden | Visible | Visible | Visible |
is-hidden-tablet
|
Visible | Hidden | Hidden | Hidden | Hidden |
is-hidden-desktop
|
Visible | Visible | Hidden | Hidden | Hidden |
is-hidden-widescreen
|
Visible | Visible | Visible | Hidden | Hidden |
is-hidden-fullhd
|
Visible | Visible | Visible | Visible | Hidden |
is-invisible |
添加隐藏的可见性 |
is-hidden |
隐藏元素 |
is-sr-only |
直观地隐藏元素,但保持元素在屏幕占位。 |