酷客网Bulma工具栏，水平工具栏可以为用户提供更多操作，为了让组件在同一行中渲染，可以使用level组件。
在布局的第2列中创建主体内容，添加<h1>标签并加上is-title类，该类会使得<h1>标签的文本加粗，字号增大，以突出显示。
level组件和navbar组件非常类似，但如果不是实现导航栏，应尽量避免使用navbar组件。
level组件的结构如下：
<nav class="level">
<div class="level-left">
<div class="level-item">
</div>
</div>
<div class="level-left">
<div class="level-item">
</div>
</div>
</nav>
创建工具栏
介绍过了level组件和navbar组件，但是还有几个修饰符类没有提及。
- subtitle：次级标题，与title类对应。
- is-5：标题修饰符类，产生类似于
<h5>的标题效果。 - is-success：代表成功状态，默认设置绿色的效果。
- is-hidden-tablet-only：在平板设备上隐藏元素。
- select：正如control在输入框的使用，把select类用于
<select>标签效果相近。
最终的工具栏代码如下所示：
<h1 class="title">Books</h1>
<nav class="level">
<div class="level-left">
<div class="level-item">
<p class="subtitle is-5">
<strong>6</strong> books
</p>
</div>
<p class="level-item">
<a class="button is-success" href="new-book.html">New</a>
</p>
<div class="level-item is-hidden-tablet-only">
<div class="field has-addons">
<p class="control">
<input class="input" type="text" placeholder="Book name, ISBN...">
</p>
<p class="control">
<button class="button">
Search
</button>
</p>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
Order by
</div>
<div class="level-item">
<div class="select">
<select>
<option>Publish date</option>
<option>Price</option>
<option>Page count</option>
</select>
</div>
</div>
</div>
</nav>
以上代码添加了标题“Books”和包含如下功能的水平工具栏，见图所示:
- 图书计数。
- “New”按钮，点击会跳转到一个新建图书页面。
- 搜索框。
- 排序下拉框。
说明：为了避免工具栏发生内容溢出，在平板设备上会隐藏搜索框。多亏了level类，所有元素都是垂直对齐且均匀间隔的。
完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>酷客网(coolcou.com)</title>
<link rel="stylesheet" href="icons/css/font-awesome.min.css">
<link rel="stylesheet" href="css/website.css">
</head>
<body>
<nav class="navbar has-shadow">
<div class="navbar-brand">
<a class="navbar-item">
<img src="images/coolcou_icon.png">
</a>
<div class="navbar-burger burger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<div class="navbar-item">
<div>
<img src="images/coolcou_type.png" width="250.5" height="21">
<br>
<small>Publishing at the speed of technology</small>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item has-dropdown is-hoverable">
<div class="navbar-link">
Alex Johnson
</div>
<div class="navbar-dropdown is-right">
<a class="navbar-item">
<div>
<span class="icon is-small">
<i class="fa fa-user-circle-o"></i>
</span>
Profile
</div>
</a>
<a class="navbar-item">
<div>
<span class="icon is-small">
<i class="fa fa-bug"></i>
</span>
Report bug
</div>
</a>
<a class="navbar-item">
<div>
<span class="icon is-small">
<i class="fa fa-sign-out"></i>
</span>
Sign Out
</div>
</a>
</div>
</div>
</div>
</div>
</nav>
<section class="section">
<div class="columns">
<div class="column is-4-tablet is-3-desktop is-2-widescreen">
<nav class="menu">
<p class="menu-label">
Menu
</p>
<ul class="menu-list">
<li>
<a href="dashboard.html">
<span class="icon">
<i class="fa fa-tachometer"></i>
</span>
Dashboard
</a>
</li>
<li>
<a class="is-active" href="books.html">
<span class="icon">
<i class="fa fa-book"></i>
</span>
Books
</a>
</li>
<li>
<a href="customers.html">
<span class="icon">
<i class="fa fa-address-book"></i>
</span>
Customers
</a>
</li>
<li>
<a href="orders.html">
<span class="icon">
<i class="fa fa-file-text-o"></i>
</span>
Orders
</a>
</li>
</ul>
</nav>
</div>
<div class="column">
<h1 class="title ">Books</h1>
<nav class="level">
<div class="level-left">
<div class="level-item">
<p class="subtitle is-5">
<strong>6</strong> books
</p>
</div>
<p class="level-item">
<a class="button is-success" href="new-book.html">New</a>
</p>
<div class="level-item is-hidden-tablet-only">
<div class="field has-addons">
<p class="control">
<input class="input" type="text" placeholder="Book name, ISBN…">
</p>
<p class="control">
<button class="button">
Search
</button>
</p>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
Order by
</div>
<div class="level-item">
<div class="select">
<select>
<option>Publish date</option>
<option>Price</option>
<option>Page count</option>
</select>
</div>
</div>
</div>
</nav>
</div>
</div>
</section>
</body>
</html>
输出结果如下:
评论前必须登录！
注册