详解 Bulma 文字、颜色、字体

HTML5 herman 1595浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

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)!可加作者微信号1:xmtxtt(5000人已满),微信号2:codedq(5000人已满),微信号3:xttblog(超2800)。备注:“xttblog”,添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系!

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