Bulma组件

最新推荐文章于 2024-05-05 20:22:32 发布

程序员·小李

最新推荐文章于 2024-05-05 20:22:32 发布

阅读量1.1k

点赞数

分类专栏： # Bulma

本文链接：https://blog.csdn.net/Day_and_Night_2017/article/details/85270212

版权

Bulma 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

面包屑导航（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-large~~）

只有正文的消息框

菜单（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>