Bulma 响应式布局

Bulma 提供二十多种常用组件，比如表单 、表格、图标、面包屑、菜单、导航、Modal 窗口等等。简单的网站，可以不用写任何 CSS 代码。

Bulma 有五个宽度断点，分别是 mobile（手机）、tablet（平板）、desktop（桌面）、widescreen（宽屏）、fullHD（高清）。

columns布局默认是在手机上垂直堆叠，其他宽度都是平铺。如果希望手机也保持平铺，可以加上is-mobile修饰类。

<div class="columns is-mobile">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>
<!-- ：www.xttblog.com -->

如果希望手机和平板是垂直堆叠，其他宽度平铺，可以使用is-desktop修饰类。

<div class="columns is-desktop">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>

如果希望在不同设备，网格占据不同的宽度，可以像下面这样写。

<div class="
  column
  is-half-mobile
  is-one-third-tablet
  is-one-quarter-desktop
">
</div>

上面代码中，这个网格在手机上占据二分之一宽度，平板三分之一宽度，桌面四分之一宽度，宽屏和高清则是平铺。

Bulma 允许为不同设备指定不同的布局。

<div class="
  column
  is-flex-mobile
  is-inline-tablet
  is-block-desktop
">
</div>

上面代码中，手机是 flex 布局，平板是 inline 布局，其他宽度是 block 布局。

下面是隐藏某个项目的修饰类。

• is-hidden-mobile：只在手机隐藏
• is-hidden-tablet-only：只在平板隐藏
• is-hidden-desktop-only ：只在桌面隐藏
• is-hidden-touch：手机和平板隐藏，其他宽度显示

完整的清单请看官方文档。

： » Bulma 响应式布局