Bulma CSS使用示例：仿知乎页面

作者: 切糕糕 | 来源:发表于2018-01-03 00:59 被阅读1346次

Bulma CSS （https://bulma.io/）是一个精致的CSS框架。该框架模块化程度很高，并且作者对CSS类的命名，其语义也十分简洁易懂，令使用者能快速上手，很容易就能写出像样的界面来。

Bulma CSS本身不依赖任何JavaScript库。但可以配合任何JS框架（jQuery、Vue、React等），做出想要的动态效果。

本例用Bulma CSS，模仿了知乎的搜索页面。效果图：

模仿知乎页面效果图

页面大部分使用的是Bulma已经定义好的组件，自己只用写少量的CSS代码，十分方便。接下来就介绍下本例中所用到的组件

Bulma CSS组件介绍

1. 顶部菜单：navbar

顶部的菜单使用了navbar组件。navbar 菜单里的每一项都都用 navbar-item 修饰。

本例中的菜单分为上下两层，上层采用Bulma CSS的navbar-menu修饰符，下层采用 navbar-tabs 修饰符。两种修饰符的区别在于：

展示的风格不一样，navbar-menu中的菜单项在鼠标滑过时显示灰色背景；navbar-tabs中的菜单项在鼠标滑过时底部显示蓝色横条。
navbar-menu可以把菜单项分为靠左区（用<div class="navbar-start">包裹）和靠右区（用<div class="navbar-end">包裹）

navbar 的详细文档参考这个链接。

2. 内容区域：tiles 和 box

页面的主内容区域分为左右两侧，每一侧都有上下两个板块。这种分割的效果是靠 Tiles 完成的。Tiles本质就是Flex布局。如果想要把页面分为左右两块，可以这么写：

<div class="tile">
    <div class="tile">
        <div class="tile">
            <div class="box">我爱简书，这是一个自由的创作平台</div>
        </div>
        <div class="tile">
            <div class="box">我爱简书，这是一个自由的创作平台</div>
        </div>
    </div>
</div>

两个水平分布的Tiles

如果代码所示，使用Tiles布局一般建议在最外层套个总的Tiles。代码中的文字都用 <div class="box"> 包裹着，是为了给文字周围加个具有立体感的框。

如果感觉两个框之间没有间距很丑的话，可以给Tiles加上 is-parent 修饰：

<div class="tile">
    <div class="tile is-parent">
        <div class="box">...</div>
    </div>
    <div class="tile is-parent">
        <div class="box">...</div>
    </div>
</div>

Tiles之间的间距

现在两列的宽度还是相等的，可以通过 is-8 通过修饰类控制左侧的Tiles的宽度：

<div class="tile">
    <div class="tile is-8 is-parent">
        <div class="box">...</div>
    </div>
    <div class="tile is-parent">
        <div class="box">...</div>
    </div>
</div>

控制Tiles的宽度比例

is-8的意思是，该Tiles占据整个内容区域的 8/12 的宽度。当然还有is-1、is-2 ... is-12可以选择。

如果想让Tiles垂直分布，那么在外层Tiles上添加is-vertical修饰符：

<div class="tile is-vertical">
    <div class="tile is-parent">
        <div class="box">...</div>
    </div>
    <div class="tile is-parent">
        <div class="box">...</div>
    </div>
</div>

垂直分布的两个Tiles

上面这些例子可以看出，Tiles是可以嵌套的，Tiles里可以包含Tiles。复杂一点的布局可以通过Tiles嵌套实现。Tiles的详细文档参考这个链接。

3. 问题列表：media

问题列表采用的是 media 布局。该布局非常适合描述评论、微博、留言等列表形式的内容。

media的典型用法就是左侧用户头像加右侧评论内容 / 微博内容 / 留言内容：

<div class="media">
    <div class="media-left">
        <p class="image is-64x64">
            <img src="./userLogo.png">
        </p>
    </div>
    <div class="media-content">这篇文章真是写的太好了！</div>
</div>

media布局

作者已经为你定义好了合适的外层padding。media中的段落间距也刚刚好，没有违和感。如果有多个media连续出现，它们之间还会自动出现浅灰色的分隔条：

media之间的分隔条

media 的详细文档参考这个链接。

4. 图标：Font Awesome

例子中的一些图标，比如页面右上角的铃铛和聊天气泡、热搜列表的火焰图标，使用是Font Awesome字库。这一套图标字库，包含了丰富的图标。使用起来很方便，只需要从CDN引入一个CSS文件：

<link href="https://cdn.bootcss.com/bulma/0.6.1/css/bulma.min.css" rel="stylesheet">

使用时，只需要写一个带有class属性的<i>标签，其中class描述的就是所需要的图标名称：

<i class="fa fa-flag">

这个<i>标签会在页面上展示一面小旗子。如果想要调整图标大小，可以在class属性中附上fa-2x

<i class="fa fa-flag fa-2x">

意思是，这个<i>标签展示的图标，将是正常图标的2倍大小。另外还有3、4、5倍大小。

