文档

当你使用 Bulma 创建一个网站 所需要的一切

响应式布局助手

根据视口的宽度显示/隐藏内容

Show | 显示 #

你可以使用以下任意类修改 display :

block
flex
inline
inline-block
inline-flex

例如，以下是 is-flex 的工作原理:

Class	Mobile Up to `768px`	Tablet Between `769px` and `1023px`	Desktop Between `1024px` and `1215px`	Widescreen Between `1216px` and `1407px`	FullHD `1408px` 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

对于其他 display 选项，只需要将 is-flex 替换为 is-block is-inline is-inline-block or is-inline-flex 即可。

Hide #

Class	Mobile Up to `768px`	Tablet Between `769px` and `1023px`	Desktop Between `1024px` and `1215px`	Widescreen Between `1216px` and `1407px`	FullHD `1408px` 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

这是一个 开源项目. 错别字? Or 有疑问? 在GitHub上改进这个页面。

Bulma Partners

Check out their products!