Bulma笔记
发表cs / front-end11 分钟读完 (大约1638个字)0次访问

Bulma笔记

前端不适合我，怎么写怎么烂，这种框架大概是救我狗命的。为了演示，本文已引入 Bulma 的 CSS 文件。

Made with Bulma

简介

开抄： Bulma css 框架是一个免费的、开源的框架，它提供了可随时使用的前端组件，可以轻松地将这些组件组合起来构建响应性强的web界面。Bulma css 框架无需任何CSS知识即可开发网站。（really？）完全基于 Flexbox。Flexbox 是一个相对较新的CSS规范，不过使用 Bulma 无须了解 Flexbox （really？）Bulma 框架所有样式都基于 class，只需为HTML元素指定 class，样式立刻生效。

反正样式确实是不想写，Bootstrap 也确实不想看，开冲。

与其他CSS框架相比，Bulma 有如下不同之处。

  • 现代化：整个 Bulma 是基于CSS Flexbox设计的。
  • 响应式：Bulma 的设计同时支持移动端和桌面设备。
  • 易学：大多数用户只需几分钟便能入门。
  • 语法简单：Bulma 使用更少的HTML，所以代码易于阅读和编写。
  • 可定制：Bulma 提供了300多个SASS变量，基于这些样式变量，你可以定制自己的主题框架。
  • 无JavaScript：Bulma 完全基于CSS设计编写，因此可以很优雅地与任何JavaScript框架（Angular、Vue.js、React、Ember或者纯 JavaScript 应用）集成。

安装与定制

下载源码版本，根目录文件为配置文件sass目录下为定制源码，css目录下为官方生成文件。

或者安装 npm 包、克隆等，看着办。

1
2
3
4
npm install bulma
yarn add bulma
git clone git@github.com:jgthms/bulma.git
gh repo clone jgthms/bulma

引用

本地引用：下载后把bulma.min.css文件放在网站目录，css目录下，在网页中引用即可

  • css导入

    1
    2
    3
    @import "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css";

    @import "bulma.min.css"

  • HTML链接

    1
    2
    3
    4
    5
    cdn的
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">

    本地的
    <link rel="stylesheet" href="css/bulma.min.css"/>

要求

要正常运行，就得用HTML5文档类型，添加响应式视窗元标记（responsive viewport meta tag）。不过都已经塞到模板里了，阅读下一小节。修修补补开始。

1
2
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">

入门模板

直接复制然后修修补补，很好，很friendly。

这个是网络引用，本地的话改一改 <link>

template.html >folded
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
  </head>
  <body>
  <section class="section">
    <div class="container">
      <h1 class="title">
        Hello World
      </h1>
      <p class="subtitle">
        My first website with <strong>Bulma</strong>!
      </p>
    </div>
  </section>
  </body>
</html>

基本用法

插入css样式表以后，直接用就可以了。

修饰符

为HTML元素加上 class 渲染成基类，再添加以 is- 或 has- 开头的修饰类，即可改变基类样式。button 类实例代码如下。其中，修饰符可以相互组合，尺寸、颜色与状态等，以实现样式呈现需求。

1
2
3
<a class="button is-small is-primary">Small</a>
<a class="button is-loading">Default</a>
<a class="button is-large">Large</a>

模块化

Bulma 包含39 个 .sass 文件,可以单独导入这些文件。例如只需要 Bulma columns，文件位于 bulma/sass/grid 文件夹中。 只需要 button 类，文件位于bulma/sass/elements

只需导入实用程序依赖项，然后直接导入需要的文件，即可使用该类及其所有修饰符。

1
2
@import "bulma/sass/utilities/_all.sass"
@import "bulma/sass/grid/columns.sass"

响应式布局

Bulma 有4 个断点，定义了5 种屏幕尺寸：

  • mobile： 取决于768px
  • tablet： 从769px
  • desktop： 从1024px
  • widescreen： 从1216px
  • fullhd： 从1408px

在设计CSS时，注意不同响应布局的调整，如基于断点的间隙设计，可以使用 is-1-mobile 、is-0-tablet、 is-3-desktop、 is-8-widescreen 、is-2-fullhd 等间隙布局。

