文档

当你使用 Bulma 创建一个网站 所需要的一切

Navbar

一个响应式的导航栏，可以支持图片、链接、和下拉菜单

New!

Since 0.4.3

Colors Yes

Sizes No

Variables Yes

新的 navbar 会替换弃用的 nav 组件，旧的文档仍可以在这暂时访问。

navbar 组件是一个具有响应式及多功能的水平导航栏

navbar 主要容器
- navbar-brand 位于左侧, 始终可见, 其中通常包含 logo
  - navbar-burger 汉堡图标，用于触摸设备上切换导航栏菜单
- navbar-menu 位于右侧, 触摸设备上隐藏，桌面端显示
  - navbar-start 菜单的 左侧部分，在桌面的 navbar brand 旁边
  - navbar-end 菜单的 右侧部分，它出现在导航栏的末尾
    - navbar-item 组成导航栏的 每一项，可以是 a 或 div
      - navbar-link 一个链接作为下拉菜单的兄弟元素，带有一个箭头
      - navbar-dropdown 下拉菜单，其中可以包含导航栏项目和分隔符
        
        navbar-divider 用于分割导航栏项目的 水平线

navbar-brand 在导航栏左侧，它可以包含：

一些 navbar-item
navbar-burger 作为最后的子元素

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <!-- navbar items, navbar burger... -->
  </div>
</nav>

以下情况 navbar brand 始终可见: 在两种触摸设备 < 1024px 和桌面 >= 1024px 上，因此，建议仅使用少数导航条，以避免在小型设备上避免。

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://img.higrid.net">
      <img src="https://img.higrid.net/images/bulma-logo.png" alt="Bulma中文文档: a modern CSS framework based on Flexbox" width="112" height="28">
    </a>

    <div class="navbar-burger">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</nav>

在 desktop 宽度 >= 1024px , 导航栏只会占用它需要的空间。

navbar-burger 是一个汉堡菜单，它仅出现在 mobile 上，它必须作为 navbar-brand 的最后一个子元素出现。

<div class="navbar-burger">
  <span></span>
  <span></span>
  <span></span>
</div>

您可以添加 is-active 修饰符让其变为叉叉。

navbar-menu 是 navbar brand 的副本，因此它必须是 navbar 的直接子元素，并且是 navbar-brand 的兄弟元素。

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <!-- navbar items, navbar burger... -->
  </div>
  <div class="navbar-menu">
    <!-- navbar start, navbar end -->
  </div>
</nav>

navbar-menu 将在移动设备上隐藏 < 1024px . 您必须添加 is-active 修饰符来显示它。

<div class="navbar-menu">
  <!-- hidden on mobile -->
</div>

<div class="navbar-menu is-active">
  <!-- shown on mobile -->
</div>

在桌面 desktop >= 1024px 下, navbar-menu 将 填充导航栏的剩余空间，让 navbar brand 只保留必须的空间，这是必须的。然而，这需要两个直接子元素：

navbar-start
navbar-end

Javascript 切换

Bulma 不包含任何 JavaScript.
这里有个简单的实例，同时在 navbar-burger 和 navbar-menu 上切换 is-active 类。

<div class="navbar-burger" data-target="navMenu">
  <span></span>
  <span></span>
  <span></span>
</div>

<div class="navbar-menu" id="navMenu">
  <!-- navbar-start, navbar-end... -->
</div>

document.addEventListener('DOMContentLoaded', function () {

  // Get all "navbar-burger" elements
  var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

  // Check if there are any navbar burgers
  if ($navbarBurgers.length > 0) {

    // Add a click event on each of them
    $navbarBurgers.forEach(function ($el) {
      $el.addEventListener('click', function () {

        // Get the target from the "data-target" attribute
        var target = $el.dataset.target;
        var $target = document.getElementById(target);

        // Toggle the class on both the "navbar-burger" and the "navbar-menu"
        $el.classList.toggle('is-active');
        $target.classList.toggle('is-active');

      });
    });
  }

});

navbar-start 和 navbar-end 是 navbar-menu 的唯一直接子元素.

在桌面 desktop >= 1024px 时：

navbar-start 将出现在左边
navbar-end 将出现在右边

他们都可以包含任意数量的 navbar-item.

