• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

Bulma 框架网格体系(原理)

JAVA web前端中文站 2年前 (2017-10-24) 1369次浏览 已收录 0个评论

前面已经学习了BULMA 框架教程,现在我们来看看Bulma的网格体系。

Bulma 的网格体系基于 Flex 布局,写起来非常容易。最简单的用法就是使用 columns 指定容器,使用 column 指定项目。

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

有兴趣的同学可以和 bootstrap 的网格布局对比对比。

Bulma 框架网格体系(原理)

 <div class="columns">   <div class="column">First column</div>   <div class="column">Second column</div>   <div class="column">Third column</div>   <div class="column">Fourth</div> </div> <!-- web 前端中文站:www.lisa33xiaoq.net -->

屏幕宽度大于 768px 时,所有项目平铺,平分容器的宽度;宽度小于等于 768px 时,所有项目变成垂直堆叠。

Bulma 框架网格体系(原理)

以下的修饰类用来指定项目的宽度。

  • 四分之三:is-three-quarters
  • 四分之一: is-one-quarter
  • 三分之二:is-two-thirds
  • 三分之一:is-one-third
  • 二分之一:is-half
  • 五分之四:is-four-fifths
  • 五分之三:is-three-fifths
  • 五分之二:is-two-fifths
  • 五分之一:is-one-fifth

Bulma 框架网格体系(原理)

此外,还有一些修饰类也非常有用。

  • is-narrow:网格的宽度由内容的宽度决定
  • is-centered:网格内容居中对齐
  • is-gapless:网格之间没有间距

Bulma 也支持 12 网格体系。

  • is-2
  • is-3
  • is-4
  • is-5
  • is-6
  • is-7
  • is-8
  • is-9
  • is-10
  • is-11

Bulma 框架网格体系(原理)

如果要指定某个网格偏移,可以用 is-offset-修饰类。

  • is-offset-one-quarter
  • is-offset-one-fifth
  • is-offset-8
  • is-offset-1

更多布局请参考官方文档。

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Bulma 框架网格体系(原理)
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址