协程的好处有哪些？
阿猫：没有啥复杂的东西，考虑清楚需求，就可以很自然的衍生出这些解决方案。
763
38 条评论
2025-05-15 14:34:59
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可以把菜单项分为靠左区（用
包裹）和靠右区（用
包裹）
navbar 的详细文档参考 这个链接。
2. 内容区域：tiles 和 box
页面的主内容区域分为左右两侧，每一侧都有上下两个板块。这种分割的效果是靠 Tiles 完成的。Tiles本质就是Flex布局。如果想要把页面分为左右两块，可以这么写：
我爱简书，这是一个自由的创作平台
我爱简书，这是一个自由的创作平台
两个水平分布的Tiles
如果代码所示，使用Tiles布局一般建议在最外层套个总的Tiles。代码中的文字都用
包裹着，是为了给文字周围加个具有立体感的框。
Document
如果感觉两个框之间没有间距很丑的话，可以给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的详细文档参考 这个链接。
3. 问题列表：media
问题列表采用的是 media 布局。该布局非常适合描述评论、微博、留言等列表形式的内容。
media的典型用法就是左侧用户头像加右侧 评论内容 / 微博内容 / 留言内容：
这篇文章真是写的太好了！
media布局
作者已经为你定义好了合适的外层padding。media中的段落间距也刚刚好，没有违和感。如果有多个media连续出现，它们之间还会自动出现浅灰色的分隔条：
media之间的分隔条
media 的详细文档参考 这个链接。
4. 图标：Font Awesome
例子中的一些图标，比如页面右上角的铃铛和聊天气泡、热搜列表的火焰图标，使用是Font Awesome字库。这一套图标字库，包含了丰富的图标。使用起来很方便，只需要从CDN引入一个CSS文件：
使用时，只需要写一个带有class属性的标签，其中class描述的就是所需要的图标名称：
这个标签会在页面上展示一面小旗子。如果想要调整图标大小，可以在class属性中附上fa-2x
意思是，这个标签展示的图标，将是正常图标的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:
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
