布尔玛 - 移动布局

Question

我正在尝试使用Bulma CSS Framework实现此移动布局（红色标题，蓝色页脚都是固定的）：

以下是相应的代码：

<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>

• 标题：有没有办法显示左侧汉堡，a 居中的徽标和右侧图标？
• 页脚：是否有一个类可以显示图标和文本而不是并排显示？

这个样机是否可以开箱即用？我不介意在CSS中手动执行它，但由于这种移动布局似乎很常见，我希望有一种自然的方式来做它。

Answer 1

  

这个样机是否可以开箱即用？

是和否。

您需要进行一些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和here

代码段

js在演示

中添加了make菜单功能

＆＃13;

＆＃13;

// 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');

    });
  });
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;