Bulma页面主区域,所有管理页面都会采用两列布局,左边展示所有页面共用的侧边栏菜单,右边是当前页面的内容区域。
在导航栏之后添加Bulma的section标签作为主内容区域的容器。
<section class="section">
<! -- 页面主内容 -->
</section>
这就为页面的主要内容提供了一些空间,防止它到达视口边缘。下面定义两列布局。
在section中添加如下内容:
<div class="columns">
<div class="column is-4-tablet is-3-desktop is-2-widescreen">
<! -- 侧边栏 -->
</div>
<div class="column">
<! -- 右侧部分,特定于每一页 -->
</div>
</div>
和登录页面一样,这里第一列的内容根据窗口大小自动调整宽度,因为Bulma
做了响应式处理,所以其余列会自动适配剩余空间大小。接下来在左侧区域添加侧边栏。
评论前必须登录!
注册