<div class="navbar-menu">
  <div class="navbar-start">
    <!-- navbar items -->
  </div>

  <div class="navbar-end">
    <!-- navbar items -->
  </div>
</div>

navbar-item 是一个可重复的元素，可以是：

一个导航链接
```
<a class="navbar-item">
  Home
</a>
```

一个 brand logo 的容器

<a class="navbar-item">
  <img src="https://img.higrid.net/images/bulma-logo.png" width="112" height="28" alt="Bulma">
</a>

一个下拉菜单的父级

<div class="navbar-item has-dropdown">
  <a class="navbar-link">
    Docs
  </a>

  <div class="navbar-dropdown">
    <!-- Other navbar items -->
  </div>
</div>

导航下拉菜单 的一个子元素

<div class="navbar-dropdown">
  <a class="navbar-item">
    Overview
  </a>
</div>

一个几乎任意元素的容器, 类似于 field

            <div class="navbar-item">
  <div class="field is-grouped">
    <p class="control">
      <a class="button">
        <span class="icon">
          <i class="fab fa-twitter" aria-hidden="true"></i>
        </span>
        <span>Tweet</span>
      </a>
    </p>
    <p class="control">
      <a class="button is-primary">
        <span class="icon">
          <i class="fas fa-download" aria-hidden="true"></i>
        </span>
        <span>Download</span>
      </a>
    </p>
  </div>
</div>
          

它可以是 <a> 或者 <div>, 以及以下任一一项的 直接子元素：

navbar
navbar-brand
navbar-start
navbar-end
navbar-dropdown

可以通过添加 is-expanded 修饰符来转换为全宽的元素。

将导航栏无缝集成到任何内容中，您可以在 navbar 组件上添加 is-transparent 修饰符，它将会移除 navbar item 的任何悬停或背景。

      <nav class="navbar is-transparent">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://img.higrid.net">
      <img src="https://img.higrid.net/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
    </a>
    <div class="navbar-burger burger" data-target="navbarExampleTransparentExample">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>

  <div id="navbarExampleTransparentExample" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item" href="https://img.higrid.net/">
        Home
      </a>
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link" href="https://img.higrid.net/documentation/overview/start/">
          Docs
        </a>
        <div class="navbar-dropdown is-boxed">
          <a class="navbar-item" href="https://img.higrid.net/documentation/overview/start/">
            Overview
          </a>
          <a class="navbar-item" href="https://img.higrid.net/documentation/modifiers/syntax/">
            Modifiers
          </a>
          <a class="navbar-item" href="https://img.higrid.net/documentation/columns/basics/">
            Columns
          </a>
          <a class="navbar-item" href="https://img.higrid.net/documentation/layout/container/">
            Layout
          </a>
          <a class="navbar-item" href="https://img.higrid.net/documentation/form/general/">
            Form
          </a>
          <hr class="navbar-divider">
          <a class="navbar-item" href="https://img.higrid.net/documentation/elements/box/">
            Elements
          </a>
          <a class="navbar-item is-active" href="https://img.higrid.net/documentation/components/breadcrumb/">
            Components
          </a>
        </div>
      </div>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="field is-grouped">
          <p class="control">
            <a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://localhost:4000" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=http://localhost:4000&amp;via=jgthms">
              <span class="icon">
                <i class="fab fa-twitter"></i>
              </span>
              <span>
                Tweet
              </span>
            </a>
          </p>
          <p class="control">
            <a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.1.zip">
              <span class="icon">
                <i class="fas fa-download"></i>
              </span>
              <span>Download</span>
            </a>
          </p>
        </div>
      </div>
    </div>
  </div>
</nav>
    

New! 0.6.1

您可以将导航栏固定到页面的顶部或底部，这需要两个步骤：

在 navbar 组件上添加 is-fixed-top 或 is-fixed-bottom
```
<nav class="navbar is-fixed-top">
```
将相应的 has-navbar-fixed-top 或 has-navbar-fixed-bottom 修饰符添加到 <html> 或 <body> 元素上为页面提供相应的 padding。
```
<html class="has-navbar-fixed-top">
```

Try it out!

Show bottom navbar

创建一个 下拉菜单，你需要 4 个元素：

navbar-item 上使用 has-dropdown 修饰符
navbar-link 包含下拉箭头的容器
navbar-dropdown 包含 navbar-item 和 navbar-divider 的实例

