用BulmaCSS模仿知乎搜索页面

其他 2020-01-19 10:52:43 阅读次数: 0

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属性的标签，其中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 {
    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>
切糕糕
发布了43 篇原创文章 · 获赞 50 · 访问量 68万+
私信 关注

猜你喜欢

转载自blog.csdn.net/supergao222/article/details/78957250
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022