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

更新日期: 2019-07-29 阅读次数: 4531 字数: 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 选择按钮。

领取阿里云/腾讯云服务器优惠券

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

相关文章

爱评论不评论

近期节日

2020年08月15日 日本投降日
2020年08月22日 处暑
2020年08月25日 七夕
2020年09月02日 中元节
2020年09月03日 抗日胜利纪念日
2020年09月07日 白露
2020年09月08日 国际扫盲日
2020年09月10日 教师节
2020年09月16日 国际臭氧层保护日
2020年09月16日 世界清洁地球日
2020年09月18日 "九一八"事变纪念日
2020年09月20日 国际爱牙日
查看更多节日