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

详解 Bulma 文字、颜色、字体

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

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

更多精彩内容请看 web 前端中文站
http://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)

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


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

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

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