<nav class="navbar" role="navigation" aria-label="dropdown navigation">
  <div class="navbar-item has-dropdown">
    <a class="navbar-link">
      Docs
    </a>

    <div class="navbar-dropdown">
      <a class="navbar-item">
        Overview
      </a>
      <a class="navbar-item">
        Elements
      </a>
      <a class="navbar-item">
        Components
      </a>
      <hr class="navbar-divider">
      <div class="navbar-item">
        Version 0.9.4
      </div>
    </div>
  </div>
</nav>

通过 CSS 或 JavaScript 来显示/隐藏下拉

navbar-dropdown 在触摸设备 < 1024px 上可见，但是在桌面 desktop >= 1024px 上隐藏。如何在桌面上显示下拉菜单取决于父级的类

在 navbar-item 上使用 has-dropdown 修饰符，有 2 种修饰符可选

is-hoverable: 当在 navbar-item 父级悬停时，显示下拉菜单。
is-active: 在 任何时候 显示下拉菜单

虽然通过 CSS :hover 可以完美工作, 但是对于想通过 JavaScript 控制下拉列表显示的用于可以通过添加 is-active 类。

<div class="navbar-item has-dropdown is-hoverable">
  <!-- navbar-link, navbar-dropdown etc. -->
</div>

<nav class="navbar" role="navigation" aria-label="dropdown navigation">
  <div class="navbar-item has-dropdown is-hoverable">
    <a class="navbar-link">
      Docs
    </a>

    <div class="navbar-dropdown">
      <a class="navbar-item">
        Overview
      </a>
      <a class="navbar-item">
        Elements
      </a>
      <a class="navbar-item">
        Components
      </a>
      <hr class="navbar-divider">
      <div class="navbar-item">
        Version 0.9.4
      </div>
    </div>
  </div>
</nav>

<div class="navbar-item has-dropdown is-active">
  <!-- navbar-link, navbar-dropdown etc. -->
</div>

<nav class="navbar" role="navigation" aria-label="dropdown navigation">
  <div class="navbar-item has-dropdown is-active">
    <a class="navbar-link">
      Docs
    </a>

    <div class="navbar-dropdown">
      <a class="navbar-item">
        Overview
      </a>
      <a class="navbar-item">
        Elements
      </a>
      <a class="navbar-item">
        Components
      </a>
      <hr class="navbar-divider">
      <div class="navbar-item">
        Version 0.9.4
      </div>
    </div>
  </div>
</nav>

右侧下拉

如果 navbar-item 父级位于右侧，则可以使用 is-right 修饰符来将下拉菜单置于右侧。

<div class="navbar-dropdown is-right">
  <!-- navbar-item, navbar-divider etc. -->
</div>

Documentation

当你使用 Bulma 创建一个网站 所需要的一切

<nav class="navbar" role="navigation" aria-label="dropdown navigation">
  <div class="navbar-menu">
    <div class="navbar-start">
      <div class="navbar-item has-dropdown is-active">
        <a class="navbar-link">
          Left
        </a>

        <div class="navbar-dropdown">
          <a class="navbar-item">
            Overview
          </a>
          <a class="navbar-item">
            Elements
          </a>
          <a class="navbar-item">
            Components
          </a>
          <hr class="navbar-divider">
          <div class="navbar-item">
            Version 0.9.4
          </div>
        </div>
      </div>
    </div>

    <div class="navbar-end">
      <div class="navbar-item has-dropdown is-active">
        <a class="navbar-link">
          Right
        </a>

        <div class="navbar-dropdown is-right">
          <a class="navbar-item">
            Overview
          </a>
          <a class="navbar-item">
            Elements
          </a>
          <a class="navbar-item">
            Components
          </a>
          <hr class="navbar-divider">
          <div class="navbar-item">
            Version 0.9.4
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

<section class="hero is-primary">
  <div class="hero-body">
    <p class="title">
      Documentation
    </p>
    <p class="subtitle">
      当你使用 Bulma <strong>创建一个网站</strong> 所需要的一切
    </p>
  </div>
</section>

上拉

New! 0.6.1

如果您在底部使用导航栏，类似于 fixed bottom navbar，您可能想要使用一个 下拉菜单，只需将 has-dropdown and has-dropdown-up 修饰符添加到 navbar-item 父级。

