• 又是闲得无聊,把博客重新写了一遍,刚开始使用的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-brandnavbar-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-startnavbar-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-primaryis-linkis-infois-successis-warningis-dangeris-blackis-darkis-lightis-white

    效果如图所示:

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

    section

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

    container

    在bulma中,无论在navbarsectionfooter中,都需要立即放一个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-9is-3的效果是一样的,也等同于bootstrap中的col-md-9col-md-3

    自定义

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

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

    参考&&推荐浏览