我牛逼！一个没有任何JS代码的前端框架！

大家好，我是「前端实验室」爱分享的了不起~

今天看到一个轻量级的、响应式UI框架：Bulma。它是殿堂级大师Jeremy Thomas开发的框架！

它简单到只有一个CSS文件，但提供了一整套功能强大的组件框架。让人直呼NB!

接下来，让我们一起来看看！

简介先来看看官方得介绍。

Bulma: the modernCSS framework thatjust works.

Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.

重点在responsive(响应式的)。

Bulma是一个现代的、轻量级的、易自定义的 CSS UI 框架。它采用Flexbox布局，使构建响应式网页设计变得简单快捷。

开发者可以直接调用 class 名来使用，通过规范的组合，来达到快速构建 web 界面。

ps: class 类名命名简单、直观、便捷！算得上一套标准的命名范本！

安装和使用前提记住：You only need 1 CSS file to use Bulma。

你只需要一个CSS文件就能使用Bulma框架。

你可以通过CDN直接引入bulma.min.css

代码语言：javascript复制

或者安装NPM包。

代码语言：javascript复制npm install bulma

// or

yarn add bulma

前提：Bulma是现代网页响应式框架。因此你需要下面这样的HTML声明！

代码语言：javascript复制

也就是html5页面，配置好上面的标签！

🆗，一切就绪，可以尽情使用啦~

示例Bulma提供了强大的栅格系统，使页面布局灵活易用。来看看示例。

这就是我一开始提到的FlexBox。又如这个布局。

还有这个布局。

这里把最后一个示例的代码贴一下，大家有个印象就好！

代码语言：javascript复制

ps:就是纯粹的html，加上class类名就好！

其他组件，还有很多！基本覆盖了常用UI框架下的全部组件！

表单

表格

进度条

目录

导航

还有诸如面包屑、下拉菜单、卡片、骨架、图片、弹窗...

太多了！我就不一一展示了。可以通过阅读官方文档来深入了解更多内容。

官方地址：

https://bulma.io

补充Bulma专为响应式而生！它是一个移动优先的框架，同时也能轻松搭建适配不同屏幕的界面。

开发者只需要在 HTML 代码上调用CSS类即可。

ps:Bulma 的作者是开发者和设计师 Jeremy Thomas，他还是《CSS in 44 minutes》一书的作者。殿堂级的极简框架，强烈推荐使用！