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

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

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

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

Bulma CSS使用示例:仿知乎页面_第1张图片
模仿知乎页面效果图

页面大部分使用的是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布局。如果想要把页面分为左右两块,可以这么写:

我爱,这是一个自由的创作平台
我爱,这是一个自由的创作平台
Bulma CSS使用示例:仿知乎页面_第2张图片
两个水平分布的Tiles

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

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

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

...
...
Bulma CSS使用示例:仿知乎页面_第3张图片
Tiles之间的间距

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

...
...
Bulma CSS使用示例:仿知乎页面_第4张图片
控制Tiles的宽度比例

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

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

...
...
Bulma CSS使用示例:仿知乎页面_第5张图片
垂直分布的两个Tiles

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

3. 问题列表:media

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

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

这篇文章真是写的太好了!
Bulma CSS使用示例:仿知乎页面_第6张图片
media布局

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

Bulma CSS使用示例:仿知乎页面_第7张图片
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:




  
  
  
  
  
  
  Document




协程 话题

380关注 | 68 问题 | 69精华内容

查看更多 [话题] 搜索结果

协程的好处有哪些?

阿猫:没有啥复杂的东西,考虑清楚需求,就可以很自然的衍生出这些解决方案。

763 38 条评论

协程的好处有哪些?

阿猫:没有啥复杂的东西,考虑清楚需求,就可以很自然的衍生出这些解决方案。

763 38 条评论

协程的好处有哪些?

阿猫:没有啥复杂的东西,考虑清楚需求,就可以很自然的衍生出这些解决方案。

763 38 条评论

协程的好处有哪些?

阿猫:没有啥复杂的东西,考虑清楚需求,就可以很自然的衍生出这些解决方案。

763 38 条评论

协程的好处有哪些?

阿猫:没有啥复杂的东西,考虑清楚需求,就可以很自然的衍生出这些解决方案。

763 38 条评论

协程的好处有哪些?

阿猫:没有啥复杂的东西,考虑清楚需求,就可以很自然的衍生出这些解决方案。

763 38 条评论

协程的好处有哪些?

阿猫:没有啥复杂的东西,考虑清楚需求,就可以很自然的衍生出这些解决方案。

763 38 条评论

相关结果

线程内上下文切换 专栏

1.6K 关注 | 12 篇文章

你可能感兴趣的:(Bulma CSS使用示例:仿知乎页面)