レベルの**構造**は以下の通りです
-
level: メインコンテナlevel-left: 左側-
level-right: 右側level-item: 個々の要素
level-itemには、タイトル、ボタン、テキスト入力、あるいは単純なテキストなど、ほぼ*何でも*挿入できます。 Bulmaのlevel内にどのような要素を配置しても、それらは常に**垂直方向に中央揃え**されます。
スポンサー
レベル
ほぼすべての他の要素を含むことができる、多目的の**水平レベル**
例
HTML
<!-- Main container -->
<nav class="level">
<!-- Left side -->
<div class="level-left">
<div class="level-item">
<p class="subtitle is-5"><strong>123</strong> posts</p>
</div>
<div class="level-item">
<div class="field has-addons">
<p class="control">
<input class="input" type="text" placeholder="Find a post" />
</p>
<p class="control">
<button class="button">Search</button>
</p>
</div>
</div>
</div>
<!-- Right side -->
<div class="level-right">
<p class="level-item"><strong>All</strong></p>
<p class="level-item"><a>Published</a></p>
<p class="level-item"><a>Drafts</a></p>
<p class="level-item"><a>Deleted</a></p>
<p class="level-item"><a class="button is-success">New</a></p>
</div>
</nav>中央揃えレベル #
**中央揃えレベル**が必要な場合は、
levelコンテナの**直接の**子要素である限り、必要な数のlevel-itemを使用できます。例
HTML
<nav class="level">
<div class="level-item has-text-centered">
<div>
<p class="heading">Tweets</p>
<p class="title">3,456</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Following</p>
<p class="title">123</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Followers</p>
<p class="title">456K</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Likes</p>
<p class="title">789</p>
</div>
</div>
</nav>例
HTML
<nav class="level">
<p class="level-item has-text-centered">
<a class="link is-info">Home</a>
</p>
<p class="level-item has-text-centered">
<a class="link is-info">Menu</a>
</p>
<p class="level-item has-text-centered">
<img
src="https://bulma.dokyumento.jp/assets/images/bulma-type.png"
alt=""
style="height: 30px"
/>
</p>
<p class="level-item has-text-centered">
<a class="link is-info">Reservations</a>
</p>
<p class="level-item has-text-centered">
<a class="link is-info">Contact</a>
</p>
</nav>モバイルレベル #
デフォルトでは、スペースの都合上、モバイルではレベルは垂直です。モバイルでもレベルを水平にしたい場合は、
levelコンテナにis-mobile修飾子を追加します。例
HTML
<nav class="level is-mobile">
<div class="level-item has-text-centered">
<div>
<p class="heading">Tweets</p>
<p class="title">3,456</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Following</p>
<p class="title">123</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Followers</p>
<p class="title">456K</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Likes</p>
<p class="title">789</p>
</div>
</div>
</nav>