Bulma Hero Fullheight 带导航栏

如果你正在寻找一种快速构建响应式网站的解决方案，那么 Bulma 可能是你需要的框架。Bulma 是一个基于 Flexbox 的现代 CSS 框架，它提供了易于使用的 UI 组件和组合实用程序，以帮助你快速构建美观的界面。

其中一个非常流行的 Bulma 组件是 Hero。它是一个全屏幕头部的布局，通常用于展示网站的重要内容。在这个教程中，我们将深入探讨如何使用 Bulma Hero Fullheight 组件来构建带有导航栏的网站。

准备工作

在开始之前，你需要继续了解一些前置条件。首先，你需要选择一种可以使用 CSS 和 JavaScript 的开发环境。如果你刚开始学习 Web 开发，那么一个好的选择是使用 CodePen。它是一个基于浏览器的代码编辑器，可以让你快速编写和测试代码。

其次，为了使用 Bulma，你需要将其引入到你的项目中。你可以通过 CDN 或下载它的源代码来做到这一点。我们建议使用 CDN，因为它更容易配置和使用。在 HTML 文件中包含下面的代码片段就可以使用 CDN 引用 Bulma。

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css"
  integrity="sha384-t5Md6QS5H85Sql5h6g0VY+0DkRlgBblKdteTZJZAU0S6052PBWJm1l+KRtbERoYI"
  crossorigin="anonymous"
/>

最后，在本教程中，我们将使用 Font Awesome 图标集来创建我们的导航栏。同样，你可以通过 CDN 或下载它的源代码来引用 Font Awesome。

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
  integrity="sha512-LPlsBDt+G8W54jKfHbMc1J9fgBSuNrvPnHM44+uV7ZJu/JS1QtVJdf2o+bxzAH7yD9h593nVBlKjR/c1l+OPQ=="
  crossorigin="anonymous"
/>

创建 Hero Fullheight

好了，现在你已经为使用 Bulma Hero Fullheight 组件所需的一切做好了准备。让我们开始吧！

首先，我们需要一个完整高度的 Hero 组件。为了创建一个 Hero Fullheight，我们需要在 hero 类的基础上添加一个 is-fullheight 类。这样，我们就可以让 Hero 撑满整个屏幕高度了。

<section class="hero is-fullheight">
  <!-- Your content here -->
</section>

在 Hero 模块内添加一个容器，这样就可以包含其他内容并对其进行样式设置。使用类 hero-body 表示该容器承载正文内容，同时在 HTML 中添加你的标题和其他元素。

<section class="hero is-fullheight">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">Bulma Hero Fullheight 带导航栏</h1>
      <h2 class="subtitle">创建一个漂亮的网站页头</h2>
    </div>
  </div>
</section>

好的，现在 Hero 组件已经创建好了。你可以在任何地方使用它，但是我们将在本教程的下一部分添加一个导航栏。

添加导航栏

现在，我们需要添加一个导航栏，以便用户可以导航到其他网站页面。Bulma 可以轻松添加导航栏，让我们看看如何实现。

首先，在 hero 标签外部创建一个 nav 标签，并添加 navbar 和 is-fixed-top 类。这样我们可以将导航栏固定在页面的顶部。如果你的导航栏中包含了公司品牌或版本信息，这会非常有用。

<nav class="navbar is-fixed-top">
  <div class="container">
    <div class="navbar-brand">
      <a class="navbar-item" href="#">
        <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma logo" />
      </a>
    </div>
  </div>
</nav>

现在我们已经创建了导航栏的外壳，接下来，我们需要为其添加一些元素。

在 navbar 块内，我们可以添加 navbar-menu 来包含其他导航元素，比如我们要添加的首页和关于页面。我们还可以添加 navbar-end 类来将其他导航元素靠右对齐。这种设计有助于提高用户体验，因为他们可以更快速地找到他们在寻找的选项。

<nav class="navbar is-fixed-top">
  <div class="container">
    <div class="navbar-brand">
      <a class="navbar-item" href="#">
        <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma logo" />
      </a>
    </div>
    <div class="navbar-menu">
      <div class="navbar-end">
        <a class="navbar-item" href="#">首页</a>
        <a class="navbar-item" href="#">关于</a>
      </div>
    </div>
  </div>
</nav>

现在，我们还需要添加一个菜单按钮，使其在小屏幕上可见。这样，用户在手机上访问网站时可以避免适应困难。

<nav class="navbar is-fixed-top">
  <div class="container">
    <div class="navbar-brand">
      <a class="navbar-item" href="#">
        <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma logo" />
      </a>
      <a
        role="button"
        class="navbar-burger"
        aria-label="menu"
        aria-expanded="false"
        data-target="navbarBasicExample"
      >
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>
    <div id="navbarBasicExample" class="navbar-menu">
      <div class="navbar-end">
        <a class="navbar-item" href="#">首页</a>
        <a class="navbar-item" href="#">关于</a>
      </div>
    </div>
  </div>
</nav>

现在，我们已经为 Bulma Hero Fullheight 组件添加了完美的导航栏。你可以毫不费力地将其应用于你的项目中，并为用户提供一个优美的浏览体验。

总结

在本教程中，我们学习了如何使用 Bulma 和 Font Awesome 创建 Hero Fullheight 组件带导航栏，从而实现一个美观的网站页头。我们全面介绍了如何使用 Bulma Hero Fullheight 组件、添加容器、创建导航栏和菜单按钮。

如果你正在寻找一种使用 Flexbox 的简单方法来创建个性化和响应式的网站，Bulma 是非常好用的选择。使用 Bulma Hero Fullheight 组件和导航栏，你可以轻松地构建精美的网站，并提高用户体验。