想要知道Font Awesome中都有哪些图标？可以去这个页面：传送门。

完整代码

最后附上完整代码：

app.css:

body {
    background: #f8f8f8;
}
.tag.is-lightblue {
    color: #2d84cc;
    background: #ebf3fb;
}
.ml-10 {
    margin-left: 1rem;
}
.lh-20 {
    line-height: 2rem;
}
.card {
    margin-bottom: 1rem;
}
.section {
    padding-top: 1rem;
}
.fa-15 {
    font-size: 1.5rem;
}
.fa.fa-fire {
    font-size: 1.2rem;
    color: red;
    margin-left: 1rem;
}

index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://cdn.bootcss.com/bulma/0.6.1/css/bulma.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="app.css">
  <title>Document</title>
</head>
<body>
<div class="navbar has-shadow">
  <div class="container">
    <div class="navbar-menu">
      <div class="navbar-start">
        <a class="navbar-item">首页</a>
        <a class="navbar-item">发现</a>
        <a class="navbar-item">话题</a>
        <div class="navbar-item">
          <div class="field is-grouped">
            <div class="control has-icons-right">
              <input type="text" class="input" style="width: 20rem;" placeholder="搜索你感兴趣的内容...">
              <span class="icon is-right">
              <i class="fa fa-search"></i>
            </span>
            </div>
            <div class="control">
              <input type="submit" class="button is-info" value="提问">
            </div>
          </div>
        </div>
      </div>
      <div class="navbar-end">
        <a href="#" class="navbar-item">
          <i class="fa fa-15 fa-bell"></i>
        </a>
        <a href="#" class="navbar-item">
          <i class="fa fa-15 fa-comments"></i>
        </a>
        <a href="#" class="navbar-item">
          <img src="https://bulma.io/images/placeholders/128x128.png" alt="">
        </a>
      </div>
    </div>
  </div>
</div>
<div class="navbar has-shadow" style="position: relative; top: 1px;">
  <div class="container">
    <div class="navbar-tabs">
      <a href="#" class="navbar-item is-tab is-active">综合</a>
      <a href="#" class="navbar-item is-tab">用户</a>
      <a href="#" class="navbar-item is-tab">话题</a>
      <a href="#" class="navbar-item is-tab">专栏</a>
      <a href="#" class="navbar-item is-tab">Live</a>
      <a href="#" class="navbar-item is-tab">私家课</a>
      <a href="#" class="navbar-item is-tab">电子书</a>
    </div>
  </div>
