Bulma 响应式布局

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

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

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

Bulma 响应式布局

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

 <div class="columns is-mobile"><!-- web前端中文站:www.lisa33xiaoq.net -->
 <div class="column">1</div>   
 <div class="column">2</div>   
 <div class="column">3</div>   
 <div class="column">4</div> 
 </div>

如果希望手机和平板是垂直堆叠,其他宽度平铺,可以使用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><!-- web前端中文站:www.lisa33xiaoq.net -->

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

 <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:手机和平板隐藏,其他宽度显示

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

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

0
如无特殊说明,文章均为原作者原创,转载请注明出处
  • 转载请注明来源:Bulma 响应式布局
  • 本文永久链接地址:https://www.lisa33xiaoq.net/843.html

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到