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

Bulma 响应式布局

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

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

更多精彩内容请看 web 前端中文站
http://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:手机和平板隐藏,其他宽度显示

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

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


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

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

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