Vertical...
Top tile
构建一个复杂的二维布局，您只需要一个单独的元素——tile：
基于 Flexbox 构建的贴片（Tile）
一个单个的贴片（Tile）元素可以构建二维的类似地铁图、Pinterest 图片集效果或者任何您喜欢的网格系统
<div class="tile">
<!-- The magical tile element! -->
</div>示例 #
...tiles
Bottom tile
Middle tile
With an image
Wide tile
Aligned with the right tile
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
Tall tile
With even more content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.
Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.
Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.
<div class="tile is-ancestor">
<div class="tile is-vertical is-8">
<div class="tile">
<div class="tile is-parent is-vertical">
<article class="tile is-child notification is-primary">
<p class="title">Vertical...</p>
<p class="subtitle">Top tile</p>
</article>
<article class="tile is-child notification is-warning">
<p class="title">...tiles</p>
<p class="subtitle">Bottom tile</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child notification is-info">
<p class="title">Middle tile</p>
<p class="subtitle">With an image</p>
<figure class="image is-4by3">
<img src="https://docs.rubyist.cn/bulma/images/placeholders/640x480.png">
</figure>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child notification is-danger">
<p class="title">Wide tile</p>
<p class="subtitle">Aligned with the right tile</p>
<div class="content">
<!-- Content -->
</div>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child notification is-success">
<div class="content">
<p class="title">Tall tile</p>
<p class="subtitle">With even more content</p>
<div class="content">
<!-- Content -->
</div>
</div>
</article>
</div>
</div>修饰符 #
tile 元素有 16 个修饰符：
-
3 个上下文相关的修饰符
is-ancestoris-parentis-child
-
1 个方向相关修饰符
is-vertical
-
12 个横向型号修饰符
- from
is-1 - to
is-12
- from
它如何运作：嵌套 #
万物皆贴片！创建一个贴片网格，您只需要嵌套 tile 元素。
用一个封装所以其他贴片的 ancestor 贴片开始：
<div class="tile is-ancestor">
<!-- All other tile elements -->
</div>添加水平分布的贴片元素：
<div class="tile is-ancestor">
<div class="tile">
<!-- Add content or other tiles -->
</div>
<div class="tile">
<!-- Add content or other tiles -->
</div>
</div>
您可以根据 12 列网格重新规划任何贴片。
例如，is-4 会占用水平空间的 1/3 位置：
<div class="tile is-ancestor">
<div class="tile is-4">
<!-- 1/3 -->
</div>
<div class="tile">
<!-- This tile will take the rest: 2/3 -->
</div>
</div>如果您想要垂直方向堆叠贴片，在其上级贴片上添加 is-vertical 修饰符：
<div class="tile is-ancestor">
<div class="tile is-4 is-vertical">
<div class="tile">
<!-- Top tile -->
</div>
<div class="tile">
<!-- Bottom tile -->
</div>
</div>
<div class="tile">
<!-- This tile will take up the whole vertical space -->
</div>
</div>如果您想为某一个贴片添加内容，只需：
- 如愿添加任意类，例如
box - 在贴片上添加
is-child修饰符 - 在上级贴片上添加
is-parent修饰符
<div class="tile is-ancestor">
<div class="tile is-4 is-vertical is-parent">
<div class="tile is-child box">
<p class="title">One</p>
</div>
<div class="tile is-child box">
<p class="title">Two</p>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child box">
<p class="title">Three</p>
</div>
</div>
</div>One
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
Two
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
Three
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.
Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.
Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.
<div class="tile is-ancestor">
<div class="tile is-4 is-vertical is-parent">
<div class="tile is-child box">
<p class="title">One</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
<div class="tile is-child box">
<p class="title">Two</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child box">
<p class="title">Three</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
<p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
</div>
</div>
</div>嵌套需要 #
至少 3 层深……
您需要至少 3 层 继承：
tile is-ancestor
|
└───tile is-parent
|
└───tile is-child
……但是如果您需要更多层！
您可以嵌入更多层贴片，然后，将其混合在一起！
tile is-ancestor
|
├───tile is-vertical is-8
| |
| ├───tile
| | |
| | ├───tile is-parent is-vertical
| | | ├───tile is-child
| | | └───tile is-child
| | |
| | └───tile is-parent
| | └───tile is-child
| |
| └───tile is-parent
| └───tile is-child
|
└───tile is-parent
└───tile is-childVertical tiles
Top box
Vertical tiles
Bottom box
Middle box
With an image
Wide column
Aligned with the right column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
Tall column
With even more content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.
Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.
Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.
<div class="tile is-ancestor">
<div class="tile is-vertical is-8">
<div class="tile">
<div class="tile is-parent is-vertical">
<article class="tile is-child box">
<!-- Put any content you want -->
</article>
<article class="tile is-child box">
<!-- Put any content you want -->
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<!-- Put any content you want -->
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<!-- Put any content you want -->
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<!-- Put any content you want -->
</article>
</div>
</div>3 列 #
Hello World
What is up?
Foo
Bar
Third column
With some content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
Vertical tiles
Top box
Vertical tiles
Bottom box
Middle box
With an image
Wide column
Aligned with the right column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
Tall column
With even more content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.
Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.
Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.
Side column
With some content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
Main column
With some content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
<div class="tile is-ancestor">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Hello World</p>
<p class="subtitle">What is up?</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Foo</p>
<p class="subtitle">Bar</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Third column</p>
<p class="subtitle">With some content</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
</div>
<div class="tile is-ancestor">
<div class="tile is-vertical is-8">
<div class="tile">
<div class="tile is-parent is-vertical">
<article class="tile is-child box">
<p class="title">Vertical tiles</p>
<p class="subtitle">Top box</p>
</article>
<article class="tile is-child box">
<p class="title">Vertical tiles</p>
<p class="subtitle">Bottom box</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Middle box</p>
<p class="subtitle">With an image</p>
<figure class="image is-4by3">
<img src="https://docs.rubyist.cn/bulma/images/placeholders/640x480.png">
</figure>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Wide column</p>
<p class="subtitle">Aligned with the right column</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<div class="content">
<p class="title">Tall column</p>
<p class="subtitle">With even more content</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
<p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
</div>
</div>
</article>
</div>
</div>
<div class="tile is-ancestor">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Side column</p>
<p class="subtitle">With some content</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
<div class="tile is-parent is-8">
<article class="tile is-child box">
<p class="title">Main column</p>
<p class="subtitle">With some content</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
</div>4 列 #
One
Subtitle
Two
Subtitle
Three
Subtitle
Four
Subtitle
Five
Subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.
Six
Subtitle
Seven
Subtitle
Eight
Subtitle
Nine
Subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
Ten
Subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
Eleven
Subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.
Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.
Twelve
Subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.
Thirteen
Subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
Fourteen
Subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.
<div class="tile is-ancestor">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">One</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Two</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Three</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Four</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
</div>
<div class="tile is-ancestor">
<div class="tile is-vertical is-9">
<div class="tile">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Five</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
</div>
</article>
</div>
<div class="tile is-8 is-vertical">
<div class="tile">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Six</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Seven</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Eight</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
</div>
</div>
<div class="tile">
<div class="tile is-8 is-parent">
<article class="tile is-child box">
<p class="title">Nine</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Ten</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<div class="content">
<p class="title">Eleven</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
</div>
</div>
</article>
</div>
</div>
<div class="tile is-ancestor">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Twelve</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
</div>
</article>
</div>
<div class="tile is-parent is-6">
<article class="tile is-child box">
<p class="title">Thirteen</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Fourteen</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
</div>
</article>
</div>
</div>
此页面为开放源码页面。
发现排版问题？或者表达模糊？
在 GitHub 改进该页内容