<div class="navbar-item has-dropdown has-dropdown-up is-hoverable">
  <a class="navbar-link" href="https://img.higrid.net/documentation/overview/start/">
    Docs
  </a>
  <div class="navbar-dropdown">
    <a class="navbar-item" href="https://img.higrid.net/documentation/overview/start/">
      Overview
    </a>
  </div>
</div>

Documentation

当你使用 Bulma 创建一个网站 所需要的一切

<section class="hero is-primary">
  <div class="hero-body">
    <p class="title">
      Documentation
    </p>
    <p class="subtitle">
      当你使用 Bulma <strong>创建一个网站</strong> 所需要的一切
    </p>
  </div>
</section>

<nav class="navbar" role="navigation" aria-label="dropdown navigation">
  <div class="navbar-menu">
    <div class="navbar-start">
      <div class="navbar-item has-dropdown has-dropdown-up is-active">
        <a class="navbar-link">
          Dropup
        </a>

        <div class="navbar-dropdown">
          <a class="navbar-item">
            Overview
          </a>
          <a class="navbar-item">
            Elements
          </a>
          <a class="navbar-item">
            Components
          </a>
          <hr class="navbar-divider">
          <div class="navbar-item">
            Version 0.9.4
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

下拉菜单的样式

默认的， navbar-dropdown将会有

一个灰色的 border-top
两个底部会有 border-radius

Documentation

当你使用 Bulma 创建一个网站 所需要的一切

<nav class="navbar" role="navigation" aria-label="dropdown navigation">
  <a class="navbar-item">
    <img src="https://img.higrid.net/images/bulma-logo.png" alt="Bulma中文文档: a modern CSS framework based on Flexbox" width="112" height="28">
  </a>

  <div class="navbar-item has-dropdown is-active">
    <a class="navbar-link">
      Docs
    </a>

    <div class="navbar-dropdown">
      <a class="navbar-item">
        Overview
      </a>
      <a class="navbar-item">
        Elements
      </a>
      <a class="navbar-item">
        Components
      </a>
      <hr class="navbar-divider">
      <div class="navbar-item">
        Version 0.9.4
      </div>
    </div>
  </div>
</nav>

<section class="hero is-primary">
  <div class="hero-body">
    <p class="title">
      Documentation
    </p>
    <p class="subtitle">
      当你使用 Bulma <strong>创建一个网站</strong> 所需要的一切
    </p>
  </div>
</section>

当使用透明导航栏时，下拉菜单最好通过添加 is-boxed 修饰符使用盒子结构，这将会：

移除灰色边框
增加一个轻微的 内部阴影
所有边框将会是圆角
悬停/激活的状态会有动画

Documentation

当你使用 Bulma 创建一个网站 所需要的一切

<nav class="navbar is-transparent" role="navigation" aria-label="dropdown navigation">
  <a class="navbar-item">
    <img src="https://img.higrid.net/images/bulma-logo.png" alt="Bulma中文文档: a modern CSS framework based on Flexbox" width="112" height="28">
  </a>

  <div class="navbar-item has-dropdown is-active">
    <a class="navbar-link">
      Docs
    </a>

    <div class="navbar-dropdown is-boxed">
      <a class="navbar-item">
        Overview
      </a>
      <a class="navbar-item">
        Elements
      </a>
      <a class="navbar-item">
        Components
      </a>
      <hr class="navbar-divider">
      <div class="navbar-item">
        Version 0.9.4
      </div>
    </div>
  </div>
</nav>

<section class="hero">
  <div class="hero-body">
    <p class="title">
      Documentation
    </p>
    <p class="subtitle">
      当你使用 Bulma <strong>创建一个网站</strong> 所需要的一切
    </p>
  </div>
</section>

激活的导航栏下拉菜单项

Documentation

当你使用 Bulma 创建一个网站 所需要的一切

<nav class="navbar" role="navigation" aria-label="dropdown navigation">
  <a class="navbar-item">
    <img src="https://img.higrid.net/images/bulma-logo.png" alt="Bulma中文文档: a modern CSS framework based on Flexbox" width="112" height="28">
  </a>

  <div class="navbar-item has-dropdown is-active">
    <a class="navbar-link">
      Docs
    </a>

    <div class="navbar-dropdown">
      <a class="navbar-item">
        Overview
      </a>
      <a class="navbar-item is-active">
        Elements
      </a>
      <a class="navbar-item">
        Components
      </a>
      <hr class="navbar-divider">
      <div class="navbar-item">
        Version 0.9.4
      </div>
    </div>
  </div>