最后，Bulma 提供了易于使用的响应式混合宏，

栅格系统

使用 columns 指定容器，使用 column 指定项目。使用修饰类用来指定项目的宽度。有 is-three-quarters 分数式，有 is-2 12网格体系，有 is-offset- 网格偏移修饰类。不加修饰时，各项目平分容器宽度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<link rel="stylesheet" href="../personal/css/bulma.min.css"/>
<div class="columns">
  <div class="column">
    <a class="button is-small is-success">Small</a>
  </div>
  <div class="column">
    <a class="button is-normal is-link">Default</a>
  </div>
  <div class="column">
    <a class="button is-medium is-warning">Medium</a>
  </div>
  <div class="column">
    <a class="button is-large is-danger is-loading">Large</a>
  </div>
</div>
Small
Default
Medium
Large
栅格系统.html >folded
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<div class="columns is-variable">
        <div class="column button is-primary is-1">
        	is-1
        </div>
        <div class="column button is-warning">
        	其余内容
        </div>
  </div>


  <div class="columns">
        <div class="column button is-primary is-2">
        	is-2
        </div>
        <div class="column button is-warning">
        	其余内容
        </div>
  </div>

  <div class="columns">
        <div class="column button is-primary is-one-quarter">
        	is-one-quarter
        </div>
        <div class="column button is-warning">
        	其余内容
        </div>
  </div>

  <div class="columns">
        <div class="column button is-primary is-4 is-offset-4">
            <p>
                is-4 is-offset-4
            </p>
        </div>
        <div class="column button is-warning is-4">
            <p>
                其余内容
            </p>
        </div>
  </div>

is-1
其余内容
is-2
其余内容
is-one-quarter
其余内容

is-4 is-offset-4

其余内容

CSS库

包括列、元素、组件、表单、布局、辅助等项目。需要的时候翻阅文档。

如组件库，有面包屑、卡片、下拉菜单、导航栏等选项，每一类有各自对应的属性，边用边查。

定制

这个比较high level了，毕竟代码我是一点不懂的，我只能尽量抄得比较通俗易懂。

Bulma是一个易于自定义的CSS框架，可以通过以下几种方式实现：

  • 重写Bulma的初始变量和继承变量；
  • 重写Bulma的组件变量；
  • 添加自己的变量；
  • 重写Bulma的样式；
  • 添加自己的样式。

下面简要描述一种方法：

下载源码以及依赖：

1
2
3
git clone https://github.com/jgthms/bulma.git
cd bulma
npm install

新建 mystyle.sass 文件，写定制代码，该文件需要引入 Bulma 基础变量，然后修改预设变量，下例修改了blue

1
2
3
@import "./sass/utilities/initial-variables"

$blue: #72d0eb

加载入口脚本，之后再写自己需要的样式

1
2
3
4
5
@import "./bulma"
    
.title {
  text-decoration: underline;
}

最后，打开package.json，找到下面这行。把里面的bulma.sass改成mystyle.sass。

1
2
3
"build-sass": "node-sass --output-style expanded --source-map true bulma.sass css/bulma.css",
    
"build-sass": "node-sass --output-style expanded --source-map true mystyle.sass css/bulma.css",

以后每次修改完样式，运行一下npm run build，就会生成自己的样式表css/bulma.css了。

参考

有什么还是看官方文档最快。另外，百闻不如一写，记了点笔记入了门就行（写这种笔记确实有够烦），所以本博客的额外页面，就直接用 Bulma 做。

Bulma官方文档

Bulma必知必会

阮一峰CSS框架Bulma教程

Made with Bulma

Bulma笔记

https://scutlmg.github.io/2023/01/02/Bulma笔记/

作者

ivy

发布于

2023-01-03

更新于

2023-03-25

许可协议

CC BY-NC-SA 4.0

#

喜欢这篇文章？打赏一下作者吧

评论

最新文章

分类

标签

IME1
Linux5
android1
automation1
blog14
book2
cs15
docker3
docker-app1
front-end7
game2
git3
github3
magic1
nonebot2
note2
python2
software1
switch1
tasker1
test1
web-spider1
zelda1

归档

目录

×