Bulma 容器和关卡
说明
Bulma 使用
容器 来表示基本布局元素并包装站点内容。
container 类将在不同设备上具有以下宽度值-
桌面的最大宽度为 960 像素。
宽屏的最大宽度为 1152 像素。
fullhd 的最大宽度为 1344 像素。
让我们创建一个
容器类的简单示例-
注意-调整编码基础输出窗口的大小以查看根据窗口大小发生的变化。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Container 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">
Container
</span>
<br>
<br>
<div class = "container">
<div class = "notification has-background-grey-lighter">
this container works on desktop.
</div>
</div>
<br>
<div class = "container is-fluid">
<div class = "notification has-background-grey-lighter">
this is <strong>fluid</strong> container, which has 32px gap on either side, on any viewport size.
</div>
</div>
<br>
<div class = "container is-widescreen">
<div class = "notification has-background-grey-lighter">
this is <strong>fullwidth</strong> container, works until <i>$widescreen</i> breakpoint.
</div>
</div>
<br>
<div class = "container is-fullhd">
<div class = "notification has-background-grey-lighter">
this is <strong>fullwidth</strong> container, works until <i>$fullhd</i> breakpoint.
</div>
</div>
</div>
</section>
</body>
</html>
它显示以下输出-
级别
布尔玛包括水平水平以指定左侧和右侧的水平。
level-left 类指定左侧元素，
level-right 类指定右侧元素。您可以使用
level-item 类定义每个单独的元素。
级别包含两种级别。
Centered Level-您可以使项目在 level 容器中居中。
Mobile Level-如果您想在移动设备上水平显示项目，请在 level 容器中使用 is-mobile 修饰符。
让我们使用上述级别类型为
级别 创建一个简单的示例，如下所示-
注意-调整编码基础输出窗口的大小以查看根据窗口大小发生的变化。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Container 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">
Level
</span>
<br>
<br>
<span class = "is-size-5">Level structure</span>
<nav class = "level has-background-grey-lighter">
<div class = "level-left has-background-warning">
<p class = "level-item"><a>Menu 1</a></p>
<p class = "level-item"><a>Menu 2</a></p>
<p class = "level-item"><a>Menu 3</a></p>
</div>
<div class = "level-right has-background-warning">
<p class = "level-item"><a>Menu 1</a></p>
<p class = "level-item"><a>Menu 2</a></p>
<p class = "level-item"><a>Menu 3</a></p>
</div>
</nav>
<span class = "is-size-5">Centered Level</span>
<nav class = "level has-background-grey-lighter">
<div class = "level-item has-text-centered">
<p>Item-1</p>
</div>
<div class = "level-item has-text-centered">
<p>Item-2</p>
</div>
<div class = "level-item has-text-centered">
<p>Item-3</p>
</div>
<div class = "level-item has-text-centered">
<p>Item-4</p>
</div>
</nav>
<span class = "is-size-5">Mobile Level</span>
<nav class = "level has-background-grey-lighter is-mobile">
<div class = "level-item has-text-centered">
<p>Item-1</p>
</div>
<div class = "level-item has-text-centered">
<p>Item-2</p>
</div>
<div class = "level-item has-text-centered">
<p>Item-3</p>
</div>
<div class = "level-item has-text-centered">
<p>Item-4</p>
</div>
</nav>
</div>
</section>
</body>
</html>
它显示以下输出-
