四、响应式布局

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

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

  2. <div class="columns is-mobile">
  3.   <div class="column">1</div>
  4.   <div class="column">2</div>
  5.   <div class="column">3</div>
  6.   <div class="column">4</div>
  7. </div>

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

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

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

  2. <div class="
  3.   column
  4.   is-half-mobile
  5.   is-one-third-tablet
  6.   is-one-quarter-desktop
  7. ">
  8. </div>

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

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

  2. <div class="
  3.   column
  4.   is-flex-mobile
  5.   is-inline-tablet
  6.   is-block-desktop
  7. ">
  8. </div>

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

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

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

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