Bluma - 一个简洁易用的 css 框架

更新日期: 2019-07-29 阅读次数: 914 字数: 208 分类: CSS

前段时间偶然发现了 bluma 这个前端样式框架,看起来比 bootstrap 要清晰简洁的多。

https://bulma.io/

正好我有个个人股票小工具的开发需求,所以决定尝试并了解一下 bluma.

demo 效果,股价计算器

Bluma - 一个简洁易用的 css 框架

container

container 用来限制宽度,居中。例如:

  • desktop 为 960
  • widescreen 1152
  • fullhd 1344

如果要全屏要加上 class is-fluid。

https://bulma.io/documentation/layout/container/

hero

英文翻译为主角,即,页面顶部的全屏 banner。

如果内容要居中显示,需要内嵌 container.

  • 七种内置颜色
  • 3 种内置高度:medium,large,fullheight。结合导航栏使用,需要特殊处理。

相对 bootstrap,bluma 的 hero 更简洁舒服,而且代码可读性更好。

File upload

漂亮的 File upload 选择按钮。

爱评论不评论

近期节日

2019年08月23日 处暑
2019年09月03日 抗日胜利纪念日
2019年09月08日 白露
2019年09月08日 国际扫盲日
2019年09月10日 教师节
2019年09月13日 中秋节
2019年09月16日 国际臭氧层保护日
2019年09月16日 世界清洁地球日
2019年09月18日 "九一八"事变纪念日
2019年09月20日 国际爱牙日
2019年09月21日 国际和平日
2019年09月22日 世界无车日
查看更多节日