Bulma 是基于 Flexbox 的 CSS 框架，核心是 container、columns 和 column 布局，支持响应式设计。通过类名快速构建按钮、导航栏、卡片等组件，并利用 is-hidden-mobile 等类适配多端，无需 JavaScript，适合搭配任意前端框架使用。
Bulma 是一个基于 Flexbox 的现代 CSS 框架，无需 JavaScript 即可实现响应式布局和美观的 UI 组件。它的语法简洁、语义清晰，适合快速搭建前端页面。要入门 Bulma，重点掌握其基础布局结构和常用组件的使用方式。
基础布局：容器与网格系统
Bulma 的布局依赖于几个核心类名，其中最重要的是 container、columns 和 column。
使用 container 可以限制内容宽度，使页面在大屏幕上更易阅读：
- ...
网格系统通过 columns 和 column 实现灵活的分栏布局：
立即学习“前端免费学习笔记（深入）”；
- 父元素添加 columns
- 子元素添加 column 自动均分空间
- 可通过 is-half、is-one-third 等控制列宽
示例：两栏等宽布局
左侧内容右侧内容
常用组件快速上手
Bulma 提供了丰富的预设组件，只需添加对应类名即可使用。
按钮（Button）：使用 button 类创建基本按钮，配合修饰类调整样式：
- is-success、is-danger 设置颜色状态
- is-small、is-large 调整尺寸
导航栏（Navbar）：响应式导航栏结构清晰：
- 外层用 navbar
- 品牌部分用 navbar-brand
- 菜单部分用 navbar-menu 包裹 navbar-start / navbar-end
- 移动端折叠需手动添加 JS 控制 is-active 类
卡片（Card）：用于展示信息区块
- card 为容器
- 内部可包含 card-header、card-content、card-footer
响应式设计支持
Bulma 内建移动优先的响应式断点，可通过类名控制不同屏幕下的显示效果。
- is-hidden-mobile：仅在移动端隐藏
- is-hidden-tablet：仅在平板端隐藏
- 使用 is-flex-desktop 等控制特定设备行为
- 列宽也可指定设备适配，如 is-3-desktop 表示桌面端占 1/4 宽度
引入 Bulma 非常简单，推荐通过 CDN 快速开始：
基本上就这些。熟悉容器、网格和常用组件后，就能快速搭建出整洁响应的页面。Bulma 不依赖 JavaScript，样式即插即用，适合搭配任意前端框架使用。
