使用Bulma可快速创建响应式导航栏。首先构建navbar结构，包含navbar-brand和navbar-menu，利用内置类实现Flexbox布局；其次添加JavaScript控制汉堡按钮点击事件，通过toggle is-active类展开或收起菜单；然后确保navbar-burger的data-target与navbar-menu的id对应，使响应式生效；最后可选is-primary、is-fixed-top等修饰类定制样式。整个过程简洁高效，自动适配多设备。
使用 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 来控制汉堡菜单的展开与收起：
立即学习“前端免费学习笔记（深入）”；
<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">
4. 自定义样式（可选）
你可以通过 Bulma 的修饰类来调整外观：
- is-primary / is-dark / is-light：设置主题颜色
- is-fixed-top：让导航栏固定在顶部
- 配合 has-shadow 增加阴影效果
基本上就这些。Bulma 的响应式导航栏靠 HTML 结构 + 少量 JS 实现，简洁高效，适配手机、平板和桌面端自动切换布局。
