Bulma页面主区域

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做了响应式处理,所以其余列会自动适配剩余空间大小。接下来在左侧区域添加侧边栏。

赞(1)

评论 抢沙发

评论前必须登录!