Bulma-container-levels
提供：Dev Guides
Bulma-コンテナーとレベル
説明
Bulmaは_containers_を使用して基本的なレイアウト要素を表し、サイトのコンテンツをラップします。 _container_クラスは、さまざまなデバイスの幅の値が以下になります-
- _desktop_の最大幅は960pxです。
- _widescreen_の最大幅は1152pxです。 *_fullhd_の最大幅は1344pxです。
_container_クラスの簡単な例を作成しましょう-
* 注*-コーディンググラウンド出力ウィンドウのサイズを変更して、ウィンドウサイズに応じて発生する変更を確認します。
<!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>以下の出力が表示されます-
レベル
Bulmaには水平レベルが含まれ、左側と右側のレベルを指定します。 _level-left_クラスは左側の要素を指定し、_level-right_クラスは右側の要素を指定します。 _level-item_クラスを使用して、個々の要素を定義できます。
レベルには2種類のレベルが含まれます。
- 中央レベル-アイテムを_level_コンテナの中央に配置できます。
- モバイルレベル-モバイルでアイテムを水平に表示する場合は、_level_コンテナで_is-mobile_修飾子を使用します。
以下に示すように、上記のレベルタイプを使用して_level_の簡単な例を作成しましょう-
_ 注-コーディンググラウンド出力ウィンドウのサイズを変更して、ウィンドウサイズに応じて発生する変更を確認します。_
<!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>以下の出力が表示されます-
