如何用css框架Bulma制作导航栏响应式-css教程-PHP中文网

如何用css框架Bulma制作导航栏响应式

P粉602998670

发布： 2025-10-19 19:40:02

原创

901人浏览过

使用Bulma可快速创建响应式导航栏。首先构建navbar结构，包含navbar-brand和navbar-menu，利用内置类实现Flexbox布局；其次添加JavaScript控制汉堡按钮点击事件，通过toggle is-active类展开或收起菜单；然后确保navbar-burger的data-target与navbar-menu的id对应，使响应式生效；最后可选is-primary、is-fixed-top等修饰类定制样式。整个过程简洁高效，自动适配多设备。

如何用css框架bulma制作导航栏响应式

使用 Bulma 制作响应式导航栏非常简单，因为 Bulma 内置了对移动端友好的组件和类。你只需要正确使用 navbar 组件，并结合 Bulma 提供的 JavaScript 触发逻辑，就能实现自动折叠的响应式导航栏。

1. 基础结构：使用 navbar 组件

Bulma 的导航栏基于 Flexbox 构建，天然支持响应式布局。基本结构如下：

<nav class="navbar is-primary" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="/">
      <strong>MySite</strong>
    </a>
<pre class='brush:php;toolbar:false;'><!-- 汉堡按钮（仅在小屏幕显示） -->
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
</a>

登录后复制

</div>

<div class="navbar-menu"> <div class="navbar-start"> <a class="navbar-item" href="/">首页</a> <a class="navbar-item" href="/about">关于</a> <a class="navbar-item" href="/contact">联系</a> </div>

<div class="navbar-end">
  <a class="navbar-item" href="/login">登录</a>
</div>

登录后复制

</div> </nav>

2. 添加 JavaScript 控制汉堡菜单

Bulma 不包含 JavaScript，所以你需要自己添加一小段 JS 来控制汉堡菜单的展开与收起：

立即学习“前端免费学习笔记（深入）”；

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

<script>
document.addEventListener('DOMContentLoaded', () => {
  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
  if ($navbarBurgers.length > 0) {
    $navbarBurgers.forEach(el => {
      el.addEventListener('click', () => {
        const target = el.dataset.target;
        const $target = document.getElementById(target);
<pre class='brush:php;toolbar:false;'>    el.classList.toggle('is-active');
    $target.classList.toggle('is-active');
  });
});

登录后复制

} }); </script>

这段代码会监听点击事件，切换 is-active 类，从而控制菜单显示。

3. 确保响应式行为生效

Bulma 默认会在小屏幕上隐藏 .navbar-menu，只显示 .navbar-brand 和汉堡图标。关键点：

确保 .navbar-burger 上有 data-target 属性，值为菜单容器的 ID
给 .navbar-menu 添加一个 ID，并与 data-target 对应
例如：<a class="navbar-burger" data-target="navMenu"> 和 <div class="navbar-menu" id="navMenu">