Bulma组件

面包屑导航（breadcrumb）

使用breadcrumb标记nav，组成ul列表。当前页使用is-active标记

<nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Bulma</a></li>
    <li><a href="#">Documentation</a></li>
    <li><a href="#">Components</a></li>
    <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
  </ul>
</nav>

面包屑导航对齐方式（is-centered / is-right）

使用图标标注面包屑导航

面包屑分隔符

面包屑导航大小（is-large，is-medium，is-small）

Card组件

选项卡（tabs）

使用class=tabs包裹一个ul，选中的为is-active

选项卡对齐方式（is-centered，is-right）

选项卡使用图标（span icon）

选项卡尺寸（is-large，is-medium，is-small）

带边框的选项卡（is-boxed）

类似于Radio的排他性选项卡(is-toggle)

toggle状态的圆角（is-toggle-rounded）

选项卡占满全部宽度（is-fullwidth）

Panel

panel 有这几种类型的容器：

• panel-heading 第一个子元素
• panel-tabs 用于导航
• panel-block 可以包含其他元素，例如：
   
• control
• input
• button
• panel-icon

panel-block 可以是一个锚标签 ＜a＞ 或包含一个复选框 ＜label＞ 的标签。

Pagination分页

分页禁用按钮（disabled）和当前页（is-current）

分页控件布局（is-centered，is-right）

圆角分页控件

不同尺寸的分页（is-large，is-small~~）

模态窗modal

使用is-active激活模态窗

modal-background（覆盖的透明层），modal-content（内容），modal-close（关闭按钮）

经典卡片模态窗

消息框（message）

包含message-header，messag-body

消息框不同颜色（is-info~~~）

消息框不同颜色（is-info~~~）

只有正文的消息框

菜单（menu）

menu-label，menu-list

DropDown

dropdown 是主类

• dropdown-trigger 是一个按钮
• dropdown-menu 下拉菜单，默认隐藏
• dropdown-content 内容的容器
• dropdown-item 可选中的项目
• dropdown-divider 分隔符

<div class="dropdown is-active">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>Dropdown button</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item">
        Dropdown item
      </a>
      <a class="dropdown-item">
        Other dropdown item
      </a>
      <a href="#" class="dropdown-item is-active">
        Active dropdown item
      </a>
      <a href="#" class="dropdown-item">
        Other dropdown item
      </a>
      <hr class="dropdown-divider">
      <a href="#" class="dropdown-item">
        With a divider
      </a>
    </div>
  </div>
</div>

Hoverable与active

<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu3">
      <span>Click me</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu3" role="menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item">
        Overview
      </a>
      <a href="#" class="dropdown-item">
        Modifiers
      </a>
      <a href="#" class="dropdown-item">
        Grid
      </a>
      <a href="#" class="dropdown-item">
        Form
      </a>
      <a href="#" class="dropdown-item">
        Elements
      </a>
      <a href="#" class="dropdown-item">
        Components
      </a>
      <a href="#" class="dropdown-item">
        Layout
      </a>
      <hr class="dropdown-divider">
      <a href="#" class="dropdown-item">
        More
      </a>
    </div>
  </div>
</div>
 
<div class="dropdown is-hoverable">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
      <span>Hover me</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu4" role="menu">
    <div class="dropdown-content">
      <div class="dropdown-item">
        <p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
      </div>
    </div>
  </div>
</div>

Dropdown位置

<div class="dropdown is-right is-active">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu6">
      <span>Right aligned</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu6" role="menu">
    <div class="dropdown-content">
      <div class="dropdown-item">
        <p>Add the <code>is-right</code> modifier for a <strong>right-aligned</strong> dropdown.</p>
      </div>
    </div>
  </div>
</div>

导航栏

navbar 主类

• navbar-brand 主要显示文字或者logo
• navbar-burger the hamburger icon, which toggles the navbar menu on
  touch devices
• navbar-menu 按钮，在右侧
• navbar-start 靠近logo的部分
• navbar-end 在导航栏的尾部
• navbar-item 导航项目
• navbar-link 连接，或者下拉框
• navbar-dropdown 下拉框
• navbar-divider 分隔符

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.io">
      <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
    </a>
 
    <a role="button" class="navbar-burger 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-start">
      <a class="navbar-item">
        Home
      </a>
 
      <a class="navbar-item">
        Documentation
      </a>
 
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">
          More
        </a>
 
        <div class="navbar-dropdown">
          <a class="navbar-item">
            About
          </a>
          <a class="navbar-item">
            Jobs
          </a>
          <a class="navbar-item">
            Contact
          </a>
          <hr class="navbar-divider">
          <a class="navbar-item">
            Report an issue
          </a>
        </div>
      </div>
    </div>
 
    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a class="button is-primary">
            <strong>Sign up</strong>
          </a>
          <a class="button is-light">
            Log in
          </a>
        </div>
      </div>
    </div>
  </div>
</nav>

Navbar-brand

Navbar-burger

固定位置的导航栏

is-fixed-top

is-fixed-bottom

然后给html一个has-navbar-fixed-top

不同颜色

文章转载自：https://blog.csdn.net/Day_and_Night_2017/article/details/85270212