用BulmaCSS模仿知乎搜索页面

最新推荐文章于 2023-01-07 22:56:35 发布

VIP文章切糕糕

最新推荐文章于 2023-01-07 22:56:35 发布

阅读量3.1k

点赞数

分类专栏： html5+css3 css3 html-css-源码练习文章标签： css css框架

本文链接：https://blog.csdn.net/supergao222/article/details/78957250

版权

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-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属性的标签，其中class描述的就是所需要的图标名称：

<i class="fa fa-flag">

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

<i class="fa fa-flag 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