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.tutorialspoint.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>
执行上述代码，您将得到以下输出 −
bulma_layout.html
