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

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

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

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

模仿知乎页面效果图

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

Bulma CSS组件介绍

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

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

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

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


    
        
            我爱，这是一个自由的创作平台
        
        
            我爱，这是一个自由的创作平台

两个水平分布的Tiles

如果代码所示，使用Tiles布局一般建议在最外层套个总的Tiles。代码中的文字都用

包裹着，是为了给文字周围加个具有立体感的框。

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

Tiles之间的间距

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

控制Tiles的宽度比例

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

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

垂直分布的两个Tiles

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

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

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


    
        
            
        
    
    这篇文章真是写的太好了！

media布局

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

media之间的分隔条

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

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

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