CSS框架——bulma

又是闲得无聊，把博客重新写了一遍，刚开始使用的bootstrap框架，也是做出了现在这个样子，但是感觉不怎么好看，所以又找了找其它框架，然后就找到了这个——Bulma，看了看还不错，就用它把主题重新写了一遍，下面说说我是如何使用这个框架的：

布局

首先应该先把网站的整体结构先布置好，像我这个博客的话，就会需要一个顶部nav、底部的footer、中间的部分根据情况是单栏还是双栏则需要加个sidebar。

我这里先以单栏为例，则得到的HTML结构是这样的：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello Bulma!</title>
</head>
<body>
  <nav class="navbar">
    <!-- nav -->
  </nav>
  <section class="section">
    <!-- content -->
  </section>
  <footer>
    <!-- footer -->
  </footer>
</body>
</html>

navbar

绝大多数的网站都需要一个顶栏，navbar就是bulma的一个组件，一个navbar分为两部分，navbar-brand和navbar-menu，navbar-brand为整个网站的Title或者LOGO。

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <!-- navbar items, navbar burger... -->
  </div>
  <div class="navbar-menu">
    <!-- navbar start, navbar end -->
  </div>
</nav>

navbar-menu在移动端中会隐藏起来，可以通过一个按钮来点击显示，这就需要在navbar-brand中添加一个button

<button class="button navbar-burger" data-target="navMenu">
  <span></span>
  <span></span>
  <span></span>
</button>

因为bulma不包含js代码，所以这段代码需要自己来写了，官网也给了一个例子，其实很简单，如果使用了JQuery的话：

$(document).ready(() => {
  $(".navbar-burger").click(() => {
    $(".navbar-menu").toggle();
  })
})

navbar-menu分为navbar-start和navbar-end其中一个居左一个居右

<div class="navbar-menu">
  <div class="navbar-start">
    <!-- navbar items -->
  </div>
  <div class="navbar-end">
    <!-- navbar items -->
  </div>
</div>

而navbar上面的项目只需要添加一个样式navbar-item类即可。

<div class="navbar-start">
  <a class="navbar-item">
    Home
  </a>
</div>

navbar默认白色，可以更换颜色，具体可以使用的样式有is-primary、is-link、is-info、is-success、is-warning、is-danger、is-black、is-dark、is-light、is-white

效果如图所示：

关于navbar的更多内容可以查看Navbar | Bulma: a modern CSS framework based on Flexbox。

section

bulma使用section来区分不同的模块，即在nav和footer中间的内容应该为一个section或者多个section，而且使用.section样式。

container

在bulma中，无论在navbar、section、footer中，都需要立即放一个class为container的div，来让内容居中显示。

content

这个class类至关重要，因为在bulma中，除了在这个类之外的所有文本都是一样的大小，所以在文章主体中必须添加这个类，当然很简单的方法就是像我这样在section中直接加上这个类就好了。

footer

footer作为页面的页脚，添加一个class为footer的footer标签即可，footer类的样式为

.footer {
    background-color: whitesmoke;
    padding: 3rem 1.5rem 6rem;
}

比较大。

关于更多布局的方法可以参考我博客的样式和bulma官网的样式。

响应式

Bulma 的网格体系基于 Flex 布局。需要使用columns来指定容器，使用column指定项目。

bulma和bootstrap一样，都支持12网格体系，你可以像这样来表示

is-2
is-3
is-4
is-5
is-6
is-7
is-8
is-9
is-10
is-11

或者你可以像我一样使用分数表示：

四分之三：is-three-quarters
四分之一： is-one-quarter
三分之二：is-two-thirds
三分之一：is-one-third
二分之一：is-half
五分之四：is-four-fifths
五分之三：is-three-fifths
五分之二：is-two-fifths
五分之一：is-one-fifth

具体使用实例：

<div class="container">
  <div class="columns">
    <div class="column is-two-thirds">content</div>
    <div class="column is-one-third">sidebar</div>
  </div>
</div>

例如在我的主页中，左侧的文章列表使用了is-two-thirds，右边的sidebar使用了is-one-third，这与使用is-9、is-3的效果是一样的，也等同于bootstrap中的col-md-9和col-md-3。

自定义

因为下载的bulma压缩包里带有sass源文件，而Jekyll默认就支持编译SASS，所以我直接引用的源码包里的sass文件，再把一些没用到的组件注释掉，省了差不多一半的大小。

使用Node构建项目时参考Customize Bulma Bulma: a modern CSS framework based on Flexbox

布局

navbar

section

container

content

footer

响应式

自定义

参考&&推荐浏览