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

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>

最后编辑于：2018.01.03 22:12:31

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,390评论 5赞 459
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,821评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,632评论 0赞 319
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,170评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,033评论 4赞 355
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,098评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,511评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,204评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,479评论 1赞 290
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,572评论 2赞 309
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,341评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,213评论 3赞 312
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,576评论 3赞 298
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,893评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,171评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,486评论 2赞 341
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,676评论 2赞 335