</div>
<div class="section">
  <div class="container">
    <div class="tile">
      <div class="tile is-vertical is-parent is-8">
        <div class="box">
          <div class="media">
            <div class="media-left">
              <figure class="image is-64x64">
                <img src="https://bulma.io/images/placeholders/128x128.png" alt="">
              </figure>
            </div>
            <div class="media-content lh-20">
              <p><strong>协程</strong> <span class="tag is-lightblue">话题</span></p>
              <p>
                380关注 | 68 问题 | 69精华内容
                <button class="button is-info is-pulled-right">关注话题</button>
              </p>
              <p><a href="#">查看更多 [话题] 搜索结果</a></p>
            </div>
          </div>
        </div>
        <div class="box">
          <div class="media">
            <div class="media-content">
              <div class="content">
                <p><strong>协程的好处有哪些？</strong></p>
                <p><strong>阿猫：</strong>没有啥复杂的东西，考虑清楚需求，就可以很自然的衍生出这些解决方案。</p>
                <p>
                  <a class="tag is-medium is-lightblue has-addons">
                    <i class="fa fa-caret-up"></i>
                    <span class="icon is-medium">763</span>
                  </a>
                  <a class="tag is-medium is-lightblue">
                    <i class="fa fa-caret-down"></i>
                  </a>
                  <a href="#" class="ml-10">
                    <i class="fa fa-comment"></i>
                    <span>38 条评论</span>
                  </a>
                </p>
              </div>
            </div>
          </div>
          <div class="media">
            <div class="media-content">
              <div class="content">
                <p><strong>协程的好处有哪些？</strong></p>
                <p><strong>阿猫：</strong>没有啥复杂的东西，考虑清楚需求，就可以很自然的衍生出这些解决方案。</p>
                <p>
                  <a class="tag is-medium is-lightblue has-addons">
                    <i class="fa fa-caret-up"></i>
                    <span class="icon is-medium">763</span>
                  </a>
                  <a class="tag is-medium is-lightblue">
                    <i class="fa fa-caret-down"></i>
                  </a>
                  <a href="#" class="ml-10">
                    <i class="fa fa-comment"></i>
                    <span>38 条评论</span>
                  </a>
                </p>
              </div>
            </div>
          </div>
          <div class="media">
            <div class="media-content">
              <div class="content">
                <p><strong>协程的好处有哪些？</strong></p>
                <p><strong>阿猫：</strong>没有啥复杂的东西，考虑清楚需求，就可以很自然的衍生出这些解决方案。</p>
                <p>
                  <a class="tag is-medium is-lightblue has-addons">
                    <i class="fa fa-caret-up"></i>
                    <span class="icon is-medium">763</span>
                  </a>
                  <a class="tag is-medium is-lightblue">
                    <i class="fa fa-caret-down"></i>
                  </a>
                  <a href="#" class="ml-10">
                    <i class="fa fa-comment"></i>
                    <span>38 条评论</span>
                  </a>
                </p>
              </div>
            </div>
          </div>
          <div class="media">
            <div class="media-content">
              <div class="content">
                <p><strong>协程的好处有哪些？</strong></p>
                <p><strong>阿猫：</strong>没有啥复杂的东西，考虑清楚需求，就可以很自然的衍生出这些解决方案。</p>
                <p>
                  <a class="tag is-medium is-lightblue has-addons">
                    <i class="fa fa-caret-up"></i>
                    <span class="icon is-medium">763</span>
                  </a>
                  <a class="tag is-medium is-lightblue">
                    <i class="fa fa-caret-down"></i>
                  </a>
                  <a href="#" class="ml-10">
                    <i class="fa fa-comment"></i>
                    <span>38 条评论</span>
                  </a>
                </p>
              </div>
            </div>
          </div>
          <div class="media">
            <div class="media-content">
              <div class="content">
                <p><strong>协程的好处有哪些？</strong></p>
                <p><strong>阿猫：</strong>没有啥复杂的东西，考虑清楚需求，就可以很自然的衍生出这些解决方案。</p>
                <p>
                  <a class="tag is-medium is-lightblue has-addons">
                    <i class="fa fa-caret-up"></i>
                    <span class="icon is-medium">763</span>
                  </a>
                  <a class="tag is-medium is-lightblue">
                    <i class="fa fa-caret-down"></i>
                  </a>
                  <a href="#" class="ml-10">
                    <i class="fa fa-comment"></i>
                    <span>38 条评论</span>
                  </a>
                </p>
              </div>
            </div>
          </div>
          <div class="media">
            <div class="media-content">
              <div class="content">
                <p><strong>协程的好处有哪些？</strong></p>
                <p><strong>阿猫：</strong>没有啥复杂的东西，考虑清楚需求，就可以很自然的衍生出这些解决方案。</p>
                <p>
                  <a class="tag is-medium is-lightblue has-addons">
                    <i class="fa fa-caret-up"></i>
                    <span class="icon is-medium">763</span>
                  </a>
                  <a class="tag is-medium is-lightblue">
                    <i class="fa fa-caret-down"></i>
                  </a>
                  <a href="#" class="ml-10">
                    <i class="fa fa-comment"></i>
                    <span>38 条评论</span>
                  </a>
                </p>
              </div>
            </div>
          </div>
          <div class="media">
            <div class="media-content">
              <div class="content">
                <p><strong>协程的好处有哪些？</strong></p>
                <p><strong>阿猫：</strong>没有啥复杂的东西，考虑清楚需求，就可以很自然的衍生出这些解决方案。</p>
                <p>
                  <a class="tag is-medium is-lightblue has-addons">
                    <i class="fa fa-caret-up"></i>
                    <span class="icon is-medium">763</span>
                  </a>
                  <a class="tag is-medium is-lightblue">
                    <i class="fa fa-caret-down"></i>
                  </a>
                  <a href="#" class="ml-10">
                    <i class="fa fa-comment"></i>
                    <span>38 条评论</span>
                  </a>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tile is-vertical is-parent">
        <div class="card">
          <div class="card-header">
            <p class="card-header-title">相关结果</p>
          </div>
          <div class="card-content">
            <div class="media">
              <div class="media-left">
                <figure class="image is-64x64">
                  <img src="https://bulma.io/images/placeholders/128x128.png" alt="">
                </figure>
              </div>
              <div class="media-content">
                <p>
                  <strong>线程内上下文切换</strong>
                  <span class="tag is-gray">专栏</span></p>
                <p>
                  1.6K 关注 | 12 篇文章
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header">
            <p class="card-header-title">知乎热搜</p>
          </div>
          <div class="card-content">
            <ul class="lh-20">
              <li><a href="#">演员的诞生第十期</a><i class="fa fa-fire"></i></li>
              <li><a href="#">北航陈小武</a><i class="fa fa-fire"></i></li>
              <li><a href="#">微信跳一跳</a><i class="fa fa-fire"></i></li>
              <li><a href="#">解忧杂货店</a></li>
              <li><a href="#">前任3</a></li>
              <li><a href="#">妖猫传</a></li>
              <li><a href="#">琅琊榜2</a></li>
              <li><a href="#">刘昊然</a></li>
              <li><a href="#">黄轩</a></li>
              <li><a href="#">比特币</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div><!-- container -->
</div>
</body>
</html>

Bulma CSS使用示例：仿知乎页面

Bulma CSS组件介绍

1. 顶部菜单：navbar

2. 内容区域：tiles 和 box

3. 问题列表：media

4. 图标：Font Awesome

完整代码

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

让前端飞