详解 Bulma 文字、颜色、字体

Bulma 提供7个修饰指定文字大小。可以分别的使用于移动设备,平板设备,桌面设备等。本文将讲解它们的用法。

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

详解 Bulma 文字、颜色、字体

下面是 Bulma 提供的7种可供选择尺寸:

  • is-size-1: 3rem
  • is-size-2: 2.5rem
  • is-size-3: 2rem
  • is-size-4: 1.5rem
  • is-size-5: 1.25rem
  • is-size-6: 1rem
  • is-size-7: 0.75rem

可以为不同设备指定不同的文字大小。

  • is-size-1-mobile:手机是 size-1
  • is-size-1-tablet:平板是 size-1
  • is-size-1-touch:手机和平板是 size-1
  • is-size-1-desktop:桌面、宽屏和高清是 size-1
  • is-size-1-widescreen:宽屏和高清是 size-1
  • is-size-1-fullhd:高清是 size-1

Bulma 还提供了18中颜色设置:

  • has-text-white
  • has-text-black
  • has-text-light
  • has-text-dark
  • has-text-primary
  • has-text-info
  • has-text-success
  • has-text-warning
  • has-text-danger
  • has-text-black-bis
  • has-text-black-ter
  • has-text-grey-darker
  • has-text-grey-dark
  • has-text-grey
  • has-text-grey-light
  • has-text-grey-lighter
  • has-text-white-ter
  • has-text-white-bis

4种文本对齐方式:

  • has-text-centered
  • has-text-justified
  • has-text-left
  • has-text-right

此外,还有字体颜色、对齐、轻重的修饰类。更多用法,请参考官方资料。

web前端中文站点评:

了解Bulma 文字、颜色、字体的用法,我们就可以进入对Bulma的进一步的学习当中,那就是Bulma的框架原理及教程,其包括两部分:1.BULMA 框架教程;2.BULMA 框架网格体系(原理)

当然,在系统的学习之后,我们就可以进行实践演练了,进行Bulma的定制开发。这是一个系列的学习资料,大家感兴趣可以收藏本网站(www.lisa33xiaoq.net)

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

0
如无特殊说明,文章均为原作者原创,转载请注明出处

该文章由 发布

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

Hi,请填写昵称和邮箱!

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