大家好,我是「前端实验室」
爱分享的了不起~
今天看到一个轻量级的、响应式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
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
或者安装NPM包。
npm install bulma
// or
yarn add bulma
前提:Bulma是现代网页响应式框架。因此你需要下面这样的HTML声明!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>
也就是html5页面,配置好上面的<meta>
标签!
🆗,一切就绪,可以尽情使用啦~
Bulma提供了强大的栅格系统,使页面布局灵活易用。来看看示例。
这就是我一开始提到的FlexBox
。又如这个布局。
还有这个布局。
这里把最后一个示例的代码贴一下,大家有个印象就好!
<div class="columns is-mobile">
<div class="column is-three-quarters-mobile is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
<code>is-three-quarters-mobile</code><br>
<code>is-two-thirds-tablet</code><br>
<code>is-half-desktop</code><br>
<code>is-one-third-widescreen</code><br>
<code>is-one-quarter-fullhd</code>
</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
<div class="column">5</div>
</div>
ps:就是纯粹的html,加上class类名就好!
其他组件,还有很多!基本覆盖了常用UI框架下的全部组件!
表单
表格
进度条
目录
导航
还有诸如面包屑、下拉菜单、卡片、骨架、图片、弹窗...
太多了!我就不一一展示了。可以通过阅读官方文档来深入了解更多内容。
官方地址: https://bulma.io
Bulma
专为响应式而生!它是一个移动优先的框架,同时也能轻松搭建适配不同屏幕的界面。
开发者只需要在 HTML 代码上调用CSS类即可。
ps:Bulma
的作者是开发者和设计师 Jeremy Thomas,他还是《CSS in 44 minutes》一书的作者。殿堂级的极简框架,强烈推荐使用!