Bulma

Question

我正在尝试使用 Bulma CSS 框架实现此移动布局（红色页眉和蓝色页脚都是固定的）：

对应代码如下：

<nav class="navbar is-danger is-fixed-top" role="navigation">
    <div class="navbar-brand">
        <a class="navbar-item" href="index.php">
            <img src="http://via.placeholder.com/28x28" width="28" height="28">
        </a>
        <div class="navbar-burger burger">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</nav>
<nav class="navbar is-link is-fixed-bottom" role="navigation">
    <div class="navbar-brand">
        <a class="navbar-item is-expanded">
            <i class="fa fa-user"></i>
            <p class="is-size-7">Account</p>
        </a>
        <a class="navbar-item is-expanded">
            <i class="fa fa-list"></i>
            <p class="is-size-7">Tasks</p>
        </a>
        <a class="navbar-item is-expanded">
            <i class="fa fa-flag"></i>
            <p class="is-size-7">Alerts</p>
        </a>
        <a class="navbar-item is-expanded">
            <i class="fa fa-cog"></i>
            <p class="is-size-7">Settings</p>
        </a>
    </div>
</nav>
<div class="section">
    <h1>Content</h1>
    <p>Lorem ipsum dolor sit amet...</p>
</div>

Header : 有没有办法显示左侧汉堡，a 居中徽标和右侧图标 ?
Footer : 是否有 class 来显示图标和文本，而不是并排显示？

这个模型是开箱即用的吗？我不介意在 CSS 中手动完成，但由于这种移动布局看起来很常见，我希望有一种自然的方式来完成它。

Answer 1

Is this mockup achievable out of the box?

是也不是

您需要做一些 HTML 重组并添加几行 CSS 将汉堡移动到左侧。

页脚的布局可以使用 Bulma 修饰符实现类。

fiddle

解决方案

页眉

<div class="navbar-brand">
    <div class="navbar-burger burger">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <a class="navbar-item" href="index.php">
      <img src="...">
    </a>
</div>

调换元素的顺序 .navbar-brand - 汉堡排在第一位，徽标排在第二位。

添加以下内容CSS

.navbar-burger {
  margin-left: 0;
  margin-right: auto;
}

页脚

添加 .is-block 和 has-text-centered 修改类到 .navbar-item:

<a class="navbar-item is-expanded is-block has-text-centered">
   <i class="fa fa-user"></i>
   <p class="is-size-7">Account</p>
</a>

有关详细信息，请参阅 here and here

片段

添加了 js 以使菜单在演示中起作用

// 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-burger {
  margin-left: 0 !important;
  margin-right: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="navbar is-danger is-fixed-top" role="navigation">
  <div class="navbar-brand">
    <div class="navbar-burger burger" data-target="navMenu">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <a class="navbar-item" href="index.php">
      <img src="https://via.placeholder.com/28x28" width="28" height="28">
    </a>

  </div>
  <div class="navbar-menu" id="navMenu">
    <div class="navbar-start">
      <a class="navbar-item">Example 1</a>
      <a class="navbar-item">Example 2</a>
      <a class="navbar-item">Example 3</a>
    </div>
    <div class="navbar-end">
    </div>
  </div>
</nav>
<nav class="navbar is-link is-fixed-bottom" role="navigation">
  <div class="navbar-brand">
    <a class="navbar-item is-expanded  is-block has-text-centered">
      <i class="fa fa-user"></i>
      <p class="is-size-7">Account</p>
    </a>
    <a class="navbar-item is-expanded  is-block has-text-centered">
      <i class="fa fa-list"></i>
      <p class="is-size-7">Tasks</p>
    </a>
    <a class="navbar-item is-expanded is-block has-text-centered">
      <i class="fa fa-flag"></i>
      <p class="is-size-7">Alerts</p>
    </a>
    <a class="navbar-item is-expanded  is-block has-text-centered">
      <i class="fa fa-cog"></i>
      <p class="is-size-7">Settings</p>
    </a>
  </div>
</nav>
<div class="section">
  <h1>Content</h1>
  <p>Lorem ipsum dolor sit amet...</p>
</div>

Bulma - 移动布局

Bulma - Mobile Layout

css

解决方案