Bulma Tiles
说明
Bulma 使用名为
tile 的单个元素类创建二维布局或 Metro Menu 样式。 Metro 菜单样式是 Microsoft 应用程序（如 Windows 8）的新样式界面。
让我们使用
tile 类创建一个简单的示例-
注意-调整编码基础输出窗口的大小以查看根据窗口大小发生的变化。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Tiles Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Tiles
</span>
<br>
<br>
<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 Tile</p>
<div class = "content">Hello World!!!</div>
<br>
</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-2by1">
<img src = "https://www.lidihuo.com/bootstrap/images/64.jpg">
</figure>
</article>
</div>
</div>
<div class = "tile is-parent">
<article class = "tile is-child notification is-danger">
<p class = "title">Wide tile</p>
<div class = "content">
Hello World!!!
</div>
<br>
</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>
<div class = "content">
Hello World!!!
</div>
<br>
</div>
</article>
</div>
</div>
</div>
</section>
</body>
</html>
它显示以下输出-
嵌套
Bulma 允许嵌套图块元素以网格格式显示图块。瓷砖的嵌套使用 3 级层次结构-
is-ancestor-它是瓦片的开始，它包裹着其他瓦片。
is-parent-它是一个修饰符，属于 is-ancestor 修饰符。
is-child-它是一个修饰符，属于 is-parent 修饰符。
下面的简单例子描述了使用 3 层以上的瓷砖来嵌套瓷砖元素-
注意-调整编码基础输出窗口的大小以查看根据窗口大小发生的变化。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Tiles Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Nesting of Tiles
</span>
<br>
<br>
<div class = "tile is-ancestor">
<div class = "tile is-4 is-vertical is-parent">
<div class = "tile is-child box">
<p class = "title">First Box</p>
<p>this is some sample text. this is some sample text.
this is some sample text. this is some sample text.
this is some sample text. this is some sample text.</p>
</div>
<div class = "tile is-child box">
<p class = "title">Second Box</p>
<p>this is some sample text. this is some sample text.
this is some sample text. this is some sample text.
this is some sample text. this is some sample text.</p>
</div>
</div>
<div class = "tile is-parent">
<div class = "tile is-child box">
<p class = "title">Third Box</p>
<p>this is some sample text. this is some sample text.
this is some sample text. this is some sample text.
this is some sample text. this is some sample text.</p>
<p>this is some sample text. this is some sample text.
this is some sample text. this is some sample text.
this is some sample text. this is some sample text.
this is some sample text. this is some sample text.
this is some sample text. this is some sample text.
this is some sample text. this is some sample text.</p>
<p>this is some sample text. this is some sample text.
this is some sample text. this is some sample text.
this is some sample text. this is some sample text.
this is some sample text. this is some sample text.
this is some sample text. this is some sample text.
this is some sample text. this is some sample text.</p>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
执行上面的代码，你会得到下面的输出-
