当前位置：酷客网 > Bulma教程 > Bulma基础教程 > Bulma面包屑导航

Bulma面包屑导航

2020-09-17 分类：Bulma基础教程 阅读(812) 评论(0)

Bulma面包屑导航，点击coolcou.html的“Books”按钮，就会跳转到books.html页面，因此可以把后者看作前者的一个子页面。要想向用户强调该层次结构，可以显示一个Bulma面包屑，如图所示。

<nav class="breadcrumb">
    <ul>
        <li>
          <a href="books.html">Books</a>
        </li>
        <li class="is-active">
          <a href="new-book.html">New book</a>
        </li>
    </ul>
</nav>

Bulma面包屑导航

如上图所示，“New book”代表当前页面，不可点击。

完整代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>酷客网(coolcou.com)</title>
    <link rel="stylesheet" href="icons/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/website.css">
  </head>
  <body>
    <nav class="navbar has-shadow">
      <div class="navbar-brand">
        <a class="navbar-item">
          <img src="images/coolcou_icon.png">
        </a>
        <div class="navbar-burger burger">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>

      <div class="navbar-menu">
        <div class="navbar-start">
          <div class="navbar-item">
            <div>
              <img src="images/coolcou_type.png" width="250.5" height="21">
              <br>
              <small>Publishing at the speed of technology</small>
            </div>
          </div>
        </div>

        <div class="navbar-end">
          <div class="navbar-item has-dropdown is-hoverable">
            <div class="navbar-link">
              Alex Johnson
            </div>
            <div class="navbar-dropdown is-right">
              <a class="navbar-item">
                <div>
                  <span class="icon is-small">
                    <i class="fa fa-user-circle-o"></i>
                  </span>
                  Profile
                </div>
              </a>
              <a class="navbar-item">
                <div>
                  <span class="icon is-small">
                    <i class="fa fa-bug"></i>
                  </span>
                  Report bug
                </div>
              </a>
              <a class="navbar-item">
                <div>
                  <span class="icon is-small">
                    <i class="fa fa-sign-out"></i>
                  </span>
                  Sign Out
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </nav>

    <section class="section">
      <div class="columns">
        <div class="column is-4-tablet is-3-desktop is-2-widescreen">
          <nav class="menu">
            <p class="menu-label">
              Menu
            </p>
            <ul class="menu-list">
              <li>
                <a href="dashboard.html">
                  <span class="icon">
                    <i class="fa fa-tachometer"></i>
                  </span>
                  Dashboard
                  </a>
              </li>
              <li>
                <a class="is-active" href="books.html">
                  <span class="icon">
                    <i class="fa fa-book"></i>
                  </span>
                  Books
                </a>
              </li>
              <li>
                <a href="customers.html">
                  <span class="icon">
                    <i class="fa fa-address-book"></i>
                  </span>
                  Customers
                </a>
              </li>
              <li>
                <a href="orders.html">
                  <span class="icon">
                    <i class="fa fa-file-text-o"></i>
                  </span>
                  Orders
                </a>
              </li>
            </ul>
          </nav>
        </div>

        <div class="column">
          <nav class="breadcrumb">
            <ul>
              <li>
                <a href="books.html">Books</a>
              </li>
              <li class="is-active">
                <a href="new-book.html">New book</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </section>
  </body>
</html>
赞(2)

相关推荐

评论 抢沙发

评论前必须登录！

 

Bulma基础教程