</nav>

<section class="hero is-primary">
  <div class="hero-body">
    <p class="title">
      Documentation
    </p>
    <p class="subtitle">
      当你使用 Bulma <strong>创建一个网站</strong> 所需要的一切
    </p>
  </div>
</section>

下拉分割线

您可以通过添加 navbar-divider 在 navbar-dropdown 中显示一个 水平线。 You can add a to display a horizontal rule in a .

<hr class="navbar-divider">

Colors | 颜色 #

New! 0.5.2

您可以使用为 navbar 添加 9种颜色修饰符 来修改导航栏的背景颜色：

is-primary
is-link
is-info
is-success
is-warning
is-danger
is-black
is-dark
is-light
is-white

<nav class="navbar is-primary">
  <!-- navbar brand, navbar menu... -->
</nav>

Variables | 变量 #

你可以使用这些变量来 自定义 这些 component。只需要在导入 Bulma 之前设置这些变量学习如何开始.

Name	Default value
Name	Default value
`$navbar-background-color`	`$white`
`$navbar-height`	`3.25rem`
`$navbar-item-color`	`$grey-dark`
`$navbar-item-hover-color`	`$link`
`$navbar-item-hover-background-color`	`$background`
`$navbar-item-active-color`	`$black`
`$navbar-item-active-background-color`	`transparent`
`$navbar-item-img-max-height`	`1.75rem`
`$navbar-tab-hover-background-color`	`transparent`
`$navbar-tab-hover-border-bottom-color`	`$link`
`$navbar-tab-active-color`	`$link`
`$navbar-tab-active-background-color`	`transparent`
`$navbar-tab-active-border-bottom-color`	`$link`
`$navbar-tab-active-border-bottom-style`	`solid`
`$navbar-tab-active-border-bottom-width`	`3px`
`$navbar-dropdown-background-color`	`$white`
`$navbar-dropdown-border-top`	`1px solid $border`
`$navbar-dropdown-offset`	`-4px`
`$navbar-dropdown-arrow`	`$link`
`$navbar-dropdown-radius`	`$radius-large`
`$navbar-dropdown-z`	`20`
`$navbar-dropdown-boxed-radius`	`$radius-large`
`$navbar-dropdown-boxed-shadow`	`0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)`
`$navbar-dropdown-item-hover-color`	`$black`
`$navbar-dropdown-item-hover-background-color`	`$background`
`$navbar-dropdown-item-active-color`	`$link`
`$navbar-dropdown-item-active-background-color`	`$background`
`$navbar-divider-background-color`	`$border`

这是一个 开源项目. 错别字? Or 有疑问? 在GitHub上改进这个页面。

Bulma Partners

Check out their products!

Navbar

一个响应式的导航栏，可以支持图片、链接、和下拉菜单

Navbar brand #

Navbar burger #

Navbar menu #

Javascript 切换

Navbar start and navbar end #

Navbar item #

Transparent navbar | 透明导航栏 #

Fixed navbar | 固定导航栏 #

Try it out!

通过 CSS 或 JavaScript 来显示/隐藏下拉

右侧下拉

上拉

下拉菜单的样式

激活的导航栏下拉菜单项

下拉分割线

Colors | 颜色 #

Variables | 变量 #

Navbar

一个响应式的 导航栏，可以支持 图片、链接、和下拉菜单

Navbar brand #

Navbar burger #

Navbar menu #

Javascript 切换

Navbar start and navbar end #

Navbar item #

Transparent navbar | 透明导航栏 #

Fixed navbar | 固定导航栏 #

Try it out!

Dropdown menu | 下拉菜单 #

通过 CSS 或 JavaScript 来 显示/隐藏 下拉

右侧下拉

上拉

下拉菜单的样式

激活的导航栏下拉菜单项

下拉分割线

Colors | 颜色 #

Variables | 变量 #

一个响应式的导航栏，可以支持图片、链接、和下拉菜单

通过 CSS 或 JavaScript 来显示/隐藏下拉