Bulma 框架网格体系(原理)

HTML5 herman 1066浏览 0评论

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

有兴趣的同学可以和 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>
<!-- 业余草:www.xttblog.com -->

屏幕宽度大于 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 12网格布局

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

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

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

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847,QQ3群:187424846。QQ群进群密码:xttblog,想加微信群的朋友,可以微信搜索:xmtxtt,备注:“xttblog”,添加助理微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » Bulma 框架网格体系(原理)