详解 Bulma 文字、颜色、字体

HTML5 herman 896浏览 0评论

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

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

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

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847,QQ3群:187424846。QQ群进群密码:xttblog,想加微信群的朋友,可以微信搜索:xmtxtt,备注:“xttblog”,添加助理微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » 详解 Bulma 文字、颜色、字体